Meta Business拡張機能

ビジネスアプリの認証


ビジネスアプリはFacebookのさまざまな面で利用可能であり、小規模ビジネスがサードパーティのさまざまなビジネスアプリを見つけて接続し、成長とビジネス目標の達成を実現するために技術コストを低く抑えつつビジネスツールを容易に設定することができるようにするものです。


ビジネスログインとは異なり、ビジネスアプリフローはFacebook側から起動されるため、ポップアップブラウザーによりユーザーが該当プラットフォームにログインして認証を受け、接続するビジネス(定義したexternal_business_idにより指定される)を選択することが必要な追加の手順があります。認証が成功すると、ユーザーは、オンボーディングを完了させるためのフローに再び戻ります。

Facebookのビジネスアプリ側にアプリが表示されるようにするには、認証URL、Webhookエンドポイントを構築し、開発者パネルによりそれらの設定と検証を行う必要があります。

どのアプリについても、統合レビューの申請をする必要があります。FBE連携が承認されると、一般ユーザーがアプリを使用できるようになります。

注: 認証には、ビジネスアプリの代わりにビジネスログインを代替手段として使用できます。ビジネスログインの使用方法についてのドキュメントをご覧ください。

認証URLの実装

ビジネスアプリは、Facebookページ、Instagram、Facebook Business Suiteからのビジネスログインに類似したフローを開始します。このフローを有効にしアプリが掲載されるようにするには、ユーザーが自分のビジネスを選択した後、Facebook、Instagram、Facebook Business Suiteのフローにリダイレクトで戻れるようにするカスタム認証UIをサイト上に用意する必要があります。

処理の概要

  1. あなたのプラットフォームの認証フローを読み込むカスタムURLエンドポイント(認証URL)を提供します。
    • 使用する認証URLは、ユーザー(ビジネスオーナー)を該当プラットフォームのログインフローに導くものでなければなりません。
    • 自分のプラットフォーム上で新しいアカウントを登録するオプション(「登録」)を提供します。登録後、ユーザーをFacebookに戻して、各自のアカウントのリンクを完了させる必要があります。
    • プラットフォーム上で1つのアカウントで複数のビジネスをサポートする場合、認証URLでは、ログイン成功後にユーザーが該当プラットフォーム上のどのビジネスを各自のFacebookアセットに関連付けるか選択するUIを表示するようにしてください。
    例 — 認証URL 
    https://yourwebsite.com/fbe-auth
  2. Facebookは用意された認証URLをオンボーディングフロー中に読み込み、redirect_uriクエリパラメーターを末尾に付加します(これは、リダイレクトURIであり、追加のクエリパラメーターが含まれる場合もあります)。 
    https://yourwebsite.com/fbe-auth?redirect_uri=<an_encoded_redirect_uri_with_query_params>
    例 — redirect_uriクエリパラメーターで付加する、エンコード済みリダイレクトURI。 
    https://www.facebook.com/local/dev/transaction_tool_selector/redirect?app_id=<int_value>&app_name=<string_value>&page_id=<int_value>
    このステップの最後に、Facebookはエンコード済みredirect_uriクエリパラメーターが付加された認証URLを読み込みます。それは次のようなものになります。 
    https://yourwebsite.com/fbe-auth?redirect_uri=https%3A%2F%2Fwww.facebook.com%2Flocal%2Fdev%2Ftransaction_tool_selector%2Fredirect%3Fapp_id%3D123%26app_name%3DSample%26page_id%3D456

    重要な注意点: ユーザーデータを他者とシェアすることがないようにするため、リダイレクト先のredirect_uriは、次の正規表現に一致するもののみとしてください。

    https?:\/\/(www\.|m\.|l\.|web\.|business\.)?(\d{4,5}\.od\.)?(business\.)?(facebook|instagram|whatsapp)\.com(\/.*)?
  3. ユーザーがログイン/登録を完了し、(該当する場合に)プラットフォーム上のビジネスを選択したら、business_configとsetupの定義が含まれているエンコード済みのextrasオブジェクトを(ビジネスログインの場合と同じく)クエリパラメーターとしてredirect_uriに付加した後、それに基づくURLにリダイレクトします(実装するオンボーディング設定に応じて異なります)。 
    https://www.facebook.com/local/dev/transaction_tool_selector/redirect?app_id=<int_value>&app_name=<string_value>&page_id=<int_value>&extras=<an_encoded_json_string>

注: 認証URLでプラットフォーム上に新しいアカウントを作成するオプションを提供する際には、UIレンダリングが 1)モバイル対応のものやレスポンスの良いものであること、2)パートナーの登録フローのレンダリングに十分な高さ/幅(提案されている最小寸法: 600px×600px)で表示されることを確認してください。

iframeの認証

ビジネスアプリ内でのユーザーエクスペリエンスをさらにシームレスなものにし、プラットフォームでの新規アカウント作成をより良くサポートするため、Facebookのサーフェスにおいてiframeでの認証URLの読み込みを有効にしてください。iframeのドキュメントに含まれている実装のガイドラインと投稿メッセージの仕様をご覧ください。

Webhookの実装

Webhooksを使用することにより、Facebookソーシャルグラフ中の特定のオブジェクトに加えられた変更のHTTP通知をリアルタイムで受け取ることができます。FBEの場合これは、該当アプリ(ビジネスアプリなど)を使用してユーザーがFBEをインストールしたりアンインストールしたりすると、Webhooks経由でそのアクションの詳細情報を受け取ることを意味します。

Facebookからのリクエストを処理できる安全なサーバー上にエンドポイントをビルドしてください。これは、ビジネスアプリ上でアプリを利用可能にするすべてのプラットフォームパートナーにとって必須です。このエンドポイントの詳細なビルド方法については、Webhook実装ガイドをご覧ください。

Webhookの設定と検証

Webhookエンドポイントの準備ができたら、その設定と検証のために次のことが必要です。

  1. アプリダッシュボードの[Facebook Business Extension] -> [設定]セクションにあるWebhooksカードを使ってエンドポイントを認証し、fbe_install Webhookをサブスクリプション登録します。詳しくは、Webhook実装ガイドをご覧ください。
  2. Webhooks製品が正しく設定されたら、カードの右上の丸は緑色になり目盛りアイコンが表示されるはずです。

開発者パネルによる設定と検証

Facebook Business Extension開発者パネルは、開発者アプリダッシュボード内の製品です。アプリにFBE機能が付与されたら、開発者パネルを使用して、該当の認証URLとWebhookエンドポイントの設定および検証を行い、該当アプリがビジネスに何を提供するのかについての詳細情報を追加してください。

認証URLの設定と検証

認証URLの準備ができたら、その設定と検証のために次のことが必要です:

  1. アプリのダッシュボードで、FBE開発者パネルに移動します。注: まだそれを構成していない場合、こちらに示されている手順を実行してそれを追加してください。
  2. [設定]タブをクリックし、ビジネスアプリ画面のカードを見つけます。
  3. [ビジネスアプリの画面にアプリを表示する]チェックボックスにチェックマークを付けます。
  4. [認証URL]の入力欄に、認証URLを入力します。
  5. [認証のテスト]ボタンをクリックします。
    • ポップアップウィンドウが表示されてURLが読み込まれ、Facebookがそれをビジネスアプリの画面で使用する様子が模倣されます。
    • ログインとビジネス選択(該当する場合)の処理を実行します。
    • リダイレクトの後、ポップアップウィンドウは閉じられます。実装にエラーがある場合(extrasに無効な値があるなど)、このカードの下部に表示されるので、何を修正する必要があるか分かります。認証テスト機能で検証されるのはredirect_uriへの入力だけであり、実際にFBEがインストールされるわけではありません。
  6. 実装手順とextrasの設定が想定通りに実装されたら、この手順に有効のマークが付きます(カードの右上に緑のチェック)。これで、Facebookから直接このオンボーディングフロー(FBEのインストール)のエンドツーエンドテストを実行する機能が有効になりすます(下記のセクションを参照)。

エンドツーエンドテスト

開発者パネル上で認証URLとWebhookエンドポイントが正常に設定されて検証されたら、アプリをライブにする前に、アプリを利用してオンボーディングフローのエンドツーエンドテストを実施できます。これは、次のようにしてFacebook Business SuiteまたはFacebookページから直接行えます。

Facebook Business Suite経由

  1. Facebook Business Suiteに移動します。
  2. 左側のレールで、[その他のツール]をクリックした後、[ビジネスアプリ]をクリックします。
  3. 利用可能なすべてのアプリのリストが表示されます。該当アプリは、開発者パネルの[設定]タブで、[バーティカル]として選択したカテゴリの下に表示されます。
  4. そのアプリには[テストのみ - 非公開]のラベルが付けられています。これは、該当アプリで役割を与えられているユーザーがテスト目的でのみ利用可能であり、一般ユーザーは利用できないことを意味します。
  5. [接続]をクリックし、認証URLを利用してエクスペリエンスのテストを開始します。
    • オンボーディングフローにより実際にFBEのインストールが実行され、Webhook通知が発行されます。

Facebookページサーフェス経由

  1. 管理者としてのアクセス許可が付与されているFacebookページに移動します。
  2. Facebookページの左側で、[ビジネスアプリ]をクリックします。
  3. 利用可能なすべてのアプリのリストが表示されます。該当アプリは、開発者パネルの[設定]タブで、[バーティカル]として選択したカテゴリの下に表示されます。
  4. そのアプリには[テストのみ - 非公開]のラベルが付けられています。これは、該当アプリで役割を与えられているユーザーがテスト目的でのみ利用可能であり、一般ユーザーは利用できないことを意味します。
  5. [接続]をクリックし、認証URLを利用してエクスペリエンスのテストを開始します。
    • オンボーディングフローにより実際にFBEのインストールが実行され、Webhook通知が発行されます。

詳しくはこちら