How to use OpenId Connect with ember-cli application?

Question

Now that I'm looking to use Ember-cli for my front-end, I'd need to use OpenID Connect for authentication and authorisation.

Has anyone done anything like this before?. I couldn't find any examples so far. I came across 'ember-cli-simple-auth', 'ember-cli-simple-auth-oauth2', 'ember-cli-simple-auth-token'.

I'm guessing I should be using 'ember-cli-simple-token'? Has anyone tried this? if so could you point me to any examples/reading resources?

Update: (11 Jul 15 ) I've been looking into 'torii' in particular 'ember-cli-torii-azure-provider'. I could get Authorization code fine, but no Id_Token (I guess its because it isn't asking Azure AD for Id_Token ), looks like I do need to look at writing a new torii provider. As per the Torii documentation,

Torii will lookup providers in the Ember application container, so if you name them conventionally (put them in the app/torii-providers directory) they will be available automatically when using ember-cli or ember app kit.

Does it mean, in my ember-cli project, I need to create 'torii-providers' folder and create the new provider? lets say 'torii-azure-openidconnect.js'?

UPDATE:

I'm trying to create a custom Torii provider for AzureAD OpenID Connect.

I'm getting "Error: The response from the provider is missing these required response params: id_token"

Here is my custom provider :

import Ember from 'ember';
import Oauth2 from 'torii/providers/oauth2-code';
import {configurable} from 'torii/configuration';

var computed = Ember.computed;

/**
 * This class implements authentication against AzureAD
 * using the OAuth2 authorization flow in a popup window.
 * @class
 */
export default Oauth2.extend({
  name: 'azure-ad-oidc',

  baseUrl: computed(function() {
      return 'https://login.windows.net/' + this.get('tennantId') + '/oauth2/authorize';
    }),

    tennantId: configurable('tennantId', 'common'),

    // additional url params that this provider requires
    requiredUrlParams: ['api-version','response_mode', 'nonce'],

    optionalUrlParams: ['scope'],

    responseMode: configurable('responseMode', null),

    responseParams: computed(function () {
      return [ this.get('responseType') ];
    }),

    state: 'STATE',

    apiVersion: '1.0',

    nonce : configurable('nonce', null),

    responseType: configurable('responseType', 'null'),

    redirectUri: configurable('redirectUri', function(){
      // A hack that allows redirectUri to be configurable
      // but default to the superclass
      return this._super();
    }),

    open: function(){
      var name        = this.get('name'),
          url         = this.buildUrl(),
          redirectUri = this.get('redirectUri'),
          responseParams = this.get('responseParams'),
          responseType = this.get('responseType'),
          state = this.get('state'),
          shouldCheckState = responseParams.indexOf('state') !== -1;

      return this.get('popup').open(url, responseParams).then(function(authData){
        var missingResponseParams = [];

        responseParams.forEach(function(param){
          if (authData[param] === undefined) {
            missingResponseParams.push(param);
          }
        });

        if (missingResponseParams.length){
          throw new Error("The response from the provider is missing " +
                "these required response params: " + missingResponseParams.join(', '));
        }

        if (shouldCheckState && authData.state !== state) {
          throw new Error('The response from the provider has an incorrect ' +
                          'session state param: should be "' + state + '", ' +
                          'but is "' + authData.state + '"');
        }

        return {
          authorizationCode: authData[responseType],
          provider: name,
          redirectUri: redirectUri
        };
      });
    }

});

configuration.js

torii: {
  sessionServiceName: 'toriiSession',
  providers: {
    'azure-ad-oidc' :{
      tennantId : 'tenant id',
      client_id : 'client_id',
      redirectUri : 'http://localhost:4200',
      nonce : 'my_nonce',
      responseMode : 'form_post',
      responseType : 'id_token',
      scope : 'openid',
      apiKey : ''
    }
  }
},

routes/application.js

import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    azureLogin: function() {
        this.get('torii').open('azure-ad-oidc').then(function(data) {
              var authCode = this.get('toriiSession.authorizationCode');
              console.log(authCode);
        });
    }
  }
});

couldn't workout how to fix this..am I missing anything?

Answer 1

Please see ember-simple-auth-oidc, which implements the Authorization Code Flow of OpenID Connect and integrates with ember-simple-auth.

(I realize that the question has been asked a long time ago, but maybe it helps people who run into this in the future)