Ember Simple Auth Torri custom Provider

Question

I am trying to create a custom OAuth Provider for Ember Simple Auth Torri wrapper for Yahoo OAuth 2.0. I used the built in providers for Facebook and Google without any problems,but since Yahoo OAuth package is not provided by default I am trying to follow the manual and create my own.

//app/torri-provider/yahoo-oauth2.js

export default Ember.Object.extend({
  host: 'https://api.login.yahoo.com/oauth2/',
  // create a new authorization
  open: function(options) {
    return new Ember.RSVP.Promise(function(resolve, reject){
      console.log("Hi");
      var authurl="https://api.login.yahoo.com/oauth2/request_auth";

      return $.ajax(authurl, "GET", {
        // CORS
        crossDomain: true,
        xhrFields: {withCredentials: true}
      }).then(function(json) {
        // Massage this demo API endpoint to look like RESTAdapter expects.
        return { things: [json] };
      });


    });
  }
});

In my controller,I am calling it as -

'yahoo-share':function(){
  var self=this;
  this.get('session').authenticate('simple-auth-authenticator:torii',"yahoo-oauth2");
},

I am however unable to get part the CORS issue and receiving the following error on my console-

userhomeinvitemembers:1 XMLHttpRequest cannot load https://api.login.yahoo.com/oauth2/request_auth. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

I have tried adding the oauth2 endpoint to ember cli whitelist and content security policy whitelist but still getting the same error.

  ENV.contentSecurityPolicy = {
    'default-src': "'none'",
    'script-src': "'self' http://localhost:4200/",
    'font-src': "'self' http://localhost:4200/",
    'connect-src': "'self' http://localhost:4200/ http://localhost:3000/ http://192.168.1.173:3000/ https://api.login.yahoo.com/oauth2/request_auth",
    'img-src': "'self'",
    'style-src': "'self'",
    'media-src': "'self'"
  },


    ENV['simple-auth'] = {
      crossOriginWhitelist: ['https://api.login.yahoo.com/oauth2/request_auth'],
      authorizer: 'simple-auth-authorizer:oauth2-bearer',
      authenticationRoute: 'index',
      routeIfAlreadyAuthenticated:'userwelcome',

    },

    ENV['torii'] = {
      providers: {
        'facebook-oauth2': {
          apiKey: '799728020115355'
        },
        'google-oauth2': {
          apiKey:'299472944809-sddblocmketamp64sapk51qdrromkj0g.apps.googleusercontent.com',
          scope: 'https://www.google.com/m8/feeds/',
          redirectUri:'http://localhost:4200/userhomeinvitemembers'
        },
        'yahoo-oauth2': {
          apiKey:'dj0yJmk9UmpXWG1odlVlenRSJmQ9WVdrOVdFUkxRbVo2TkdVbWNHbzlNQS0tJnM9Y29uc3VtZXJzZWNyZXQmeD04Zg--',

        }
      }
    };

Answer 1

I don't think you can call that via AJAX but need to open a popup instead to allow the user to enter their Yahoo credentials and authorize your application. Once that has been done, Yahoo would redirect to a route you define and include an auth code in the query string which torii then reads and posts back to the parent window (see the source for the default OAuth 2.0 provider' open method: https://github.com/Vestorly/torii/blob/master/lib/torii/providers/oauth2-code.js#L118).