Can't get started

[seifsallam]

I've followed the documentation for getting started, but i can't seem to get ember-oauth2 to work. I keep getting

Uncaught TypeError: Cannot call method 'authorize' of undefined 

Here is my code

Ember.OAuth2.config = twitter:
  clientId: "twitter_consumer_key"
  authBaseUri: "https://api.twitter.com/oauth/authenticate"
  redirectUri: "https://localhost:9000/callback"
  scope: "public write"

Ember.OAuth2.reopen(
  onSuccess: ->
    console.log 'hello, onSuccess'
)

Ember.OAuth2.reopen(
  onError: ->
    console.log  'hello, onError'
)

App.oauth = Ember.OAuth2.create(
  providerId: 'twitter_consumer_key'
)

App.aouth.authorize()

[amkirwan]

There was a typo in the docs I just fixed. It should be:

App.oauth.authorize() 

not

App.aouth.authorize()

That is why calling App.aouth.authorize() results in the undefined error.

[seifsallam]

Thanks :). One more thing, I don't understand what should providerId be? I've tried twitter consumer key and i get

Uncaught Error: No client id given. 

When i set providerId to twitter it works, but i get

Uncaught TypeError: Cannot call method 'focus' of undefined 

[seifsallam]

I got past the error above, by calling App.oauth from a button action, but i still can't get twitter to work. When i get redirected to twitter i get this message. Any ideas?

Whoa there!
There is no request token for this page. That's the special key we need from applications asking to use your Twitter account. Please go back to the site or application that sent you here and try again; it was probably just a mistake.

[amkirwan]

I believe Twitter is still mostly using OAuth 1.0 and that they don't support the OAuth 2.0 Implicit Grant flow. They currently only support OAuth 2.0 for app based authentication.

https://dev.twitter.com/docs/api/1.1

[seifsallam]

Ok, can you please explain what is providerId, and how can i get it for facebook?

[amkirwan]

I updated the README so hopefully it is less confusing. The providerId is the key(name) for the oauth configuration you want to use. Even though Twitter doesn't support the OAuth 2.0 client side flow using your previous configuration as an example you would call create with 'twitter' as that is the key(name) for the configuration.

Ember.OAuth2.config = {
  twitter: {
    clientId: "twitter_consumer_key",
    authBaseUri: "https://api.twitter.com/oauth/authenticate",
    redirectUri: "https://localhost:9000/callback",
    scope: "public write"
  }
}

App.oauth = Ember.OAuth2.create({providerId: 'twitter'});
App.oauth.authorize();

For Facebook you will need to create a Facebook Application and you can configure Ember.OAuth2 like this:

Ember.OAuth2.config = {
  facebook: {
    clientId: 'facebook app id,
    authBaseUri: 'https://www.facebook.com/dialog/oauth',
    redirectUri: 'https://example.com/auth/facebook/callback'
  }
}

App.oauth = Ember.OAuth2.create({providerId: 'facebook'});
App.oauth.authorize();

[amkirwan]

I just tested Ember-OAuth2 with Facebook and it is working.

[seifsallam]

Thanks for the update, its perfectly clear now :). I still can't get facebook to run. I'm not sure if this is a problem with history URL or in ember-oauth2. I've set it up the way you mentioned above. But i keep getting empty hash from window.location.hash, then onError.

Here is the full view of my implementation

# app.coffee

App = window.App = Ember.Application.create(....)

require 'scripts/...'

# ember-oauth2
Ember.OAuth2.config =
  facebook:
    clientId: "xxxxxxxxxxx"
    authBaseUri: "https://www.facebook.com/dialog/oauth"
    redirectUri: "http://localhost:9000/callback"

Ember.OAuth2.reopen(
  onSuccess: ->
    console.log 'oauth2: onSuccess'

  onError: (reason) ->
    console.log  'oauth2: onError', reason
)

App.oauth = Ember.OAuth2.create(
  providerId: 'facebook'
)

## Then in a template <button {{action "oauth"}} class="btn btn-default">Sign in with Facebook</button>

## Route actions
App.AuthRoute = Ember.Route.extend(
  actions:
     oauth: ->
        App.oauth.authorize()
)

## Callbacks route after it enters 
App.CallbackRoute = Ember.Route.extend(
  enter: ->
    hash = window.location.hash
    console.log hash
    window.opener.App.oauth.onRedirect(hash)
    window.close()

Am i missing something?

[amkirwan]

The callback should be like the example in the README. There is no App.CallbackRoute your server or Rails app should serve a page like this at the callbackURI. Handling query params is still an experimental part of Ember and therefore trying to make this work through the Ember router is going to be difficult at the current time.

<!DOCTYPE html>
<html>
  <head>
    <title>Authorize</title> 
    <script>
      var hash = window.location.hash;
      window.opener.App.oauth.onRedirect(hash);
      window.close();
    </script>
  </head>
</html>

The redirect uri should be like the one I showed in the previous example substitute 'example.com' for what you are using. I don't think Facebook will make a callback to localhost with a port number. By default facebook calls back to your app using '/auth/facebook/callback'. For the callback if you are running it locally without https then change the protocol to http. Just remember to use https in production. I would use POW https://github.com/37signals/pow. for development.

Ember.OAuth2.config = {
  facebook: {
    clientId: 'facebook app id,
    authBaseUri: 'https://www.facebook.com/dialog/oauth',
    redirectUri: 'https://example.com/auth/facebook/callback'
  }
}

You will need to make sure you have all the correct settings and permissions setup on Facebook for the redirect domain you specify.

I have Ember-OAuth2 working with Facebook so it definitely is working.

If I have time I'll try and setup an example Rails/Ember app.

[seifsallam]

Oh, so I need to have ember and rails as same app or in the same domain? Cuz they are two separate things for me, and each on different subdomains.