EmberJS add-on for blueprint-gatekeeper

ember install ember-cli-gatekeeper

Update the ENV variable in config/environment.js with the required configuration values:

The client secret should only be used if the web application is installed in a trusted environment, such as a mobile application via ember-cordova.

Here is an example config/environment.js with the Gatekeeper configuration:

let ENV = {
  // ...
  
  EmberENV: {
    FEATURES: {
    // This must be enabled for account adapter to work.
    'ds-improved-ajax': true
    }
    
    // ...
  },
  
  gatekeeper: {
    baseUrl: 'https://mydomain.com/gatekeeper',

    tokenOptions: {      
      client_id: '59ee923e1fd71c2ae68ade62',
      client_secret: '1234567890'
    }
  }
}

Protected application routes are routes that require the user to be signed in to access. Creating protected application route is very simple.

First, create the route using ember-cli.

ember g route [name]

Then, import the Authenticated mixin from ember-cli-gatekeeper and apply it to the route.

// app/routes/comments.js

import Route from '@ember/routing/route';
import Authenticated from 'ember-cli-gatekeeper/mixins/authenticated';

export default Route.extend (Authenticated, {
  model () {
    // Get the user for the current session.
    let currentUser = this.get ('currentUser');
    return this.get ('store').query ('comments', {user: user.id});
  }
});

The gatekeeper service is injected into all routes. The Authenticated class provides the currentUser property, which gives you access to the account model (less the password) for the signed in user.

When this route is accessed and the user is not signed in, the user will be transitioned to the sign-in route (see Configuration). After the user signs in, the user will be transitioned back to the original route.

ember-data uses data models to access resources on a remote server. When using Gatekeeper, the routes for accessing these resources is protected via an authorization token. To get this authorization token into each ember-data request, you must extend your application (or model-specific adapter) from the RESTAdapter in Gatekeeper.

// app/adapters/application.js

import RESTAdapter from 'ember-cli-gatekeeper/-lib/user/adapters/rest';

export default RESTAdapter.extend({
  
});

You can then continue configuring the adapter as normal.

To sign in a user, you need a route with a form that collects the user's username and password. The Gatekeeper add-on provides a form that can be used to sign-in a user.

{{gatekeeper-sign-in complete=(action "complete")}}

This form needs to be added to your sign-in route. When the user has signed in successfully, the complete action is invoked. At this point, you are free to transition to any route in the application.

A standard practice is to route to either the start route, or to the previous route the user tried to access when they were not signed in. If you want this behavior, then apply the Completed mixin to the controller for the sign in route.

import Controller from '@ember/controller';
import Completed  from 'ember-cli-gatekeeper/mixins/completed';

export default Controller.extend (Completed, {
  
});

Now, the user will either be routed to the start route, or the previously accessed route before being routed to the sign in route, when they successfully sign in.

Gatekeeper uses different public/private key verification schemes to ensure that robots are not accessing the system. When developing a web application, it is not save to place a secret in an EmberJS application because it will be accessible to site visitors. We therefore recommend you use a reCAPTCHA service, such as Google reCAPTCHA, to verify users are not robots.

Gatekeeper provides out-of-the-box support for Google reCAPTCHA via the ember-cli-google-recaptcha add-on. First, you have to do is add your siteKey to config/environment.js:

let ENV = {
  // ...
  
  'ember-cli-google': {
    recaptcha: {
      siteKey: 'This is where my siteKey goes'
    }
  }
};

The add-on will automatically detect the presence of the siteKey, and enable Google reCAPTCHA in the default login form. Next, you replace the standard sign in component with the reCAPTCHA sign in component.

{{gatekeeper-sign-in-with-recaptcha recaptcha=v2 complete=(action "complete")}}

Set recaptcha="invisible" to use invisible reCAPTCHA.

A signed in user can be signed out from any where in the application as long as you have access to the gatekeeper service.

The session service is injected into all routes and controllers.

// app/controllers/index.js

import Controller from '@ember/controller';

export default Controller.extend({
  actions: {
    signOut () {
      this.get ('session').signOut ().then (() => {
        this.replaceRoute ('sign-in');
      });
    }
  }
});

The Gatekeeper add-on also provides a default form for creating an new account. You use it in a similar manner as signing in a user. First, add the sign up form to the route for signing up a user, and configure the form to your needs.

{{gatekeeper-sign-up complete=(action "complete")}}

The Gatekeeper add-on also has sign up components that supports reCAPTCHA.

Then, apply the Completed mixin to the controller for the sign up route.

import Controller from '@ember/controller';
import Completed  from 'ember-cli-gatekeeper/mixins/completed';

export default Controller.extend (Completed, {

});

The client registered with the server must have the gatekeeper.account.create scope. Otherwise, the client will not be authorized to create the account.

We use the account model to create user accounts. We assume that you have created a template to gather the username, password, and email address from the user and have a controller action to that creates the account:

import Controller from '@ember/controller';

export default Controller.extend({
  actions: {
    createAccount () {
      let {email, username, password} = this.getProperties (['email', 'username', 'password']);
      let account = this.get ('store').createRecord ('account', {username, password, email});
      let adapterOptions = {signIn: true};
      
      account.save ({adapterOptions}).then (account => {
        // You can transition to a protected application route
      }).catch (reason => {
        // Display error message to user
      });
    }
  }
});

The save() method takes an optional adapterOptions property that allows you to sign in the user when the account is created. The advantage of doing this it that it allows you to transition to a protected application route after account creation, or access protected data as part of the creation process. Otherwise, the user will have to sign in after creating the account to access a protected application route.

Happy Coding!