【问题标题】:Getting facebook authentication running within the MeteorJS framework?在 MeteorJS 框架中运行 facebook 身份验证?
【发布时间】:2013-01-09 22:40:52
【问题描述】:

我正在开始我对 Meteor 框架世界的小探索,我认为用它做一些有点 Facebook 的事情会很有趣。

第一步是按照在流星中创建应用程序的教程,然后将 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}}

那么你就进去了。

【问题讨论】:

    标签: facebook client-side meteor


    【解决方案1】:

    对外部 API 进行任何类型的身份验证,同时从浏览器(meteor 堆栈中的客户端)传递 App ID、机密等可能是一个非常的坏主意。 p>

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

    通过从应用程序的工作目录运行meteor add accounts-facebook 添加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_IDFACEBOOK_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 的回调函数可以让您轻松区分错误状态和非错误状态:

    可选回调。调用成功时不带参数,或带 失败时的单个错误参数。

    【讨论】:

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

      【讨论】:

        【解决方案3】:

        如果您想使用 Meteor 构建完整的客户端应用程序,使用 Facebook JavaScript SDK 是一个不错的主意...

        Alex C 的答案乍一看是有效的,但在“导航”并返回到定义 &lt;div id="fb-root"&gt;&lt;/div&gt; 的“页面”之后,我对 FB.logout() 有一些问题,因为当重新渲染 fb-root 时,FB .logout() 停止工作。

        所以我认为加载 Facebook JavaScript SDK 的最佳方式是使用Template created callback

        Template.fbLogin.created = function () {
          if (!Session.get("is Facebook JDK loaded?")) {
            Session.set("is Facebook JDK loaded?", true);
        
            // https://developers.facebook.com/docs/reference/javascript/
            window.fbAsyncInit = function() {
              // init the FB JS SDK
              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
              });
        
              // Additional initialization code such as adding Event Listeners goes here
            };
        
            // Load the SDK's source Asynchronously
            // Note that the debug version is being actively developed and might 
            // contain some type checks that are overly strict. 
            // Please report such bugs using the bugs tool.
            (function(d, debug){
               var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
               if (d.getElementById(id)) {return;}
               js = d.createElement('script'); js.id = id; js.async = true;
               js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
               ref.parentNode.insertBefore(js, ref);
             }(document, /*debug*/ false));
          }
        };
        

        此外,为了使FB.logout() 正常工作,还需要做的另一件事是在&lt;div id="fb-root"&gt;&lt;/div&gt; 周围使用constant template helper。所以你的代码应该是这样的:

        <body>
          {{#constant}}
            <div id="fb-root"></div>
          {{/constant}}
          <!-- rest of body... -->
        

        我还发现有必要把fb-root紧跟在body之后。

        http://evee.meteor.com有一个实时应用程序运行这样的代码
        你可以在这里找到它的源代码:https://github.com/fjsj/evee/ (检查fbLogin.js 以获取createdapp.html 以获取constantfb-root

        奖励(如何使用 Meteor 提供 channel.html 文件)

        截至 2013 年 1 月,Meteor 不支持服务器端路由来提供静态 HTML。那么如何用 Meteor 制作channel.html 呢?将其放入 /public 将不起作用,因为 .html 文件由 Meteor 处理为模板。

        通过使用 Meteor 内部,这是可能的!正如this answer 所建议的,我们需要使用类似中间件的方法(由Connect 提供支持)。只需将其放在您的 /server 上(注意它将在 yourapp.meteor.com/fb/channel.html 上提供):

        // serve channel.html file
        var connect = __meteor_bootstrap__.require("connect");
        
        __meteor_bootstrap__.app
          .use(connect.query())
          .use(function(req, res, next) {
            // Need to create a Fiber since we're using synchronous http
            // calls and nothing else is wrapping this in a fiber
            // automatically
            Fiber(function () {
              if (req.url === "/fb/channel.html") {
                res.writeHead(200, {'Content-Type': 'text/html'});
                res.end('<script src="//connect.facebook.net/en_US/all.js"></script>');
              } else {
                // not an channel.html request. pass to next middleware.
                next();
                return;
              }
            }).run();
          });
        

        这也适用于生产和code is available at GitHub(包括缓存标头)。

        【讨论】:

        • 很好的答案!在这一点上应该注意的是,最新版本的 Meteor 已经解决了开箱即用的用户帐户问题。 meteor.com/blog/2012/10/17/…我还没有机会玩它,但它现在肯定很容易处理。
        • 谢谢!是的,accounts-ui 和 accounts-facebook 包很容易解决身份验证问题,但是 Facebook JavaScript SDK 有一些有用的功能,比如自动登录已经授权您的应用程序的用户。当然,如果这是您想要的,则无需涉及服务器端。
        【解决方案4】:

        您还可以在任何选择器上实现模板事件,然后实现您的 FB javascript 代码。例如,可以通过使用旧的已弃用的 FB 共享图像之一,将选择器绑定到模板事件,然后使用 FB.ui 对话框发布到用户墙和共享来重新创建已禁用的 Facebook 共享按钮来自您网站的内容。我今天测试了它,它可以工作。如果你真的想定制一些体验,我想你可以对登录做类似的事情。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2018-02-24
          • 1970-01-01
          • 2013-06-29
          • 2017-09-26
          • 2017-11-02
          • 1970-01-01
          • 2012-06-11
          相关资源
          最近更新 更多