ビジネスログイン認証

ビジネスログイン(Facebookログインと一般に呼ばれる)は、ビジネスオーナーが、あなたのサイトに配置したボタンを使用することにより、あなたのプラットフォーム上の自分のビジネスを自分のFacebookプロフィールまたはInstagramプロフィールに接続するためのエントリーポイントです。

ビジネスログインは、あなたのプラットフォーム上で(通常はあなたのサイトの内部管理パネル内で)動作し、ビジネスログインフローを起動します。ビジネスオーナーは、このフローを使用して自分のFacebookプロフィールをあなたのサイト上の自分のビジネスプレゼンスに関連付け、それによりFacebook Business Extension (FBE)機能を有効にできます。

FBEインストール中に、パートナーとクライアントビジネスをつなぐビジネス代理ソリューション(OBO)が作成されます。それによりパートナーは、クライアントビジネスマネージャ管理者の認証情報(現在の方式)とは別の、パートナービジネスマネージャ管理システムユーザーの認証情報を使用することによりFBEシステムユーザーアクセストークンを取得できます。

要件

アプリについてアプリレビューを完了して、次のアクセス許可を取得する必要がある場合があります。

• catalog_management — アプリがカタログ機能を有効にする場合のみ。または、クライアントに代わって販売者広告を管理する場合は、ads_managementアクセス許可をリクエストできます。
• business_creative_management - アプリがdraper APIを利用しているクリエイティブアプリの場合。

ログインフローの設定

ログインフローを設定するには、以下のオプションを確認してください:

• URLを通じてビジネスログインを読み込む — FacebookのJavaScript SDKを使用しない場合に推奨。このオプションでは、サイト上のボタンから、ビジネスごとに動的生成されるURLにリンクすることが必要です。

• Facebook SDKを通じてビジネスログインを読み込む — Facebook SDKには、一般的なクライアントサイドの機能が用意されています。詳しい情報に通じた開発者には、このオプションがおすすめです。同じフローを起動するためのアプローチとしては、このほうが標準化の度合いが高いからです。

URLを通じてビジネスログインを読み込む

URLを通じてビジネスログインをトリガーするには、URLを開くボタンをサイト上に配置します。

ビジネスログインURLには、次のクエリパラメーターが必要です:

ダイナミックリダイレクトURIが必要なアプリでは、ビジネスログインフロー完了後、ステートパラメーターを使用して、リダイレクトURIに動的情報を戻します。

下記の例では、extrasクエリパラメーターが適切にフォーマットされており、business_configオブジェクトとsetupオブジェクトの両方が指定されています。

サンプルURL

https://facebook.com/dialog/oauth?
client_id=<FB_APP_ID>
&display=page
&redirect_uri="https://partner-site.com/redirectlanding"
&response_type=token
&scope=manage_business_extension
//   alternatively use catalog_management or ads_management
//   &scope=manage_business_extension,catalog_management,ads_management
&extras={
  "setup": {
    "external_business_id": "foo-123",
    "timezone": "America/Los_Angeles",
    "currency": "USD",
    "business_vertical": "APPOINTMENTS"
  },
  "business_config": {
    "business": {
      "name": "Foo Business"
    },
    "page_cta": {
      "enabled": true,
      "cta_button_text": "Book Now",
      "cta_button_url": "https://partner-site.com/foo-business",
      "below_button_text": "Powered by FBE Partner"
    },
    "page_card": {
      "enabled": true,
      "see_all_text": "See All",
      "see_all_url": "https://partner-site.com/foo-business",
      "cta_button_text": "Book"
    },
    "ig_cta": {
      "enabled": true,
      "cta_button_text": "Book Now",
      "cta_button_url": "https://partner-site.com/foo-business"
    },
    "messenger_menu": {
      "enabled": true,
      "cta_button_text": "Book Now",
      "cta_button_url": "https://partner-site.com/foo-business"
    },
    "thread_intent": {
      "enabled": true,
      "cta_button_url": "https://partner-site.com/foo-business"
    }
  },
  "repeat": false
}

Facebook SDKを通じてビジネスログインを読み込む

ステップ1. Facebook JavaScript SDKを読み込む

このSDKをダウンロードして自分プラットフォーム上でホストするか、FacebookがホストするSDKをプルダウンできます。FacebookがホストするSDKを使用することをおすすめします。

ステップ2. fbAsyncInit関数をWindowオブジェクトに添付して、SDK設定をセットアップします。

javascript SDKを読み込む前に、fbAsyncInit関数がwindowオブジェクト上に存在していることが必要です。SDKによりその関数が呼び出されて、window.fbAsyncInit()への適切な呼び出しが設定されます。

このセットアップには以下が含まれます:

• appId:FacebookアプリID。
• cookie:サーバーがこのセッションにアクセスするためのCookieを有効にします。
• xfbml:このページ上のソーシャルプラグインをParseします。
• version:グラフAPIのどのバージョンを使用するかをSDKに伝えます(本ドキュメント執筆時点ではv10.0が最新リリース)

JavaScript SDKを読み込む前に、fbAsyncInitをwindowオブジェクトに添付します。

ステップ3. FB.login()関数(「ビジネスログイン」とも呼ばれる)を通じてFBEを起動します。

SDKを読み込んで適切な情報を使用して初期化した後、SDKを使用してFB.login()を読み込みます。以下は、FB.login()関数に渡す重要なパラメーターです:

1. 応答コールバック関数
2. scopeフィールドとextrasフィールドのためのオブジェクト

詳しくは、「Facebook Business Extension APIのオブジェクトと型」をご覧ください。

例:

<script>
    window.fbAsyncInit = function() {
    //2. FB JavaScript SDK configuration and setup
        FB.init({
            appId      : '<app_id>', // FB App ID
            cookie     : true,  // enable cookies to allow the server to access the session
            xfbml      : true,  // parse social plugins on this page
            version    : 'v4.0' // uses graph api version v4.0
        });
    };

    //1. Load the JavaScript SDK asynchronously
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

     //3. Facebook login with JavaScript SDK
    function launchFBE() {
        FB.login(function (response) {
            if (response.authResponse) {
                // returns a User Access Token with scopes requested
                const accessToken = response.authResponse.accessToken;
                const message = {
                    'success':true,
                    'access_token':accessToken,
                };
                // store access token for later  
            } else {
              console.log('User cancelled login or did not fully authorize.');
            }
        }, {
            scope: 'catalog_management,manage_business_extension',
          // refer to the extras object table for details
            extras: {
                "setup":{
                  "external_business_id":"<external_business_id>",
                  "timezone":"America\/Los_Angeles",
                  "currency":"USD",
                  "business_vertical":"ECOMMERCE"
                },
                "business_config":{
                  "business":{
                     "name":"<business_name>"
                  },
                  "ig_cta": {
                    "enabled": true,
                    "cta_button_text": "Book Now",
                    "cta_button_url": "https://partner-site.com/foo-business"
                  }
                },
                "repeat":false
            }
        });
    }
</script>

ステップ4. FBEを起動するためのボタンまたはリンクを作成します。

画面を読み込むため、ボタンを追加するか、launchFBE()を呼び出すonClick関数をリンクします:

<button onclick="launchFBE()"> Launch FBE Workflow </button>

携帯電話

モバイルFBEの実装については、モバイルドキュメントをご覧ください。

詳しくはこちら

• ビジネスアプリ統合を実行する方法
• Facebookログインについて詳細をご確認ください
• FBE APIのオブジェクトと型を表示する
• アプリレビューとアクセス許可についての詳細をご確認ください
• FBEをアンインストールする方法