9

我正在开始我对 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}}

那你进去了。

4

4 回答 4

8

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

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

通过从应用程序的工作目录运行来添加accounts-facebook智能包。meteor add accounts-facebook这将允许您配置对 OAuth 单用户以及 OAuth 多用户 facebook 身份验证工作流的支持。有关更多信息,请参阅Meteor 帐户系统文档。

添加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允许您轻松区分错误状态和非错误状态:

可选回调。调用成功时不带参数,或失败时使用单个 Error 参数。

于 2012-12-27T06:20:55.100 回答
6

运行客户端代码似乎是通过将其放在“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>
于 2012-05-05T18:40:45.390 回答
2

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

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

所以我认为加载 Facebook JavaScript SDK 的最佳方法是使用模板创建的回调

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()此外,要正常工作还需要做的另一件事是在<div id="fb-root"></div>. 所以你的代码应该是这样的:

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

我还发现有必要fb-root在身体后立即放置。

http://evee.meteor.com有一个像这样运行代码的实时应用程序,
你可以在这里找到它的源代码:https ://github.com/fjsj/evee/ (检查fbLogin.jsapp. html和) _createdconstantfb-root

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

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

通过使用 Meteor 内部,这是可能的!正如这个答案所建议的,我们需要使用类似中间件的方法(由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();
  });

这也在生产中工作,代码可在 GitHub 上获得(包括缓存头)。

于 2013-01-09T05:37:54.833 回答
1

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

于 2012-05-07T03:01:31.760 回答