9

私はMeteorフレームワークの世界への小さな探求を始めています.Meteorフレームワークで何かFacebookのようなことをするのは楽しいだろうと思いました.

ステップ 1 は、流星でアプリを作成するためのチュートリアルに従い、次の場所にあるテンプレートに FB コードを追加することでした: https://developers.facebook.com/docs/opengraph/tutorial/#authenticate

残念ながら、このページではまったく機能していないようです。alert('foo');実際、流星のページに次のようなものを追加すると、実行されないことに気付きました。面白い。

Metor は、完全に素晴らしいにもかかわらず、期待どおりに動作しません... (ショック、ホラー!)。

このフレームワークでクライアント側の JS を実行するにはどうすればよいですか? (特に、ページに facebook JS オブジェクトを作成することを期待して?)

ありがとう!

更新 (2013 年 1 月): Meteor は、認証と Facebook ログインのサポートを組み込んだ 0.5.0 をリリースしました。

ドキュメントはこちら: http://docs.meteor.com/#accountsui

基本的に、シェルでいくつかのコマンドを実行します

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

次に、コードにログイン ボタンを追加します。

     {{loginButtons}}

それからあなたは入っています。

4

4 に答える 4

8

ブラウザー (meteor スタック内のクライアント) からアプリ ID、シークレットなどを渡しながら、外部 API に対して何らかの認証を行うことは、おそらく非常に悪い考えです。

サーバーに完全な Facebook 認証を正常に実装しました。

アプリケーションの作業ディレクトリからaccounts-facebook実行して、スマート パッケージを追加します。meteor add accounts-facebookこれにより、OAuth シングル ユーザーと OAuth マルチユーザー facebook 認証ワークフローの両方のサポートを構成できるようになります。詳細については、 Meteor アカウント システムのドキュメントを参照してください。

smart パッケージを追加した後、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 引数で呼び出されます。

于 2012-12-27T06:20:55.100 に答える
2

Meteorを使用して完全なクライアントサイドアプリを構築する場合は、FacebookJavaScriptSDKを使用することは悪い考えではありません...

Alex Cの回答は一見機能しますが、「ナビゲート」して定義されFB.logout()た「ページ」に戻ると、再レンダリングされるとFB.logout()が機能しなくなるため、問題が発生しました。<div id="fb-root"></div>fb-root

したがって、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.jsを確認してください) 。 html for and )createdconstantfb-root

ボーナス(Meteorでchannel.htmlファイルを提供する方法)

2013年1月の時点で、Meteorは静的HTMLを提供するサーバー側ルートをサポートしていません。では、Meteorでchannel.htmlを作成する方法は?.htmlファイルはMeteorによってテンプレートとして処理されるため、/publicに配置しても機能しません。

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

また、任意のセレクターにTemplateイベントを実装してから、FBjavascriptコードを実装することもできます。たとえば、無効になっているFacebook共有ボタンを再作成するには、廃止された古いFB共有画像の1つを使用し、セレクターをテンプレートイベントにバインドしてから、FB.uiダイアログを使用してユーザーのウォールに投稿して共有します。あなたのサイトのコンテンツ。私は今日それをテストしました、そしてそれは働きます。エクスペリエンスを本当にカスタマイズしたい場合は、ログインで同様のことができると思います。

于 2012-05-07T03:01:31.760 に答える