在MeteorJS框架内运行facebook身份验证？

Question

我开始了我对Meteor框架世界的小探索,我认为用它做一点点facebooky会很有趣.

第一步是按照meteor中的创建app教程,然后将FB代码添加到模板中,如下所示:https://developers.facebook.com/docs/opengraph/tutorial/#authenticate

可悲的是,它似乎根本不适用于页面.事实上,我刚刚意识到,如果我添加类似于alert('foo');我的流星页面的内容,它就不会执行.有趣.

所以Metor,尽管完全惊人,但并不像我期望的那样......(震惊,恐怖!).

如何在此框架中执行客户端JS？(特别希望在页面上创建一个facebook JS对象？)

谢谢!

更新(2013年1月): Meteor发布了0.5.0,内置了身份验证和facebook登录支持.

文档在这里:http://docs.meteor.com/#accountsui

基本上你在shell中运行一些命令

     meteor add accounts-password
     meteor add accounts-ui
     meteor add accounts-facebook

然后在您的代码中添加登录按钮.

     {{loginButtons}}

然后你就进去了.

Answer 1

从浏览器(流星堆栈中的客户端)传递App ID,秘密等,对外部API进行任何类型的身份验证可能是一个非常糟糕的主意.

我已成功在服务器上实现完整的facebook身份验证.

accounts-facebook通过meteor add accounts-facebook从应用程序的工作目录运行来添加智能包.这样,您就可以为OAuth单用户以及OAuth多用户facebook身份验证工作流配置支持.有关详细信息,请参阅Meteor Accounts System文档.

添加accounts-facebook智能包后,您可以沿着这些方向做点什么......

在您的应用程序的工作目录server/server.js下(或目录下的类似文件server),实现如下所示:

Meteor.startup(function () {
  Accounts.loginServiceConfiguration.remove({
    service: "facebook"
  });

  Accounts.loginServiceConfiguration.insert({
    service: "facebook",
    appId: process.env.FACEBOOK_APP_ID,
    secret: process.env.FACEBOOK_APP_SECRET
  });
});

请注意以下几点:

appId: process.env.FACEBOOK_APP_ID,
secret: process.env.FACEBOOK_APP_SECRET

您将需要设置环境变量FACEBOOK_APP_ID,并FACEBOOK_APP_SECRET妥善上面的代码使用正确的值.

在client/client.js(或目录下的类似文件client)中,实现如下所示:

Meteor.startup(function() {
  Meteor.loginWithFacebook({
    requestPermissions: ['publish_actions']
  }, function (err) {
    if (err) {
      Session.set('errorMessage', err.reason || 'Unknown error');
    }
  });
});

根据Meteor.loginWithExternalService([options],[callback]),回调函数Meteor.loginWithFacebook允许您轻松区分错误状态和非错误状态:

可选回调.在成功时没有参数调用,或者在失败时使用单个Error参数调用.

Answer 2

看来运行客户端代码是通过将其放在"myapp.js"文件中完成的

  Template.hello.greeting = function () {
     // ADD YOUR CODE HERE
     alert('foo');
     return "Welcome to matchmakeur.";
  };

因此,为了将您的代码连接到Facebook身份验证,您必须执行类似的操作

  Template.fbconnect.connect = function () {
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '[YOUR_APP_ID]', // App ID
          status     : true, // check login status
          cookie     : true, // enable cookies to allow the server to access the session
          xfbml      : true  // parse XFBML
        });
      };

      // Load the SDK Asynchronously
      (function(d){
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
      }(document));
     return true;
  };

并有一个模板

   <template name="fbconnect">
        <div id="fb-root"></div>
        {{connect}}
        <fb:login-button show-faces="true" width="200" max-rows="1" scope="publish_actions">
        </fb:login-button>
   <template>