Facebook にボットを接続するConnect a bot to Facebook

適用対象: SDK v4APPLIES TO: SDK v4

ボットは Facebook Messenger と Facebook Workplace の両方に接続できるため、両方のプラットフォームのユーザーと通信できます。Your bot can be connected to both Facebook Messenger and Facebook Workplace, so that it can communicate with users on both platforms. 次のチュートリアルでは、これらの 2 つのチャネルにボットを接続する方法を説明します。The following tutorial shows how to connect a bot to these two channels.

注意

Facebook の UI は、使用しているバージョンによって多少異なる場合があります。The Facebook UI may appear slightly different depending on which version you are using.

Facebook Messenger にボットを接続するConnect a bot to Facebook Messenger

Facebook Messenger 向けの開発の詳細については、Messenger プラットフォームのドキュメントを参照してください。To learn more about developing for Facebook Messenger, see the Messenger platform documentation. Facebook のプレリリースのガイドラインクイック スタート、および設定ガイドを参照してください。You may wish to review Facebook's pre-launch guidelines, quick start, and setup guide.

Facebook Messenger を使用して通信するようにボットを構成するには、Facebook ページで Facebook Messenger を有効にしてから、ボットを接続します。To configure a bot to communicate using Facebook Messenger, enable Facebook Messenger on a Facebook page and then connect the bot.

ページ ID をコピーするCopy the Page ID

ボットは Facebook ページからアクセスします。The bot is accessed through a Facebook Page.

  1. 新しい Facebook ページを作成するか、既存のページに移動します。Create a new Facebook Page or go to an existing Page.

  2. Facebook ページの [About](概要) ページを開き、 [Page ID](ページ ID) をコピーして保存します。Open the Facebook Page's About page and then copy and save the Page ID.

Facebook アプリを作成するCreate a Facebook app

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

  2. アプリの名前を入力し、 [Create New Facebook App ID](新しい Facebook アプリ ID の作成) ボタンをクリックします。Enter the name of your app and click the Create New Facebook App ID button.

    アプリを作成する

  3. 表示されたダイアログ ボックスで、電子メール アドレスを入力し、 [Create App ID](アプリ ID の作成) ボタンをクリックします。In the displayed dialog, enter your email address and click the Create App ID button.

    アプリ ID を作成する

  4. ウィザードの手順を実行します。Go through the wizard steps.

  5. 必要なチェック情報を入力し、右上にある [Skip Quick Start](クイック スタートをスキップ) ボタンをクリックします。Enter the required check information, then click the Skip Quick Start button in the upper right.

  6. 次に表示されるウィンドウの左側のウィンドウで、 [設定] を展開し、 [基本] をクリックします。In the left pane of the next displayed window, expand Settings and click Basic.

  7. 右側のウィンドウで、 [アプリ ID] および [アプリ シークレット] をコピーして保存します。In the right pane, copy and save the App ID and App Secret.

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

  8. 左側のウィンドウの [設定] で、 [詳細] をクリックします。In the left pane, under Settings, click Advanced.

  9. 右側のウィンドウで、 [Allow API Access to App Settings](アプリ設定への API のアクセスを許可する) スライダーを [はい] に設定します。In the right pane, set Allow API Access to App Settings slider to Yes.

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

  10. 右下のページで、 [変更の保存] ボタンをクリックします。In the page bottom right, click the Save Changes button.

Messenger を有効にするEnable messenger

  1. 左側のウィンドウで、 [ダッシュボード] をクリックします。In the left pane, click Dashboard.

  2. 右側のウィンドウで下にスクロールし、 [Messenger] ボックスの [Set Up](設定) ボタンをクリックします。In the right pane, scroll down and in the Messenger box, click the Set Up button. Messenger のエントリは、左側のウィンドウの [PRODUCTS](製品) セクションに表示されます。The Messenger entry is displayed under the PRODUCTS section in the left pane.

    Messenger を有効にする

ページ アクセス トークンを生成するGenerate a Page Access Token

  1. 左側のウィンドウで、Messenger のエントリの下にある [設定] をクリックします。In the left pane, under the Messenger entry, click Settings.

  2. 右側のウィンドウで下にスクロールし、 [Token Generation](トークンの生成) セクションでターゲット ページを選択します。In the right pane, scroll down and in the Token Generation section, select the target page.

    ページアクセストークンを生成する

  3. アクセス トークンを生成するために、 [アクセス許可の編集] ボタンをクリックして、pages_messaging をアプリに許可します。Click the Edit Permissions button to grant the app pages_messaging in order to generate an access token.

  4. ウィザードの手順に従います。Follow the wizard steps. 最後の手順では、既定の設定をそのまま使用し、 [完了] ボタンをクリックします。In the last step accept the default settings and click the Done button. 最後に、ページ アクセス トークン が生成されます。At the end a page access token is generated.

    設定を受け入れる

  5. [Page Access Token](ページ アクセス トークン) をコピーして保存します。Copy and save the Page Access Token.

Webhook を有効にするEnable webhooks

ボットから Facebook Messenger にメッセージやその他のイベントを送信するには、Webhook 統合を有効にする必要があります。In order to send messages and other events from your bot to Facebook Messenger, you must enable webhooks integration. この時点では、Facebook 設定の手順は保留のままにしておき、後で戻ってきます。At this point, let's leave the Facebook setting steps pending; will come back to them.

  1. ブラウザーで新しいウィンドウを開き、Azure portal に移動します。In your browser open a new window and navigate to the Azure portal.

  2. リソースの一覧でボット リソースの登録をクリックし、関連するブレードで [チャネル] をクリックします。In the Resource list, click on the bot resource registration and in the related blade click Channels.

  3. 右側のウィンドウで、 [Facebook] アイコンをクリックします。In the right pane, click the Facebook icon.

  4. ウィザードで、前の手順で保存した Facebook の情報を入力します。In the wizard enter the Facebook information stored in the previous steps. 情報が正しい場合、ウィザードの下部に コールバック URLトークンの確認 が表示されます。If the information is correct, at the bottom of the wizard, you should see the callback URL and the verify token. それらをコピーして保存します。Copy and store them.

    FB Messenger チャネル構成

  5. [保存] ボタンをクリックします。Click the Save button.

  6. Facebook の設定に戻りましょう。Let's go back to the Facebook settings. 右側のウィンドウで下にスクロールし、 [Webhook] セクションで [Subscribe To Events](イベントのサブスクライブ) ボタンをクリックします。In the right pane, scroll down and in the Webhooks section, click the Subscribe To Events button. これは、メッセージング イベントを Facebook Messenger からボットに転送するためです。This is to forward messaging events from Facebook Messenger to the bot.

    Webhook を有効にする

  7. 表示されたダイアログ ボックスで、前に保存した [コールバック URL] および [トークンの確認] の値を入力します。In the displayed dialog, enter the Callback URL and Verify Token values stored previously. [サブスクリプション フィールド] で、 [message_deliveries][messages][messaging_optins][messaging_postbacks] を選択します。Under Subscription Fields, select message_deliveries, messages, messaging_optins, and messaging_postbacks.

    Webhook を構成する

  8. [確認して保存] ボタンをクリックします。Click the Verify and Save button.

  9. Webhook をサブスクライブする Facebook ページを選択します。Select the Facebook page to subscribe the webhook. [サブスクライブ] ボタンをクリックします。Click the Subscribe button.

    Webhook ページを構成する

確認用に送信するSubmit for review

Facebook には、基本アプリ設定ページの [Privacy Policy URL](プライバシー ポリシーの URL) と [ Terms of Service URL](利用規約の URL) が必要です。Facebook requires a Privacy Policy URL and Terms of Service URL on its basic app settings page. [Code of Conduct](行動規範) ページには、プライバシー ポリシーを作成するためのサード パーティのリソース リンクがあります。The Code of Conduct page contains third party resource links to help create a privacy policy. [Terms of Use](利用規約) ページには、適切な利用規約を作成するために役立つサンプルの規約が掲載されています。The Terms of Use page contains sample terms to help create an appropriate Terms of Service document.

ボットが完了した後、Facebook には、Messenger に発行されたアプリの独自のレビュー処理があります。After the bot is finished, Facebook has its own review process for apps that are published to Messenger. ボットは Facebook のプラットフォーム ポリシーに準拠していることを確認するためにテストされます。The bot will be tested to ensure it is compliant with Facebook's Platform Policies.

アプリを発行してページを発行するMake the App public and publish the Page

注意

アプリが発行されるまでは、開発モード段階です。Until an app is published, it is in Development Mode. プラグインと API の機能は、管理者、開発者、およびテスターのみが使用できます。Plugin and API functionality will only work for admins, developers, and testers.

レビューが正常に完了したら、[App Dashboard](アプリ ダッシュボード) の [App Review](アプリ レビュー) でアプリを [Public](パブリック) に設定します。After the review is successful, in the App Dashboard under App Review, set the app to Public. このボットに関連付けられた Facebook ページが発行されていることを確認します。Ensure that the Facebook Page associated with this bot is published. [Pages settings](ページ設定) に状態が表示されます。Status appears in Pages settings.

Facebook Workplace にボットを接続するConnect a bot to Facebook Workplace

注意

2019 年 12 月 16 日に、Workplace by Facebook ではカスタム統合のセキュリティ モデルが変更されました。On December 16, 2019, Workplace by Facebook changed its security model for custom integrations. Microsoft Bot Framework v4 を使用して構築された従来の統合は、2020 年 2 月 28 日より前に、以下の手順に従って、Bot Framework Facebook アダプターを使用するよう更新する必要があります。Prior integrations built using Microsoft Bot Framework v4 need to be updated to use the Bot Framework Facebook adapters per the instructions below prior to February 28, 2020.

Workplace データへの制限付きアクセス (低秘密度のアクセス許可) を使用した統合については、Facebook が認める 2020 年 12 月 31 日までの継続使用の対象と見なされます。ただしその統合が、セキュリティ RFI を実施して合格し、なおかつ、2020 年 1 月 15 日より前に Direct Support 経由で開発者からアプリの継続使用を要請する連絡があった場合に限られます。Facebook will only consider integrations with limited access to Workplace data (low sensitivity permissions) eligible for continued use until December 31, 2020 if such integrations have completed and passed Security RFI and if the developer reaches out before January 15, 2020 via Direct Support to request continued use of the app.

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

Facebook Workplace は、従業員が簡単に接続して共同作業できる Facebook のビジネス指向バージョンです。Facebook Workplace is a business-oriented version of Facebook, which allows employees to easily connect and collaborate. これには、ライブ動画、ニュース フィード、グループ、Messenger、リアクション、検索、およびトレンドの投稿が含まれています。It contains live videos, news feeds, groups, messenger, reactions, search, and trending posts. また、以下もサポートします。It also supports:

  • 分析と統合。Analytics and integrations. 企業が Workplace を既存の IT システムと統合するために使用する分析、統合、シングルサインオン、および ID プロバイダーを備えたダッシュボード。A dashboard with analytics, integration, single sign-on, and identity providers that companies use to integrate Workplace with their existing IT systems.
  • 複数の企業のグループ。Multi-company groups. さまざまな組織の従業員が連携して共同作業を行うことができる共有スペース。Shared spaces in which employees from different organizations can work together and collaborate.

Facebook Workplace については、Workplace ヘルプ センターを参照してください。Facebook Workplace の開発に関するガイドラインについては、Workplace の開発者向けドキュメントを参照してください。See the Workplace Help Center to learn more about Facebook Workplace and Workplace Developer Documentation for guidelines about developing for Facebook Workplace.

ボットと共に Facebook Workplace を使用するには、ボットを接続するために、Workplace アカウントとカスタム統合を作成する必要があります。To use Facebook Workplace with your bot, you must create a Workplace account and a custom integration to connect the bot.

Workplace プレミアム アカウントを作成するCreate a Workplace Premium account

  1. 会社を代表して Workplace に申請を送信します。Submit an application to workplace on behalf of your company.
  2. 申請が承認されると、参加するよう招待するメールが届きます。Once your application has been approved, you will receive an email inviting you to join. 応答にはしばらく時間がかかる場合があります。The response may take a while.
  3. 招待メールの [Get Started](作業の開始) をクリックします。From the e-mail invitation, click Get Started.
  4. プロファイル情報を入力します。Enter your profile information.

    ヒント

    自分自身をシステム管理者として設定します。Set yourself as the system administrator. カスタム統合を作成できるのはシステム管理者のみであることに注意してください。Remember that only system administrators can create custom integrations.

  5. [Preview Profile](プロファイルのプレビュー) をクリックし、情報が正しいことを確認します。Click Preview Profile and verify the information is correct.
  6. [Free Trial](無料試用版) にアクセスします。Access Free Trial.
  7. パスワード を作成します。Create password.
  8. [Invite Coworkers](同僚を招待する) をクリックして、サインインするように従業員を招待します。Click Invite Coworkers to invite employees to sign-in. 招待した従業員は、サインインするとすぐにメンバーになります。The employees you invited will become members as soon as they sign. 彼らは、これらの手順で説明した内容と同様のサインイン プロセスを行います。They will go through a similar sign-in process as described in these steps.

カスタム統合を作成するCreate a custom integration

以下で説明する手順に従って、Workplace のカスタム統合を作成します。Create a custom integration for your Workplace following the steps described below. カスタム統合を作成すると、アクセス許可が定義されたアプリと、Workplace コミュニティ内でのみ表示される "ボット" 型のページが作成されます。When you create a custom integration, an app with defined permissions and a page of type 'Bot' only visible within your Workplace community are created.

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

  2. [Create your own custom App](カスタム アプリの作成) ボタンをクリックします。Click on the Create your own custom App button.

    Workplace の統合

  3. アプリの表示名とプロファイルの写真を選択します。Choose a display name and a profile picture for the app. これらの情報は、"ボット" 型のページと共有されます。Such information will be shared with the page of type 'Bot'.

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

  5. 表示されたアプリ ID、アプリ シークレット、およびアプリ トークンをコピーし、安全に保管します。Copy and safely store the App ID, App Secret and App Token that's shown to you.

    Workplace のキー

  6. これで、カスタム統合の作成が完了しました。Now you have finished creating a custom integration. 次に示すように、Workplace コミュニティ内で "ボット" 型のページを見つけることができます。You can find the page of type 'Bot' in your Workplace community,as shown below.

    Workplace のページ

Facebook アダプターでボットのコードを更新するUpdate your bot code with Facebook adapter

自分のボットのソース コードを更新して、Workplace by Facebook と通信するためのアダプターを追加する必要があります。Your bot's source code needs to be updated to include an adapter to communicate with Workplace by Facebook. アダプターは、JavaScript (Node.js) および C# (.NET) のボット向けに提供されています。Adapters are available for JavaScript/Node.js and C#/.NET bots.

Facebook の資格情報を入力するProvide Facebook credentials

前に Facebook Workplace からコピーした Facebook アプリ IDFacebook アプリ シークレットページ アクセス トークン の各値を使用して、自分のボットの appsettings.json を更新する必要があります。You will need to update appsettings.json of your bot with Facebook App ID, Facebook App Secret and Page Access Token values copied from the Facebook Workplace previously. 従来のページ ID ではなく、その [About](詳細) ページの統合名の後に続く番号を使用します。Instead of a traditional pageID, use the numbers following the integrations name on its About page. JavaScript (Node.js) または C# (.NET) で、これらの手順に従ってボットのソース コードを更新してください。Follow these instructions to update your bot source code in JavaScript/Node.js or C#/.NET.

レビュー用に Workplace app を送信するSubmit Workplace app for review

詳細については、「Facebook Messenger にボットを接続する」セクションと Workplace の開発者向けドキュメントを参照してください。Please refer to the Connect a bot to Facebook Messenger section and Workplace Developer Documentation for details.

Workplace アプリを公開し、ページを公開するMake the Workplace app public and publish the Page

詳細については、「Facebook Messenger にボットを接続する」セクションを参照してください。Please refer to the Connect a bot to Facebook Messenger section for details.

API バージョンを設定するSetting the API version

特定のバージョンの Graph API の廃止に関する Facebook からの通知を受け取った場合、Facebook 開発者向けページに移動します。If you receive a notification from Facebook about deprecation of a certain version of the Graph API, go to Facebook developers page. Bot の アプリ設定 に移動し、 [設定] > [詳細 > アップグレード API バージョン] に移動し、[ すべての呼び出し を新しいバージョンにアップグレードする] を切り替えます。Navigate to your bot's App Settings and go to Settings > Advanced > Upgrade API version, then switch Upgrade All Calls to a more recent version.

API バージョンのアップグレード

Facebook アダプターを使用してボットを Facebook に接続するConnect a bot to Facebook using the Facebook adapter

ボットを Facebook Workplace に接続するには、Bot Framework Facebook アダプターを使用します。Use the Bot Framework Facebook adapter to connect your bot with Facebook Workplace. Facebook Messenger に接続するには、Facebook チャネルまたは Facebook アダプターを使用します。To connect to Facebook messenger, you can use the Facebook channel or the Facebook adapter. Facebook アダプターは、JavaScript (Node.js) および C# (.NET) のボット向けに提供されています。Facebook adapters are available for JavaScript/Node.js and C#/.NET bots.

この記事では、アダプターを使用してボットを Facebook に接続する方法について説明します。In this article you will learn how to connect a bot to Facebook using the adapter. この記事では、Facebook に接続するよう EchoBot サンプルに変更を加える手順を解説します。This article will walk you through modifying the EchoBot sample to connect it to Facebook.

以下の手順では、Facebook アダプターの C# 実装について説明しています。The instructions below cover the C# implementation of the Facebook adapter. JavaScript アダプター (BotKit ライブラリに含まれます) の使用手順については、BotKit Facebook のドキュメントを参照してください。For instructions on using the JavaScript adapter, part of the BotKit libraries, see the BotKit Facebook documentation.

前提条件Prerequisites

Facebook アプリとページを作成し、資格情報を収集するCreate a Facebook app, page and gather credentials

  1. https://developers.facebook.com にログインします。Log into https://developers.facebook.com. メイン メニューの [My Apps](マイ アプリ) をクリックし、ドロップ ダウン メニューの [Create App](アプリの作成) をクリックします。Click My Apps in the main menu and click Create App from the drop down menu.

アプリを作成する

  1. 表示されたポップアップ ウィンドウで新しいアプリの名前を入力し、 [Create App ID](アプリ ID の作成) をクリックします。In the pop-up window that appears, enter a name for your new app and then click Create App ID.

アプリの名前を定義する

Messenger を設定して Facebook ページを関連付けるSet up Messenger and associate a Facebook page

  1. アプリの作成後、設定可能な製品が一覧表示されます。Once your app has been created, you will see a list of products available to set up. Messenger 製品の横にある [Set Up](設定) ボタンをクリックします。Click the Set Up button next to the Messenger product.

  2. 次に、新しいアプリを Facebook ページに関連付ける必要があります (使用したい既存のページがない場合は、 [Access Tokens](アクセス トークン) セクションの [Create New Page](ページの新規作成) をクリックして作成できます)。You now need to associate your new app with a Facebook page (if you do not have an existing page you want to use, you can create one by clicking Create New Page in the Access Tokens section). [Add or Remove Pages](ページの追加または削除) をクリックして、アプリの関連付け先のページを選択し、 [Next](次へ) をクリックします。Click Add or Remove Pages, select the page you want to associated with your app and click Next. [Manage and access Page conversations on Messenger](Messenger におけるページの会話に対する管理とアクセス) 設定を有効のままにして、 [Done](完了) をクリックします。Leave the Manage and access Page conversations on Messenger setting enabled and click Done.

Messenger を設定する

  1. 自分のページを関連付けたら、 [Generate Token](トークンの生成) ボタンをクリックして、ページ アクセス トークンを生成します。Once you have associated your page, click the Generate Token button to generate a page access token. このトークンを書き留めてください。後続の手順でボット アプリケーションを構成する際に必要になります。Make a note of this token as you will need it in a later step when configuring your bot application.

アプリ シークレットを取得するObtain your app secret

  1. 左側のメニューの [Settings](設定) をクリックし、 [Basic](基本) をクリックして、自分のアプリの基本設定ページに移動します。In the left hand menu, click Settings and then click Basic to navigate to the basic setting page for your app.

  2. 基本設定ページで、 [App Secret](アプリ シークレット) の横にある [Show](表示) ボタンをクリックします。On the basic settings page, click the Show button next to your App Secret. このシークレットを書き留めてください。後続の手順で自分のボット アプリケーションを構成する際に必要になります。Make a note of this secret as you will need it in a later step when configuring your bot application.

ボットに Facebook アダプターを接続するWiring up the Facebook adapter in your bot

自分の Facebook アプリ、ページ、資格情報が揃ったら、自分のボット アプリケーションを構成する必要があります。Now that you have your Facebook app, page and credentials, you need to configure your bot application.

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

Microsoft.Bot.Builder.Adapters.Facebook NuGet パッケージを追加します。Add the Microsoft.Bot.Builder.Adapters.Facebook NuGet package. NuGet の使用方法について詳しくは、Visual Studio でパッケージをインストールして管理する方法に関するページを参照してください。For more information on using NuGet, see Install and manage packages in Visual Studio.

Facebook アダプター クラスを作成するCreate a Facebook adapter class

*FacebookAdapter _ クラスを継承する新しいクラスを作成します。Create a new class that inherits from the *FacebookAdapter _ class. このクラスは、Facebook チャネルのアダプターとして機能し、エラー処理機能を含みます (Azure Bot Service からの他の要求を処理するために使用される、既にサンプルに含まれている BotFrameworkAdapterWithErrorHandler クラスに似ています)。This class will act as our adapter for the Facebook channel and include error handling capabilities (similar to the BotFrameworkAdapterWithErrorHandler class already in the sample, used for handling other requests from Azure Bot Service).

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 の要求を処理するための新しいコントローラーを作成するCreate a new controller for handling Facebook requests

Azure Bot Service チャネルからの要求に使用される既定の "api/messages" ではなく、新しいエンドポイント "api/facebook" に、Facebook からの要求を処理する新しいコントローラーを作成します。Create a new controller which will handle requests from Facebook, on a new endpoing 'api/facebook' instead of the default 'api/messages' used for requests from Azure Bot Service Channels. 自分のボットに新しくエンドポイントを追加することによって、Bot Service チャネルからの要求だけでなく、Facebook からの要求も、同じボットを使用して受け入れることができます。By adding an additional endpoint to your bot, you can accept requests from Bot Service channels, as well as from Facebook, using the same bot.

[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 アダプターを挿入するInject the Facebook adapter in your bot startup.cs

Startup.cs ファイル内の ConfigureServices メソッドに次の行を追加します。Add the following line to the ConfigureServices method within your startup.cs file. これによって Facebook アダプターが登録され、新しいコントローラー クラスで利用できるようになります。This will register your Facebook adapter and make it available for your new controller class. 前の手順で追加した構成設定が、アダプターによって自動的に使用されます。The configuration settings you added in the previous step will be automatically used by the adapter.

services.AddSingleton<FacebookAdapter, FacebookAdapterWithErrorHandler>();

追加されると、 ConfigureServices メソッドは次のようになります。Once added, your ConfigureServices method should look like this.

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 を取得するObtain a URL for your bot

ボット プロジェクトにアダプターを接続したら、Facebook に対し、自分のアプリケーションの適切なエンドポイントを指定して、自分のボットがメッセージを受信できるようにする必要があります。Now that you have wired up the adapter in your bot project, you need to provide to Facebook the correct endpoint for your application, so that your bot will receive messages. また、自分のボット アプリケーションの構成を完成させるためにも、この URL が必要となります。You also need this URL to complete configuration of your bot application.

この手順を実行するために、ボットを Azure にデプロイし、そのデプロイしたボットの URL を書き留めてください。To complete this step, deploy your bot to Azure and make a note of the URL of your deployed bot.

注意

Bot を Azure にデプロイする準備ができていない場合、または Facebook アダプターを使用してボットをデバッグする準備ができていない場合は、 ngrok などのツールを使用できます (以前に Bot Framework Emulator を使用していた場合は、既にインストールされている可能性があります)。If you are not ready to deploy your bot to Azure, or wish to debug your bot when using the Facebook adapter, you can use a tool such as ngrok (which you will likely already have installed if you have used the Bot Framework Emulator previously) to tunnel through to your bot running locally and provide you with a publicly accessible URL for this.

ngrok トンネルを作成して自分のボットへの URL を取得したい場合は、ターミナル ウィンドウで次のコマンドを使用します (これは、ローカル ボットがポート 3978 で実行されていることを想定しています。それとは異なるポートでボットが実行されている場合は、コマンド内のポート番号を変更してください)。If you wish create an ngrok tunnel and obtain a URL to your bot, use the following command in a terminal window (this assumes your local bot is running on port 3978, alter the port numbers in the command if your bot is not).

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

ボットの構成ファイルに Facebook アプリの設定を追加するAdd Facebook app settings to your bot's configuration file

次に示す設定を自分のボット プロジェクトの appSettings.json ファイルに追加します。Add the settings shown below to your appSettings.json file in your bot project. Facebook アプリを作成および構成するときに収集した値を使用して、_ FacebookAppSecret* と FacebookAccessToken を設定します。You populate _ FacebookAppSecret* and FacebookAccessToken using the values you gathered when creating and configuring your Facebook App. FacebookVerifyToken は自分で生成したランダム文字列である必要があります。これは、自分のボットのエンドポイントが Facebook によって呼び出されたときに、その正当性を保証する目的で使用されます。FacebookVerifyToken should be a random string that you create and will be used to ensure your bot's endpoint is authenitic when called by Facebook.

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

上記の設定が済んだら、自分のボットを再デプロイ (ngrok を使用してローカルで実行している場合は再起動) する必要があります。Once you have populated the settings above, you should redeploy (or restart if running locally with ngrok) your bot.

Facebook アプリの構成を完成させるComplete configuration of your Facebook app

最後の手順では、自分のボットがメッセージを確実に受信できるように、新しい Facebook アプリの Messenger エンドポイントを構成します。The final step is to configure your new Facebook app's Messenger endpoint, to ensure your bot receives messages.

  1. 自分のアプリのダッシュボード内で、左側のメニューの [Messenger] をクリックし、 [Settings](設定) をクリックします。Within the dashboard for your app, click Messenger in the left hand menu and then click Settings.

  2. [Webhooks](Webhook) セクションで、 [Add Callback URL](コールバック URL の追加) をクリックします。In the Webhooks section click Add Callback URL.

  3. [Callback URL](コールバック URL) ボックスに、自分のボットの URL と、新しく作成したコントローラーで指定した api/facebook エンドポイントを入力します。In the Callback URL text box enter your bot's URL, plus the api/facebook endpoint you specified in your newly created controller. たとえば、「 https://yourboturl.com/api/facebook 」のように入力します。For example, https://yourboturl.com/api/facebook. 先ほど作成して自分のボット アプリケーションの appSettings.json ファイルで使用した確認トークンを、 [Verify Token](トークンの確認) ボックスに入力します。In the Verify Token text box enter the verify token you created earlier and used in your bot application's appSettings.json file.

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

  4. [Verify and Save](確認して保存) をクリックします。Click Verify and Save. 自分のボットが実行中であることを確認します。Facebook がお客様のアプリケーションのエンドポイントに対して要求を行い、確認トークン を使用してそれを検証します。Ensure you bot is running, as Facebook will make a request to your application's endpoint and verify it using your Verify Token.

  5. コールバック URL が検証されると [Add Subscriptions](サブスクリプションの追加) ボタンが表示されるので、それをクリックします。Once your callback URL has been verified, click the Add Subscriptions button that is now shown. ポップアップ ウィンドウで次のサブスクリプションを選択して、 [Save](保存) をクリックします。In the pop-up window, select the following subscriptions and click Save.

    • messagesmessages
    • messaging_postbacksmessaging_postbacks
    • messaging_optinsmessaging_optins
    • messaging_deliveriesmessaging_deliveries

    Webhook のサブスクリプション

Facebook のアダプターを使用してボットをテストするTest your bot with adapter in Facebook

新しい Facebook アプリに関連付けた Facebook ページ経由でメッセージを送信して、自分のボットが Facebook に正しく接続されているかどうかをテストしてみましょう。You can now test whether your bot is connected to Facebook correctly by sending a message via the Facebook Page you associated with your new Facebook app.

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

  2. [ ボタンの追加] を クリックします。Click Add a Button.

    [ボタンの追加] ボタン

  3. [Contact You](連絡する)[Send Message](メッセージを送信する) を選択して、 [Next](次へ) をクリックします。Select Contact You and Send Message and click Next.

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

  4. "Where would you like this button to send people to? (このボタンをクリックした人をどこに誘導しますか)" と聞かれたら、 [Messenger] を選択し、 [Finish](完了) をクリックします。When asked Where would you like this button to send people to? select Messenger and click Finish.

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

  5. 新しい [Send Message](メッセージの送信) ボタンが Facebook ページに表示されるので、そこにマウス ポインターを合わせ、ポップアップ メニューから [Test Button](ボタンのテスト) をクリックします。Hover over the new Send Message button that is now shown on your Facebook Page and click Test Button from the pop-up menu. これにより、自分のアプリとの間で Facebook Messenger を介した新しい会話が開始され、自分のボットへのメッセージ送信をテストすることができます。This will start a new conversation with your app via Facebook Messenger, which you can use to test messaging your bot. ボットはメッセージを受信すると、そのメッセージのテキストをエコーする形でメッセージを返します。Once the message is received by your bot, it will send a message back to you, echoing the text from your message.

この機能のテストには、Facebook アダプターのサンプル ボットを使用することもできます。上記の手順で説明したのと同じ値を appSettings.json ファイルに設定してください。You can also test this feature using the sample bot for the Facebook adapter by populating the appSettings.json file with the same values described in the steps above.

関連項目See also

  • サンプル コードSample code. Facebook-events のサンプル ボットを使用して、Facebook Messenger とのボット通信を探索します。Use the Facebook-events sample bot to explore the bot communication with Facebook Messenger.