search

amkirwan / ember-oauth2

JavaScript library for using OAuth 2.0 Implicit Grant flow (Client-Side Flow) with Ember.js
MIT License
133 stars 22 forks source link

Can't connect to facebook API #7

Closed Blackening999 closed 10 years ago

Blackening999 commented 10 years ago

Hello! I'm experiencing issue while trying to connect to facebook API. The error appears at ---ember-oauth2.js:170--- var dialog = window.open(authorizeUri, 'Authorize', 'height=600, width=450'); after evaluation dialog is undefined

Also, if I'm trying to manually open the redirect link (authorizeUri), have an error in console log: "Uncaught SecurityError: Blocked a frame with origin "http://localhost:5000" from accessing a frame with origin "chrome-devtools://devtools". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "chrome-devtools". Protocols must match." Running in FF: "TypeError: window.opener is null"

Your plugin seems very convenient (with google there wasn't any problem, but facebook...), and I really don't want to swtich to something like FB SDK :)

---redirect.ejs---

<!doctype html>

Authorize

---OAuth2 configs -- facebook: { clientId: 'client-id-here', authBaseUri: 'https://www.facebook.com/dialog/oauth', redirectUri: 'http://localhost:5000/redirect', scope: 'email' }

---Login controller--- authenticateFacebook: function() { App.oauth = Ember.OAuth2.create({providerId: 'facebook'}); this.get('session').authenticate('authenticator:facebook', {}); },

---Facebook Authenticator---

authenticate: function() { var _this = this; return new Ember.RSVP.Promise(function(resolve, reject) { App.oauth.on('success', function(stateObj) { console.log(stateObj); }); App.oauth.on('error', function(err) { reject(err.error);}); App.oauth.authorize(); });// return },

Blackening999 commented 10 years ago

Doesn't work with github/twitter also

amkirwan commented 10 years ago

I haven't had a chance yet to troubleshoot what the problem could be, I will try and take a look at it in the next day or two.

Just quickly looking at your setup I'm wondering if using a callback to localhost:5000 might be the problem. You might try setting up POW or another server so you can use a hostname for the app you are running locally.

amkirwan commented 10 years ago

I just tested Facebook access with an app I have and was able to retrieve an access_token. I'm guessing the issue you are having is with using localhost/127.0.0.1 Try using POW or another server locally and let me know if that fixes the problem.

Blackening999 commented 10 years ago

Yeah, I've done it with localhost though.

authenticate: function() { var _this = this; return new Ember.RSVP.Promise(function(resolve, reject) { App.oauth.on('success', function(stateObj) { var access_token = this.getAccessToken(); Ember.run(function() { _this.get_info(access_token).then( function(resp) { console.log(resp); resolve(resp); }, function(rej) { reject(rej); } ); }); }); App.oauth.on('error', function(err) { reject(err.error);}); App.oauth.authorize(); }); },

But when I tried to connect to github and twitter I've experienced a lot of troubles and decide to use passport and server-side flow :\ Unfortunately, client-side flow is useless at this point, but if you have got connections to those APIs, please share. Briefly, problems are: "Lack of implicit grant flow" in the github and "OAuth 1.0" in the twitter API.

amkirwan commented 10 years ago

Many sites require a FQDN for the redirect url and will not redirect back to localhost/127.0.0.1

If the API doesn't support OAuth 2 and the Implicit Grant flow (Client-Side Flow) then this ember addon isn't going to work for those APIs. This only works with APIs that support OAuth 2.0 Client-Side flow.

amkirwan commented 10 years ago

Unfortunately the more authorization providers you try to support the greater the discrepancy of OAuth 2.0 flow support you will find between the various providers.

Blackening999 commented 10 years ago

Yeah, I didn't know that - it's my first experience with oauth. But I've gained a proper view of all picture. There 2 options available - simple and elegant client-side flow or server-side flow with having an opportunity to connect to all popular social networks: LinkedIn, FB, twitter, GitHub and Google plus