Building Native Mobile Apps with Ionic Framework and Drupal Back-end: Add User Authentication

Today I will show how to authorize a user in your mobile app with a Drupal website. First of all we should configure Drupal to allow REST authentication, so go to /admin/structure/services and click the “Edit” link opposite of your service name. Here, check the “Session authentication” option and save. Next go to the resources tab and edit user resource alias and check off the following options for it: login, logout, token, and register.

Also, we should check the user registration settings on /admin/config/people/accounts to allow new user registration by visitors, and account activation without email or admin confirmation.

To login a user with the services module, we must do following steps:

1. Send GET request to /services/session/token.

2. Get the response with CSRF token.

3. Send POST request with username, password with token received before in X-CSRF-Token header to /user/login endpoint.

4. Receive an object with user data and new CSRF token on login success or error code with a message on login fail.

To log out a user, we have to send POST request to /user/logout with X-CSRF-token header, that contains the token which we receive on login.

And to register a new user we send a POST request to /user/register API URL with user data. As a response we should get a new user object and error status message on registration fail. The minimum data required for a user registration is username, e-mail address, and password, but we should add a status equal to 1, to immediately make a new account active, ready for use.

In-app integration

It is good practice to save some data on a device to prevent the user from manually editing any information that is needed every time that we run application. We should use Local Storage to store user login status, tokens from the last login time and user data. AngularJS has some modules to add to Local Storage support for an application; I chose angularLocalStorage. It also has a cookie fallback and uses the ngCookies module for it.

So we should download these two modules and plug them in our index.html file.

gist link

Next we should define the UI Router state for account tab, angularLocalStorage module dependency in our app.js file and add local storage prefix constant, we will add it to our config constant.

gist link

In the services.js file we will create a new factory called User. This will contain a list of methods to work with user operations on the REST server, and to save / delete user data from local storage. We use $rootScope services to have access to login status and user information from any part of the application.

gist link

In tabs.html we add an Account tab link.

gist link

Let’s create a tab-account template. Here we should show the following: for an unauthorized user, show login and register buttons that will open a popup form for each action; and for a logged-in (authorized) user, show information about user and a logout button. To show these parts of the template conditionally, we use the ng-show directive and loginSuccess variable that are stored globally in $rootScope.

gist link

To show popups with login/register forms we should use $ionicModal service, which comes with Ionic Framework core. We must create templates for each modal window: login.html and register.html.

gist link

gist link

Finally, we should define a controller for each (login and register) popup. We initialize a new $ionicModal instance and set a template for it, creating methods to open and close the modals, and doLogin, doLogout and doRegistration actions. It will be easy to handle any error message because our User Factory methods return promises. Also, we should save user information to Local Storage and send requests to the server only if it is necessary.

gist link

You can clone and try all this code from my GitHub repository, and to get the code of this part, checkout the part5 branch (just run “git checkout -f part5”). Now we can test the application in a browser - run “ionic serve” prompt command from the project directory and see the result of our work.

Tomorrow, I will add comments to articles and ability to post a comment for logged in users.

DrupalBest PracticesDrupal How toDrupal PlanetLearning SeriesTechnology ToolsPost tags: IonicAppsDrupal