Connecting to github with Ember.js and Torii (oauth2)

Question

I'm trying to use the github-oauth2 provider in Torii, but I'm stumped on how I'm supposed to se tup some of the callbacks. I'll trace the code I'm using, as well as my understanding of it, and hopefully that can help pinpoint where I'm going wrong.

First, in my action, I'm calling torii's open method as it says to do in the docs:

this.get('torii').open('github-oauth2').then((data) => {
  this.transitionTo('dashboard')
})

And, of course, I have the following setup in my config/environment.js:

var ENV = {
  torii: {
    // a 'session' property will be injected on routes and controllers
    sessionServiceName: 'session',
    providers: {
      'github-oauth2': {
        apiKey:      'my key',
        redirectUri: 'http://127.0.0.1:3000/github_auth'
      }
    }
  },
}

The redirectUri is for my Rails server. I have the same redirectUri setup on my github app, so they match.

Here's what I have on my server. It's likely this is where the problem is. I'll get to the symptoms at the end.

def github
  client_id = 'my id'
  client_secret = 'my secret'
  code = params[:code]
  @result = HTTParty.post("https://github.com/login/oauth/access_token?client_id=#{client_id}&client_secret=#{client_secret}&code=#{code}")
  @access_token = @result.parsed_response.split('&')[0].split('=')[1]
  render json: {access_token: @access_token}  
end

So I post to github's access_token endpoint, as I'm supposed to, and I get back a result with an access token. Then I package up that access token as json.

The result of this is that the torii popup goes to the rails page:

Unfortunately, what I was hoping for was for the torii popup to disappear, give my app the access_token, and for the code to move on and execute the code in my then block.

Where am I going wrong?

score 5 · Answer 1 · answered May 16 '16 at 21:16

Many thanks to Kevin Pfefferle, who helped me solve this and shared the code to his app (gitzoom) where he had implemented a solution.

So the first fix is to clear my redirectUri, and to set it on github to localhost:4200. This made the app redirect so that it's an Ember app that it's redirected to.

The second fix was to create a custom torii provider

//app/torii-providers/github.js
import Ember from 'ember';
import GitHubOauth2Provider from 'torii/providers/github-oauth2';

export default GitHubOauth2Provider.extend({
  ajax: Ember.inject.service(),
  fetch(data) {
    return data;
  },
  open() {
    return this._super().then((toriiData) => {
      const authCode = toriiData.authorizationCode;
      const serverUrl =  `/github_auth?code=${authCode}`;

      return this.get('ajax').request(serverUrl)
        .then((data) => {
          toriiData.accessToken = data.token;
          return toriiData;
        });
    });
  }
});

Not sure why this then triggers but the then I was using before didn't. Anyways, it grabs the data and returns it, and then the promise I was using before gets the data correctly.

this.get('torii').open('github-oauth2').then((data) => {
  //do signon stuff with the data here
  this.transitionTo('dashboard')
})

So there we go! Hopefully this helps other folks who are stuck in the future.

Connecting to github with Ember.js and Torii (oauth2)

1 Answers1