ember.js - Emberjs get facebook friendlist -
i'm using emberjs, ember simple auth, , torii (for facebook-oauth2 provider).
i able create facebook login , logout following tutorial http://www.programwitherik.com/ember-simple-auth-torii-example-application/
for learning purposes, i'm trying facebook friendlist using ember simple auth , tori not sure how set request in emberjs. couldn't find guidance online..
first created custom rest adapter:
// adapters/friendlists.js import ds 'ember-data'; export default ds.restadapter.extend({ namespace: 'v2.3/me', host: 'https://graph.facebook.com', headers: { "apikey": '193080234948021' //api key manually added. how can api key ember simple auth/torii session? } });
next model:
// models/friendlists.js import ds 'ember-data'; export default ds.model.extend({ name: ds.attr(), list_type: ds.attr() });
...and route:
// routes/friendlists.js import ember 'ember'; import authenticatedroutemixin 'simple-auth/mixins/authenticated-route-mixin'; export default ember.route.extend(authenticatedroutemixin, { model: function(params) { return this.store.find('friendlists'); } });
when go http://localhost:4200/friendlists
following in console:
[report only] refused connect 'https://graph.facebook.com/v2.3/me/friendlists' because violates following content security policy directive: "connect-src 'self' ws://localhost:35729 ws://0.0.0.0:35729 http://0.0.0.0:4200/csp-report".
xmlhttprequest cannot load https://graph.facebook.com/v2.3/me/friendlists. invalid http status code 400
when visiting http request:
{ "error": { "message": "an active access token must used query information current user.", "type": "oauthexception", "code": 2500 }
how can set access token on ember?
you can use facebook js api in following manner:
// app/initializers/facebook.js export function initialize(container, app) { app.deferreadiness(); window.__facebook.then(function() { app.advancereadiness(); }); } export default { name: 'facebook', initialize: initialize };
in index.html:
<script> (function(w) { var dfd = ember.rsvp.defer(); w.__facebook = dfd.promise; w.fbasyncinit = function() { fb.init({ appid : 'your-app-id', xfbml : true, version : 'v2.3' }); define('fb', [], function() {return fb}); dfd.resolve(fb); }; })(window); (function(d, s, id){ var js, fjs = d.getelementsbytagname(s)[0]; if (d.getelementbyid(id)) {return;} js = d.createelement(s); js.id = id; js.src = "//connect.facebook.net/en_us/sdk.js"; fjs.parentnode.insertbefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>
the trick above needed in order delay app loading until facebook api loaded.
// adapters/facebook.js (helper function wraps fb api promise) import ember 'ember'; export default function performmethod(path, method, params) { method = method || 'get'; return new ember.rsvp.promise(function(resolve, reject) { fb.api(path, method, params, function(response) { if (!response || response.error) { reject(response && response.error); } else { resolve(response); } }); }); }
// adapters/friend.js import performmethod './facebook'; import ds 'ember-data'; export default ds.adapter.extend({ findrecord: function() {}, createrecord: function() {}, updaterecord: function() {}, deleterecord: function() {}, findall: function() { return performmethod('me', 'get', {fields: 'friends'}).then(function(res) { return res.friends && res.friends.data; }); }, query: function() {} });
// models/friend.js import ds 'ember-data'; export default ds.model.extend({ });
then use it:
// routes/friends.js import ember 'ember'; import authenticatedroutemixin 'simple-auth/mixins/authenticated-route-mixin'; export default ember.route.extend(authenticatedroutemixin, { model: function() { return this.store.findall('friend'); } });
update (28/07/2015): there's addon recommend using: https://github.com/pitchtarget/ember-cli-facebook-js-sdk/
Comments
Post a Comment