10

Google Chrome 拡張機能を構築しようとしています。ユース ケースでは、ユーザーが Facebook でログインし、Facebook ウォールへの投稿を介して共有できる必要があります。

正しいアプリケーション フローは次のようになります。

  1. ユーザーが Google Chrome 拡張機能をクリック - 召喚拡張機能ページ
  2. ユーザーが拡張機能ページ (または新しいタブ) で [Facebook でログイン] をクリックすると、Facebook からの [アプリの承認] が表示されます。
  3. ユーザーがアプリを承認する
  4. ユーザーは、必要なすべてのユーザー情報をインストールして処理してくれたことに感謝する新しいページに誘導されるか、ユーザーは Google Chrome 拡張機能に戻されます (より良い方法)。
  5. ユーザーが Google Chrome 拡張機能に戻されない場合は、そうするように指示する必要がありますが、この時点で Google Chrome 拡張機能にデータを取得する方法は?
  6. ユーザーが Google Chrome 拡張機能を開くと、「Login with Facebook」の代わりに「Hi John」などのメッセージが表示されるはずです。
  7. ユーザーは Facebook に投稿できません

私の主な障害は、Facebook でログインして、データを拡張機能に戻すことです。

私はFacebookアプリを作成し、アプリに固有のコーディングのほとんどを行いました。アプリをjavascriptだけにしようとしています（ただし、他に方法がない場合はphpに追加できます）、標準のFacebook javascriptを使用してみました。 Facebookのデスクトップクライアントを使ってみました。

以前に Google Chrome 拡張機能と Facebook ログインを接続するこのプロセスを経験した人はいますか?

最後に、このプロジェクトでは Parse を使用しようとしています。

私が達成しようとしていることの良い例は、Any.do https://chrome.google.com/webstore/search/any.do?utm_source=chrome-ntp-iconに似ています

4

3 に答える 3

21

私は最近この種の問題を抱えていました;）。少し複雑ですが、最も簡単な方法で説明しようと思います。

拡張機能（おそらくオプションページ）のどこかに、次の場所にリダイレクトされる「Facebookでログイン」リンクを配置します。https://www.facebook.com/dialog/oauth?client_id=<APP_ID>&response_type=token&scope=<PERMISSIONS>&redirect_uri=http://www.facebook.com/connect/login_success.html

誰かがこのリンクをクリックすると、許可などを与えるように求められます（Facebookページ）。誰かが同意する場合は、ページが読み込まれます：http://www.facebook.com/connect/login_success.htmlパラメータaccess_tokenとexpires_inアドレス。

これで、バックグラウンドページに次のようなスクリプトが含まれるはずです。

var successURL = 'www.facebook.com/connect/login_success.html';

function onFacebookLogin(){
  if (!localStorage.getItem('accessToken')) {
    chrome.tabs.query({}, function(tabs) { // get all tabs from every window
      for (var i = 0; i < tabs.length; i++) {
        if (tabs[i].url.indexOf(successURL) !== -1) {
          // below you get string like this: access_token=...&expires_in=...
          var params = tabs[i].url.split('#')[1];

          // in my extension I have used mootools method: parseQueryString. The following code is just an example ;)
          var accessToken = params.split('&')[0];
          accessToken = accessToken.split('=')[1];

          localStorage.setItem('accessToken', accessToken);
          chrome.tabs.remove(tabs[i].id);
        }
      }
    });
  }
}

chrome.tabs.onUpdated.addListener(onFacebookLogin);

そして、これはあなたがフェイスブックからアクセストークンを取得する方法です。これで、 https：//graph.facebook.comにリクエストを送信できます。

私が助けてくれたことを願っています;）

于 2012-09-21T22:02:28.907 に答える
2

あなたの質問に答えるには（コメントするのに十分なクレジットがありません）.

Facebook 開発者設定で、上部の詳細タブをクリックし、「クライアント OAuth ログイン」と「組み込みブラウザー OAuth ログイン」の両方が「はい」に移動していることを確認してから、「http://www.facebook. com/ " を有効な OAuth リダイレクト URI に

于 2015-05-19T17:43:30.617 に答える