Question

我正在使用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请求时：

{“error”：{ “message”：“必须使用活动访问令牌来查询有关当前用户的信息。”， “type”：“OAuthException”， “code”：2500}

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

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>

需要上面的技巧才能延迟应用加载，直到加载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');
  }
});

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

Answer 2

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

Answer 3

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

Emberjs获得facebook好友列表

3 个答案: