Facebook にボットを接続する

ボットは Facebook Messenger と Facebook Workplace の両方に接続できるため、両方のプラットフォームのユーザーと通信できます。 次の手順は、bot をこれら2つのチャネルに接続する方法を示しています。

Bot を Facebook に接続するには、次のいずれかの方法を選択します。

注意

Facebook の UI は、使用しているバージョンによって多少異なる場合があります。

Facebook Messenger にボットを接続する

Facebook Messenger 向けの開発の詳細については、Messenger プラットフォームのドキュメントを参照してください。 Facebook のプレリリースのガイドラインクイック スタート、および設定ガイドを参照してください。

Facebook Messenger を使用して通信するようにボットを構成するには、Facebook ページで Facebook Messenger を有効にしてから、ボットを接続します。

ページ ID をコピーする

ボットは Facebook ページからアクセスします。

  1. 新しい Facebook ページを作成するか、既存のページに移動します。

  2. Facebook ページの [About](概要) ページを開き、 [Page ID](ページ ID) をコピーして保存します。

Facebook アプリを作成する

  1. ブラウザーで、[Create a new Facebook App](新しい Facebook アプリの作成) に移動します。

  2. アプリの名前を入力し、[ 新しい Facebook アプリ ID の作成] を選択します。

    アプリを作成する

  3. 表示されたダイアログボックスで、電子メールアドレスを入力し、[ アプリ ID の作成] を選択します。

    アプリ ID を作成する

  4. ウィザードの手順を実行します。

  5. 必要なチェック情報を入力し、右上の [ Skip クイックスタート ] を選択します。

  6. 次に表示されるウィンドウの左ペインで、[設定 を展開し、[基本] を選択します。

  7. 右側のウィンドウで、 [アプリ ID] および [アプリ シークレット] をコピーして保存します。

    アプリ ID とアプリ シークレットをコピー

  8. 左側のウィンドウの [設定] で、[詳細設定] を選択します。

  9. 右側のウィンドウで、[ API アクセスをアプリに許可する設定] スライダーを [はい] に切り替えます。

    アプリ設定への API アクセスを許可する

  10. 右下のページで、[ 変更の保存] を選択します。

Messenger を有効にする

  1. 左側のウィンドウで、[ ダッシュボード] を選択します。

  2. 右側のウィンドウで、[ Messenger ] ボックスまで下にスクロールし、 [セットアップ] を選択し ます。 Messenger のエントリは、左側のウィンドウの [PRODUCTS](製品) セクションに表示されます。

    Messenger を有効にする

ページを追加してトークンを生成する

  1. 左側のウィンドウの Messenger のエントリで、[設定] を選択します。

  2. 右側のウィンドウで、[ アクセストークン ] まで下にスクロールし、[ ページの追加と削除] を選択します。

    ページを追加または削除するためのインターフェイス

  3. 次のウィンドウに表示される一覧から、アプリで使用するページを選択します。

  4. [Done] を選択します。

  5. このページのトークンを生成するには、[ トークンの生成] を選択します。

Webhook を有効にする

ボットから Facebook Messenger にメッセージやその他のイベントを送信するには、Webhook 統合を有効にする必要があります。 Facebook 設定の手順は保留のままにしておきます。 これらは後で更新します。

  1. ブラウザーで新しいウィンドウを開き、Azure portal に移動します。

  2. リソースの一覧で、bot リソースの登録を選択し、関連するブレードで [ チャネル] を選択します。

  3. 右側のウィンドウで、 Facebook アイコンを選択します。

  4. ウィザードで、前の手順で保存した Facebook の情報を入力します。 情報が正しい場合、ウィザードの下部に コールバック URLトークンの確認 が表示されます。 それらをコピーして保存します。

    Facebook Messenger チャネルを構成するためのインターフェイス

  5. [保存] を選択します。

  6. Facebook の設定に戻り、構成プロセスを完了します。

  7. コールバック URL を入力し、Azure portal から収集したトークン値を確認します。

  8. [Webhook 構成] セクションで、[ メッセージの _ 配信]、[ メッセージ]、[ メッセージング _ オプション]、[ メッセージング _ ポストバック] の各サブスクリプションを有効にします。

確認用に送信する

Facebook には、基本アプリ設定ページの [Privacy Policy URL](プライバシー ポリシーの URL) と [ Terms of Service URL](利用規約の URL) が必要です。 [Code of Conduct](行動規範) ページには、プライバシー ポリシーを作成するためのサード パーティのリソース リンクがあります。 [Terms of Use](利用規約) ページには、適切な利用規約を作成するために役立つサンプルの規約が掲載されています。

ボットが完了した後、Facebook には、Messenger に発行されたアプリの独自のレビュー処理があります。 Bot は、Facebook の プラットフォームポリシーに準拠しているかどうかをテストします。

アプリを発行してページを発行する

注意

アプリが発行されるまでは、開発モード段階です。 プラグインと API の機能は、管理者、開発者、およびテスターのみが使用できます。

レビューが正常に完了したら、[App Dashboard](アプリ ダッシュボード) の [App Review](アプリ レビュー) でアプリを [Public](パブリック) に設定します。 このボットに関連付けられた Facebook ページが発行されていることを確認します。 [Pages settings](ページ設定) に状態が表示されます。 「 Facebook でボットをテスト する」セクションで説明されている手順に従って、接続をテストします。

Facebook Workplace にボットを接続する

注意

2019 年 12 月 16 日に、Workplace by Facebook ではカスタム統合のセキュリティ モデルが変更されました。 Microsoft Bot Framework v4 を使用して構築された従来の統合は、2020 年 2 月 28 日より前に、以下の手順に従って、Bot Framework Facebook アダプターを使用するよう更新する必要があります。

Workplace データへの制限付きアクセス (低秘密度のアクセス許可) を使用した統合については、Facebook が認める 2020 年 12 月 31 日までの継続使用の対象と見なされます。ただしその統合が、セキュリティ RFI を実施して合格し、なおかつ、2020 年 1 月 15 日より前に Direct Support 経由で開発者からアプリの継続使用を要請する連絡があった場合に限られます。

Bot Framework アダプターは、JavaScript (Node.js) および C# (.NET) のボット向けに提供されています。

Facebook Workplace は、従業員が簡単に接続して共同作業できる Facebook のビジネス指向バージョンです。 これには、ライブ動画、ニュース フィード、グループ、Messenger、リアクション、検索、およびトレンドの投稿が含まれています。 また、以下もサポートします。

  • 分析と統合。 企業が Workplace を既存の IT システムと統合するために使用する分析、統合、シングルサインオン、および ID プロバイダーを備えたダッシュボード。
  • 複数の企業のグループ。 さまざまな組織の従業員が連携して共同作業を行うことができる共有スペース。

Facebook Workplace については、Workplace ヘルプ センターを参照してください。Facebook Workplace の開発に関するガイドラインについては、Workplace の開発者向けドキュメントを参照してください。

ボットと共に Facebook Workplace を使用するには、ボットを接続するために、Workplace アカウントとカスタム統合を作成する必要があります。

Workplace プレミアム アカウントを作成する

  1. 会社を代表して Workplace に申請を送信します。
  2. 申請が承認されると、参加するよう招待するメールが届きます。 応答にはしばらく時間がかかる場合があります。
  3. 電子メールの招待状から、[はじめに] を選択します。
  4. プロファイル情報を入力します。

    ヒント

    自分自身をシステム管理者として設定します。 カスタム統合を作成できるのはシステム管理者のみであることに注意してください。

  5. [ プレビュー プロファイル] を 選択し、情報が正しいか確認します。
  6. [Free Trial](無料試用版) にアクセスします。
  7. パスワード を作成 します
  8. [Invite Coworkers]を選択して 、従業員をサインインに招待します。 招待した従業員は、サインインするとすぐにメンバーになります。 彼らは、これらの手順で説明した内容と同様のサインイン プロセスを行います。

カスタム統合を作成する

以下で説明する手順に従って、Workplace のカスタム統合を作成します。 カスタム統合を作成すると、アクセス許可が定義されたアプリと種類のページ (Workplace コミュニティ内でのみ表示 Bot ) が作成されます。

  1. [Admin Panel](管理パネル) で、 [Integrations](統合) タブを開きます。

  2. [独自 のカスタム アプリを作成する] を選択します

    Workplace の統合

  3. アプリの表示名とプロファイルの写真を選択します。 このような情報は、 型のページと共有されます Bot

  4. [Allow API Access to App Settings](アプリ設定への API のアクセスを許可する) を [Yes](はい) に設定します。

  5. 表示されたアプリ ID、アプリ シークレット、およびアプリ トークンをコピーし、安全に保管します。

    Workplace のキー

  6. これで、カスタム統合の作成が完了しました。 次に示すように、Workplace コミュニティで種類 Bot のページを見つけることができます。

    Workplace のページ

Facebook アダプターでボットのコードを更新する

自分のボットのソース コードを更新して、Workplace by Facebook と通信するためのアダプターを追加する必要があります。 アダプターは、JavaScript (Node.js) および C# (.NET) のボット向けに提供されています。

Facebook の資格情報を入力する

ボットのappsettings.js on ファイルに、以前に Facebook Workplace からコピーした Facebookアプリ ID、Facebook****アプリ シークレット、ページ アクセス トークンの値を追加します。 従来のページ ID の代わりに、その [About] ページの統合名に続く数値を 使用 します。 JavaScript (Node.js) または C# (.NET) で、これらの手順に従ってボットのソース コードを更新してください。

レビューのために Workplace アプリを送信する

詳細については、「Facebook Messenger にボットを接続する」セクションと Workplace の開発者向けドキュメントを参照してください。

Workplace アプリをパブリックにし、ページを発行する

詳細については、「Facebook Messenger にボットを接続する」セクションを参照してください。

API バージョンを設定する

特定のバージョンの Graph API の廃止に関する Facebook からの通知を受け取った場合、Facebook 開発者向けページに移動します。 ボットの App 設定 に移動し、設定Advanced Upgrade API バージョンに移動し、[すべての呼び出しをバージョン > > 4.0にアップグレードする] を切り替えます。

「Facebook でボットをテストする」セクションで説明されている 手順に従って、接続をテスト します。

Facebook アダプターを使用してボットを Facebook に接続する

ボットを Facebook Workplace に接続するには、Bot Framework Facebook アダプターを使用します。 アプリに接続Facebook Messenger、Facebook チャネルまたは Facebook アダプターを使用できます。 Facebook アダプターは、JavaScript (Node.js) および C# (.NET) のボット向けに提供されています。

この記事では、アダプターを使用してボットを Facebook に接続する方法について説明します。 この記事では、Echo ボットサンプルを変更して Facebook に接続する方法について説明します。

以下の手順では、Facebook アダプターの C# 実装について説明しています。 JavaScript アダプター (BotKit ライブラリに含まれます) の使用手順については、BotKit Facebook のドキュメントを参照してください。

前提条件

Facebook アプリとページを作成し、資格情報を収集する

  1. https://developers.facebook.com にログインします。 メイン メニューで、[アプリの作成]マイ アプリ > 選択します

    アプリを作成する

  2. 表示されるダイアログで、新しいアプリの表示名を入力し、[アプリ ID の作成 ] を選択します

    アプリの名前を定義する

Messenger を設定して Facebook ページを関連付ける

  1. アプリの作成後、設定可能な製品が一覧表示されます。 Messenger 製品の横にある [セットアップ] を選択 します。

  2. 使用する既存のページがない場合は、新しいアプリを Facebook ページに関連付け、ページを作成する必要があります。[アクセス トークン] セクションで [新しいページの作成] を選択します — 。 [ ページの追加と削除] を選択し、アプリに関連付けられるページを選択して、[次へ] を 選択します[Messenger でのページの会話の管理とアクセス] 設定を有効 のままにして、[完了] を 選択します

    Messenger を設定する

  3. ページを関連付けしたら、[トークンの 生成] を選択 してページ アクセス トークンを生成します。 このトークンを書き留めてください。後続の手順でボット アプリケーションを構成する際に必要になります。

アプリ シークレットを取得する

  1. 左側のメニューで [基本]を設定 基本]を選択して、アプリの基本設定ページに移動します。

  2. [基本設定] ページで、[アプリ シークレット] の横にある [表示] を選択します。 このシークレットを書き留めてください。後続の手順で自分のボット アプリケーションを構成する際に必要になります。

ボットに Facebook アダプターを接続する

自分の Facebook アプリ、ページ、資格情報が揃ったら、自分のボット アプリケーションを構成する必要があります。

Facebook アダプターの NuGet パッケージをインストールする

Microsoft.Bot.Builder.Adapters.Facebook パッケージを NuGetします。 NuGet の使用方法について詳しくは、Visual Studio でパッケージをインストールして管理する方法に関するページを参照してください。

Facebook アダプター クラスを作成する

クラスを継承する新しいクラスを作成 FacebookAdapter します。 このクラスは Facebook チャネルのアダプターとして機能し、エラー処理機能が含まれます (サンプルに既に含まれるクラスに似ています。このクラスは、Azure Bot Service からの他の要求を処理 BotFrameworkAdapterWithErrorHandler するために使用されます)。

public class FacebookAdapterWithErrorHandler : FacebookAdapter
{
    public FacebookAdapterWithErrorHandler(IConfiguration configuration, ILogger<BotFrameworkHttpAdapter> logger)
            : base(configuration, logger)
        {
            OnTurnError = async (turnContext, exception) =>
            {
                // Log any leaked exception from the application.
                logger.LogError(exception, $"[OnTurnError] unhandled error : {exception.Message}");

                // Send a message to the user
                await turnContext.SendActivityAsync("The bot encountered an error or bug.");
                await turnContext.SendActivityAsync("To continue to run this bot, please fix the bot source code.");

                // Send a trace activity, which will be displayed in the Bot Framework Emulator
                await turnContext.TraceActivityAsync("OnTurnError Trace", exception.Message, "https://www.botframework.com/schemas/error", "TurnError");
            };
        }
}

Facebook の要求を処理するための新しいコントローラーを作成する

新しいチャネルからの要求に使用される既定のエンドポイントではなく、新しいエンドポイントで Facebook からの要求を処理する api/facebook api/messages 新しいコントローラー Azure Bot Serviceします。 自分のボットに新しくエンドポイントを追加することによって、Bot Service チャネルからの要求だけでなく、Facebook からの要求も、同じボットを使用して受け入れることができます。

[Route("api/facebook")]
[ApiController]
public class FacebookController : ControllerBase
{
    private readonly FacebookAdapter _adapter;
    private readonly IBot _bot;

    public FacebookController(FacebookAdapter adapter, IBot bot)
    {
        _adapter = adapter;
        _bot = bot;
    }

    [HttpPost]
    [HttpGet]
    public async Task PostAsync()
    {
        // Delegate the processing of the HTTP POST to the adapter.
        // The adapter will invoke the bot.
        await _adapter.ProcessAsync(Request, Response, _bot);
    }
}

ボットの startup.cs に Facebook アダプターを挿入する

ConfigureServices startup.cs ファイル内の メソッドに次の行を追加します。 これによって Facebook アダプターが登録され、新しいコントローラー クラスで利用できるようになります。 前の手順で追加した構成設定が、アダプターによって自動的に使用されます。

services.AddSingleton<FacebookAdapter, FacebookAdapterWithErrorHandler>();

追加すると、メソッド ConfigureServices は次のように表示されます。

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);

    // Create the default Bot Framework adapter (used for Azure Bot Service channels and Emulator).
    services.AddSingleton<IBotFrameworkHttpAdapter, BotFrameworkAdapterWithErrorHandler>();

    // Create the Facebook adapter
    services.AddSingleton<FacebookAdapter, FacebookAdapterWithErrorHandler>();

    // Create the bot as a transient. In this case the ASP controller is expecting an IBot.
    services.AddTransient<IBot, EchoBot>();
}

ボットの URL を取得する

ボット プロジェクトにアダプターを接続したら、Facebook に対し、自分のアプリケーションの適切なエンドポイントを指定して、自分のボットがメッセージを受信できるようにする必要があります。 また、自分のボット アプリケーションの構成を完成させるためにも、この URL が必要となります。

この手順を実行するために、ボットを Azure にデプロイし、そのデプロイしたボットの URL を書き留めてください。

注意

ボットを Azure にデプロイする準備ができていない場合、または Facebook アダプターを使用するときにボットをデバッグする場合は、ngrok (以前に Bot Framework Emulator を使用した場合は既にインストールされている可能性があります) などのツールを使用して、ローカルで実行されているボットにトンネル接続し、パブリックにアクセスできる URL を提供できます。

ngrok トンネルを作成して自分のボットへの URL を取得したい場合は、ターミナル ウィンドウで次のコマンドを使用します (これは、ローカル ボットがポート 3978 で実行されていることを想定しています。それとは異なるポートでボットが実行されている場合は、コマンド内のポート番号を変更してください)。

ngrok.exe http 3978 -host-header="localhost:3978"

ボットの構成ファイルに Facebook アプリの設定を追加する

次に示す設定をボット プロジェクトappsettings.json ファイル に追加します。 FacebookAppSecretFacebookAccessToken は、Facebook アプリを作成、構成するときに収集した値を使用して設定してください。 FacebookVerifyToken は、作成するランダムな文字列である必要があります。Facebook によって呼び出された場合、ボットのエンドポイントが確実に確実に本物であるのに使用されます。

"FacebookVerifyToken": "",
"FacebookAppSecret": "",
"FacebookAccessToken": ""

上記の設定が済んだら、自分のボットを再デプロイ (ngrok を使用してローカルで実行している場合は再起動) する必要があります。

Facebook アプリの構成を完成させる

最後の手順では、自分のボットがメッセージを確実に受信できるように、新しい Facebook アプリの Messenger エンドポイントを構成します。

  1. アプリのダッシュボード内で、左側のメニュー で [Messenger] を選択し、[ ] を選択 設定。

  2. [Webhooks] セクションで、[コールバック URL の 追加] を選択します

  3. [Callback URL](コールバック URL) ボックスに、自分のボットの URL と、新しく作成したコントローラーで指定した api/facebook エンドポイントを入力します。 たとえば、「 https://yourboturl.com/api/facebook 」のように入力します。 [ トークンの確認 ] テキストボックスに、先ほど作成した確認トークンを入力し、bot アプリケーションのファイル にappsettings.js に使用します。

    コールバック URL を編集する

  4. [ 確認して保存] を選択します。 自分のボットが実行中であることを確認します。Facebook がお客様のアプリケーションのエンドポイントに対して要求を行い、確認トークン を使用してそれを検証します。

  5. コールバック URL が検証されたら、[追加された サブスクリプションを追加 ] を選択します。 ポップアップウィンドウで、次のサブスクリプションを選択し、[ 保存] を選択します。

    • messages
    • messaging_postbacks
    • messaging_optins
    • messaging_deliveries

    Webhook のサブスクリプション

Facebook でボットをテストする

新しい Facebook アプリに関連付けた Facebook ページ経由でメッセージを送信して、自分のボットが Facebook に正しく接続されているかどうかをテストしてみましょう。

  1. 自分の Facebook ページに移動します。

  2. [ ボタンの追加] を選択します。

    ボタンを追加する

  3. [ 連絡 して メッセージを送信] を選択し、[ 次へ] を選択します。

    表示するボタンを選択します

  4. このボタンをどこに送信するかを確認 するメッセージが表示されたら、 Messenger を選択し、[完了] を選択します。

    ボタンがだれを送信するかを選択する

  5. Facebook ページに現在表示されている新しい [ メッセージの送信 ] ボタンをポイントし、ポップアップメニューから [ テスト] ボタン を選択します。 これにより、自分のアプリとの間で Facebook Messenger を介した新しい会話が開始され、自分のボットへのメッセージ送信をテストすることができます。 ボットはメッセージを受信すると、そのメッセージのテキストをエコーする形でメッセージを返します。

また、 Facebook アダプターのサンプル bot を使用して、この機能をテストすることもできます。これを行うには、前の手順で説明したのと同じ値を使用して appsettings.jsにファイルを 設定します。

その他の資料

Facebook-イベント。 このサンプルを使用して、Facebook Messenger とのボット通信を探索します。