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?

You probably need to implement a custom authenticator. Ember Simple Auth is high level library that implements a session and an interface to authenticate that. To use OpenID you would have to implement a custom authenticator - see this example for how to get started: github.com/simplabs/ember-simple-auth/blob/master/examples/…. Also check out the API docs: ember-simple-auth.com/ember-simple-auth-api-docs.html — marcoow
Thx marcoow, I'm looking at implementing a custom torii provider as I updated my question.. — genwip
I'll be following developments on this topic with interest, since we're going to be switching our auth stack to OpenID Connect, and it'd be great to have an Ember auth client. The closest thing I've seen is this PR on the torii repo: github.com/Vestorly/torii/pull/216 (but it looks like it's stalled). — Dmitri Zagidulin

Christian Zosel Christian Zosel · Accepted Answer · 2019-04-07T10:19:28

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)

How to use OpenId Connect with ember-cli application?

1 Answers