ボットでユーザーをMicrosoft Teamsする

重要

この記事は、v3 Bot Framework SDK に基づいて作成されています。 SDK の現在のドキュメント バージョン 4.6 以降を探している場合は、「会話型ボット 」セクションを参照 してください。

Teams アプリ内で使用するサービスは多く、それらのサービスの大部分では、アクセスを取得するために認証と承認が必要です。 サービスには、Facebook、Twitter、およびTeams。 ユーザーが microsoft Teamsを使用して、ユーザー プロファイル情報をAzure Active Directoryに保存Graph。 このトピックでは、アクセスを取得するためにAzure AD認証に焦点を当てします。 OAuth 2.0 は、ユーザーや他の多くのサービス プロバイダーが使用する認証Azure AD標準です。 OAuth 2.0 について理解は、認証と認証の操作を行うTeams前提条件Azure AD。 次の例では、OAuth 2.0 暗黙的な付与フローを使用して、最終的に Azure AD および Microsoft のプロファイル情報を読み取Graph。

このトピックで説明する認証フローは、タブで Web ベースの認証フローを使用できる点と、ボットがコードから駆動する認証を必要とする点を除き、タブに似ています。 このトピックの概念は、モバイル プラットフォームから認証を実装する場合にも役立ちます。

ボットの認証フローの概要については、「ボットの認証フロー 」を参照してください

ID プロバイダーの構成

ID プロバイダーとしてOAuth 2.0 コールバック リダイレクト URL を構成する方法の詳細については、「Azure Active Directory ID プロバイダーの構成」を参照してください。

認証フローの開始

認証フローは、ユーザー アクションによってトリガーされる必要があります。 ブラウザーのポップアップ ブロックをトリガーし、ユーザーを混乱させる可能性がある場合は、認証ポップアップを自動的に開かれません。

認証を開始するための UI の追加

ボットに UI を追加して、必要に応じてユーザーがサインインできます。 ここでは、TypeScript のサムネイル カードから行います。

// Show prompt of options
protected async promptForAction(session: builder.Session): Promise<void> {
    let msg = new builder.Message(session)
        .addAttachment(new builder.ThumbnailCard(session)
            .title(this.providerDisplayName)
            .buttons([
                 builder.CardAction.messageBack(session, "{}", "Sign in")
                     .text("SignIn")
                     .displayText("Sign in"),
                  builder.CardAction.messageBack(session, "{}", "Show profile")
                     .text("ShowProfile")
                     .displayText("Show profile"),
                  builder.CardAction.messageBack(session, "{}", "Sign out")
                     .text("SignOut")
                     .displayText("Sign out"),
            ]));
    session.send(msg);
}

ヒーロー カードには、サインイン、プロファイルの表示、サインアウトの 3 つのボタンが追加されています。

ユーザーのサインイン

セキュリティ上の理由から実行する必要がある検証とモバイル バージョンの Teams のサポートのため、コードはここに表示されませんが、ユーザーが [サインイン]ボタンを押すとプロセスを開始するコードの例を次に示します。

検証とモバイル サポートについては、「ボットの 認証フロー」を参照してください

認証リダイレクト URL のドメインをマニフェストのセクション validDomains に必ず追加してください。 サインインしない場合、ポップアップは表示されません。

ユーザー プロファイル情報の表示

アクセス トークンの取得は困難ですが、さまざまな Web サイト間のすべての切り替えと、対処する必要があるセキュリティの問題のため、トークンを取得すると、Azure Active Directory から情報を取得することは簡単です。 ボットは、アクセス トークンを使用してGraph me エンドポイントを呼び出します。 Graphしたユーザーのユーザー情報に応答します。 応答からの情報は、ボット カードを作成して送信するために使用されます。

// Show user profile
protected async showUserProfile(session: builder.Session): Promise<void> {
    let azureADApi = this.authProvider as AzureADv1Provider;
    let userToken = this.getUserToken(session);

    if (userToken) {
        let profile = await azureADApi.getProfileAsync(userToken.accessToken);
        let profileCard = new builder.ThumbnailCard()
            .title(profile.displayName)
            .subtitle(profile.mail)
            .text(`${profile.jobTitle}<br/> ${profile.officeLocation}`);
        session.send(new builder.Message().addAttachment(profileCard));
    } else {
        session.send("Please sign in to AzureAD so I can access your profile.");
    }

    await this.promptForAction(session);
}

// Helper function to make the Graph API call
public async getProfileAsync(accessToken: string): Promise<any> {
    let options = {
        url: "https://graph.microsoft.com/v1.0/me",
        json: true,
        headers: {
            "Authorization": `Bearer ${accessToken}`,
        },
    };
    return await request.get(options);
}

ユーザーがサインインしていない場合は、サインインするように求めるメッセージが表示されます。

ユーザーをサインアウトする

// Handle user logout request
private async handleLogout(session: builder.Session): Promise<void> {
    if (!utils.getUserToken(session, this.providerName)) {
        session.send(`You're already signed out of ${this.providerDisplayName}.`);
    } else {
        utils.setUserToken(session, this.providerName, null);
        session.send(`You're now signed out of ${this.providerDisplayName}.`);
    }

    await this.promptForAction(session);
}

その他のサンプル

ボット認証プロセスを示すサンプル コードについては、以下を参照してください。