Emberjs 获取 Facebook 好友列表答案

【问题标题】：Emberjs get facebook friendlistEmberjs 获取 Facebook 好友列表
【发布时间】：2015-08-30 04:29:45
【问题描述】：

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

我能够按照本教程 http://www.programwitherik.com/ember-simple-auth-torii-example-application/ 创建 Facebook 登录和注销

出于学习目的，我正在尝试使用 Ember Simple Auth 获取我的 Facebook 好友列表，而 Tori 不确定如何在 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' 因为它违反了以下内容安全策略指令：“connect-src 'self' ws://localhost: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请求时：

{ “错误”：{ "message": "必须使用活动访问令牌来查询当前用户的信息。", “类型”：“OAuthException”， “代码”：2500 }

如何在 Ember 上设置访问令牌？

【问题讨论】：

错误消息意味着您需要使用访问令牌，您可以阅读 facebook 文档中的相关信息。话虽如此，您确定要访问“朋友列表”而不是“朋友”吗？这是两件不同的事情。
我正在尝试获取好友列表。当我通过 facebook 登录我的应用程序时，我得到了一个访问令牌，但我找不到任何关于 Ember Simple Auth 或 Torii 如何访问该令牌并在我的获取请求中使用它的文档。
不过，我很确定您不想获得好友列表，而是要获得朋友。但无论如何，你不应该直接从博客文章开始，从这里开始阅读：developers.facebook.com/docs
我只是为了测试目的而获取 firendlists，但只要我知道如何正确地将数据从 Facebook API 返回到 ember 框架，任何事情都可以工作。

标签： facebook-graph-api ember.js ember-data

【解决方案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>

需要上述技巧才能延迟应用加载，直到加载 facebook 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/

【讨论】：

【解决方案2】：

如果您想在客户端完成所有这些操作，我会使用 Facebook JS API 而不是 Graph API - 对于该用例来说更简单。

【讨论】：

谢谢！ Ember Simple Auth 或 Tori 可能正在使用 JS api。我会查的。我从我的问题中删除了对图形 API 的提及。

【解决方案3】：

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

【讨论】：