Basic Authentication with the WP-API (v2) and AngularJS

Check out an updated post on WordPress login using Typescript and Angular 2 with a free plugin here.
Working on the WP-App Project, we need to use authentication to do certain things in the app. Deleting/approving comments, or listing users for example.
Basic Authentication is handy for testing code, but it should only be used in development, since you send the user/pass with every request. For production, you’ll want to use OAuth from an external client like a mobile app. I haven’t dug into OAuth yet, but it’s documented a little bit here.
We are using the Ionic Framework for the WP-App Project, which is based on AngularJS. Basic authentication requires sending the username and password, base64 encoded, in the request header. Here’s what that looks like.

Requirements

Basic authentication requires the Basic Auth plugin to be installed, along with the WP-API v2.

Services

First we need a Base64 service, because we aren’t using a library that does that automatically for us. This code goes in services.js, or whatever file you have your factories in.

Next we need our data loader, you can put this right below the Base64 service, in the same file.
[javascript]
.factory(‘DataLoader’, function( $http ) {
return {
get: function(url) {
return $http.jsonp( url );
},
getAuth: function(base64, url) {
$http.defaults.headers.common[‘Authorization’] = ‘Basic ‘ + base64;
var req = { method: ‘GET’, url: url }
return $http( req );
},
}
});
[/javascript]
The auth part is setting the authorization headers to use Basic auth, and send along our encoded username and password.

Controller

Now in our controller, we can use the services above. This would ideally go in a different file, such as controllers.js.
[javascript]
angular.module(‘myApp.controllers’, [])
// Make sure to inject our services for DataLoader and Base64
.controller(‘myCtrl’, function($scope, DataLoader, Base64 ) {
var username = ‘user’;
var password = ‘123456’;
// use our Base64 service to encode the user/pass
var base64 = Base64.encode( username + ‘:’ + password );
// Some endpoint that needs auth
var dataURL = ‘https://mysite.com/wp-json/wp/v2/users’;
DataLoader.getAuth( base64, dataURL ).then(function(response) {
$scope.data = response.data;
}, function(response) {
console.log(‘Error’);
$ionicLoading.hide();
});
});
[/javascript]
We can use this same method to send other authenticated requests, such as PUT and DELETE. To do that, you would just change the req variable in the getAuth function like this:
[javascript]
var req = {
method: ‘DELETE’,
url: url
}
[/javascript]
Remember that basic auth is not for production, and using https is always a good idea.
Using basic authentication, you should be able to experiment with getting authenticated data such as listing users, and deleting posts or other items. Using PUT or POST requires sending additional data, I’ll tackle that in another post.
Cheers!