Add user registration to your app

Get the code: https://github.com/apigee/usergrid-sample-html5-messagee

One of the most fundamental needs of app developers is user registration and management. App developers need straightforward ways to handle access control, groups, roles, subscriptions, upgrades, reminders, and so on. User registration and access control mechanisms typically require a significant amount of server-side development. There is a ready-made user management system in App services that uses RESTful HTTP calls.

With just a couple of supporting files and not very much code, your app can create users and then authenticate them by making two simple calls to the App services API.

To explain how this works let’s break down some of the code in our example messaging app, Messagee. (See Messagee Example)

Basic app structure

The Messagee app uses an MVC (Model View Controller) architecture. Let’s focus on the following files provided with the Messagee app (github: https://github.com/apigee/usergrid-sample-html5-messagee).

The Controller file: /app/controllers/MsgController.js

An API helper file: usergrid.client.js

We start out with a simple form that contains username and password fields and a New Account button.

Form is submitted to the Controller file

When a user fills out the form and clicks New Account, the form submission is directed to the Controller file, where it is picked up as a new user request:

newUser: function(options) {
           //attempt to create a new user
client.createUser(app_name, options.data.username, '', '', options.data.password

(code truncated, see file: /app/controllers/MsgController.js)

The controller calls the createUser function in the API helper file.

The createUser function does a POST to the App services API.

Notice that the POST contains a JSON payload with additional parameters (email, and password) not used in the Messagee app. These are not required fields and were not needed for the Messagee sample app. However, you can use them if your app requires them. Also, applicationId and app_name are used interchangeably and refer to the same UUID of the app.

function createUser(applicationId, username, fullname, email, password, success, failure) {
       apiRequest("POST", "/" + applicationId + "/users", null, JSON.stringify({
           username: username,
           name: fullname,
           email: email,
           password: password
       }), success, failure);
}

Call to the apiRequest fucntion

Finally, there is a call to the apiRequest function. This function prepares the call and makes the POST in the following format:

POST /<app_name>/users

The App services API returns a success or failure, which then percolates back up to the controller. After the user is created, the user is authenticated with the newly created credentials. The app needs only to do another POST to the API using the following format:

var formdata = {
           grant_type: "password",
           username: email,
           password: password
       };
       apiRequest("POST", "/"+ applicationId + "/token", formdata, null,
       function(response) {
           if (response && response.access_token && response.user) {
               self.loggedInUser = response.user;
               self.accessToken = response.access_token;
               self.currentOrganization = null;
               localStorage.setObject('usergrid_user', self.loggedInUser);
               localStorage.setObject('usergrid_access_token', self.accessToken);
               if (success) {
                   success();
               }
           } else if (failure) {
               failure();
           }
       }

In the code above, a successful call is handled by capturing the user's access token, and then storing a value to indicate that the user has logged in successfully. That is all there is to it!

Summary

With just a few supporting files and not very much code, our app has created a new user and then authenticated them by making two simple calls to the App services API.

A simple POST back to the API with the JSON payload contains your new user’s information.