lundi 26 novembre 2018

How to authenticate against Twitter with Ember Torii and Ember Simple Auth

I'm trying to authenticate against Twitter using Ember Torii and Ember Simple Auth. However, I'm not sure how to properly close the authentication popup once the user has been authenticated. My code:

//app/authenticators/torii.js
import {inject as service} from '@ember/service';
import Torii from 'ember-simple-auth/authenticators/torii';

export default Torii.extend({
  torii: service(),
  ajax: service(),

  authenticate() {
    const ajax = this.get('ajax');
    return this._super(...arguments).then((data) => {
      console.log('Authorization data:');
       console.log(data);
      if(data.provider === "twitter" && data.code) {
        return {
          accessToken: data.code,
          provider: data.provider
        };
      }
      //This is for OAuth2 providers e.g. Facebook
      return ajax.request(
        'http://localhost:8080/api/1/auth', {
        type: 'POST',
        dataType: 'json',
        crossDomain: true,
        contentType: 'application/json',
        data: {'provider': data.provider, 'authorizationCode': data.authorizationCode}
      }).then((response) => {
        return {
          accessToken: response.token,
          provider: data.provider
        };
      });
    });
  }
});


  //config/environment.js
  .......
  providers: {
    'facebook-oauth2': {
      apiKey: 'xxxxxxxxxxxxxx',
      scope: 'public_profile,email'
    },
    'twitter': {
      requestTokenUri: 'http://localhost:8080/api/1/auth/twitter/'
    },

//app/torii-providers/facebook-oauth2.js
import { computed } from '@ember/object';
import FacebookOauth2Provider from 'torii/providers/facebook-oauth2';

export default FacebookOauth2Provider.extend({
  redirectUri: computed(function() {
    return [
      window.location.protocol,
      '//',
      window.location.host,
      '/torii/redirect.html'
    ].join('');
}),

  fetch(data) {
    return data;
  }
});

From my understanding, the following happens in case of authentication using Twitter:

  1. User clicks on an UI element to initiate the authentication flow. Ember Torii creates a popup and does a GET request to requestTokenUri. The API back-end generates the oauth_token required by Twitter and redirects to Twitter login page with oauth_token as query parameter.
  2. The user logs in. Assuming a successful login, Twitter then redirects the browser popup to the configured Callback URL on the API backend along with oauth_token and oauth_verifier parameters.
  3. The back-end API's Callback URL receives these parameters and exchanges these for oauth_token and oauth_token_secret that are stored in the back-end.

My question is basically, what happens next and how to cleanly and securely close the pop-up and initialize the session:

My back-end converts the token generated in 3 above to an internal JWT token and re-directs the browser pop-upto torii/redirect.html?code=<<JWTTOKEN>>. However, when the browser pop-up closes, Torii tries to re-authenticate the given token by calling authenticate method, which is not required. I've put in a workaround as show above in app/authenticators/torii.js. Is this correct? Is there a better way?




Aucun commentaire:

Enregistrer un commentaire