Emberjs获取Facebook好友名单

Question

我使用Emberjs，Ember Simple Auth和Torii（用于facebook-oauth2提供程序）。

我能够创建一个Facebook登录和注销下面这个教程http://www.programwitherik.com/ember-simple-auth-torii-example-application/

为了便于学习，我试图让使用简单的灰烬和验证东篱不知道如何设置请求我的Facebook好友列表在Emberjs。我找不到任何指导在线..

首先，我创建了一个自定义的REST接口：

// adapters/friendlists.js 

import DS from 'ember-data'; 

export default DS.RESTAdapter.extend({ 
    namespace: 'v2.3/me', 
    host: 'https://graph.facebook.com', 
    headers: { 
    "apiKey": '193080234948021' //api key is manually added. How can I get the api key from Ember Simple Auth/Torii session? 
    } 
}); 

下一页型号：

// models/friendlists.js 

import DS from 'ember-data'; 

export default DS.Model.extend({ 
    name: DS.attr(), 
    list_type: DS.attr() 
}); 

...和路线：

// routes/friendlists.js 

import Ember from 'ember'; 

import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin'; 

export default Ember.Route.extend(AuthenticatedRouteMixin, { 
    model: function(params) { 
    return this.store.find('friendlists'); 
    } 
}); 

当我去http://localhost:4200/friendlists我在控制台中得到以下内容：

[仅限报告]拒绝连接到 'https://graph.facebook.com/v2.3/me/friendlists'，因为它违反 以下内容安全政策指令：“连接-src的 '自我' WS：//本地主机：35729个WS：//0.0.0.0 ：35729 http://0.0.0.0:4200/csp-report“。

XMLHttpRequest无法加载 https://graph.facebook.com/v2.3/me/friendlists。无效的HTTP状态 代码400

当访问HTTP请求：

{“错误”：{ “消息”：“一种主动访问令牌必须用于查询有关当前用户的信息“， ”类型“： ”OAuthException“， ”代码“：2500}

如何设置一个访问令牌上的灰烬？

Answer 1

可以使用Facebook JS API以下列方式：

// app/initializers/facebook.js 
export function initialize(container, app) { 
    app.deferReadiness(); 
    window.__facebook.then(function() { 
    app.advanceReadiness(); 
    }); 
} 

export default { 
    name: 'facebook', 
    initialize: initialize 
}; 

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> 
 

诀窍以上是必要的，以延迟该应用加载，直到实API已加载。

 

// adapters/facebook.js (helper function which wraps FB api with a promise) 
import Ember from '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 from './facebook'; 
import DS from '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 from 'ember-data'; 

export default DS.Model.extend({ 
}); 
 

然后你使用它：

 

// routes/friends.js 
import Ember from 'ember'; 
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin'; 

export default Ember.Route.extend(AuthenticatedRouteMixin, { 
    model: function() { 
    return this.store.findAll('friend'); 
    } 
}); 
 

更新（28/07/2015）：有一个插件，我建议使用： https://github.com/pitchtarget/ember-cli-facebook-js-sdk/

Answer 2

如果你想在客户端做所有的事情，我会使用Facebook JS API而不是Graph API--对于那个用例来说简单得多。

Answer 3

您可以在url中传递?access_token={user_access_token}，其中{user_access_token}是有效的用户访问令牌。