サード パーティの OAuth プロバイダーを使用して認証を有効にする

  • [アーティクル]

サード パーティの OAuth ID プロバイダー (IdP) を使用して、タブ アプリで認証を有効にすることができます。 この方法では、アプリ ユーザー ID が検証され、OAuth IdP (Microsoft Entra ID、Google、Facebook、GitHub、またはその他のプロバイダーなど) によってアクセスが許可されます。 IdP との信頼関係を構成する必要があり、またアプリ ユーザーもそれに登録する必要があります。

注:

モバイル クライアントのタブで認証を機能させるには、Microsoft Teams JavaScript ライブラリの少なくとも 1.4.1 バージョンを使用していることを確認する必要があります。
TeamsJS は、認証フロー用の別のウィンドウを起動します。 SameSite 属性を Lax に設定します。 Teams デスクトップ クライアントまたは以前のバージョンの Chrome または Safari は、SameSite=None をサポートしていません。

注:

このトピックでは、Microsoft Teams JavaScript クライアント ライブラリ (TeamsJS) のバージョン 2.0.x を反映しています。 以前のバージョンを使用している場合は、 最新の TeamsJS と以前のバージョンの違いに関するガイダンスについては、TeamsJS ライブラリの概要を参照してください。

OAuth IdP を使用して認証を有効にする

OAuth 2.0 は、Microsoft Entra ID やその他の多くの ID プロバイダーによって使用される認証と承認のオープン標準です。 OAuth 2.0 の基本的な解釈は、Teams で認証を操作するための前提条件です。 詳細については、正式な仕様よりもわかりやすい 簡略化された OAuth2 を参照してください。 タブとボットの認証フローは異なります。タブは Web サイトに似ているため、OAuth 2.0 を直接使用できます。 ボットではいくつかの操作が異なりますが、コア概念は同じです。

たとえば、Node と OAuth 2.0 暗黙的な許可の種類を使用するタブとボットの認証フローについては、「タブの認証フローを開始する」を参照してください。

このセクションでは、タブ アプリで認証を有効にするためのサード パーティの OAuth プロバイダーの例として、Microsoft Entra ID を使用します。

注:

ユーザーに [ログイン ] ボタンを表示し、ボタンの authentication.authenticate 選択に応じて API を呼び出す前に、TeamsJS の初期化が完了するまで待つ必要があります。 ハンドラーをチェーンすることもawait、.then()関数をapp.initialize()完了することもできます。

タブ認証シーケンス フローを示す図。

  1. ユーザーは、タブ構成またはコンテンツ ページのコンテンツ (通常は [サインイン] または [ログイン] ボタン) で操作します。

  2. このタブは、認証の開始ページの URL を作成します。 必要に応じて、URL プレースホルダーからの情報を使用するか、TeamsJS メソッドを呼び出 app.getContext() して、ユーザーの認証エクスペリエンスを合理化します。 たとえば、Microsoft Entra ID で認証する場合、パラメーターがユーザーの電子メール アドレスに設定されている場合login_hint、ユーザーは最近サインインする必要はありません。 これは、Microsoft Entra ID がユーザーのキャッシュされた資格情報を使用するためです。 ポップアップ ウィンドウが短い時間表示され、消えます。

  3. その後、タブは メソッドを authentication.authenticate() 呼び出します。

  4. Teams は、ポップアップ ウィンドウの iframe で開始ページを開きます。 スタート ページでは、ランダム なstateデータが生成され、将来の検証のために保存され、ID プロバイダーの/authorizeエンドポイント (Microsoft Entra ID など) https://login.microsoftonline.com/<tenant ID>/oauth2/authorize にリダイレクトされます。 <tenant id> を context.tid である独自のテナント ID に置き換えます。 Teams 内の他のアプリケーション認証フローと同様に、開始ページは、その validDomains リストにあるドメイン上にあり、ログイン後のリダイレクト ページと同じドメイン上にある必要があります。

    注:

    認証要求のパラメーターに対する state OAuth 2.0 暗黙的な許可フロー呼び出し。この呼び出しには、 クロスサイト要求フォージェリ攻撃を防ぐための一意のセッション データが含まれています。 この例では、データにランダムに生成された GUID を state 使用します。

  5. プロバイダーのサイトで、ユーザーはサインインし、タブへのアクセスを許可します。

  6. ID プロバイダーは、アクセス トークンを使用してユーザーをタブの OAuth 2.0 リダイレクト ページにリダイレクトします。

  7. タブは、返されたstate値が以前に保存されたものと一致することを確認し、 を呼び出authentication.notifySuccess()します。これにより、手順 3 から promise ベースauthenticate()のメソッドの成功ハンドラー (.then()) が呼び出されます。

  8. Microsoft Teams は、ポップアップ ウィンドウを終了します。

  9. タブは、ユーザーが開始した場所に基づいて、構成 UI を表示するか、タブのコンテンツを更新または再読み込みします。

注:

アプリケーションが SAML SSO をサポートしている場合、タブ SSO で生成された JWT トークンはサポートされていないため使用できません。

タブ コンテキストをヒントとして扱う

タブ コンテキストはユーザーに関する有用な情報を提供しますが、この情報を使用してユーザーを認証しないでください。 タブ コンテンツ URL の URL パラメーターとして情報を取得した場合、または Microsoft Teams JavaScript クライアント ライブラリ (TeamsJS) で関数を app.getContext() 呼び出して、ユーザーを認証します。 悪意のあるアクターは、独自のパラメーターを使用してタブ コンテンツ URL を呼び出すことができます。 アクターは、偽装 Microsoft Teams Web ページを呼び出して、タブ コンテンツ URL を iframe に読み込み、独自のデータを getContext() 関数に返すこともできます。 使用する前に、タブ コンテキストの ID 関連情報をヒントとして扱い、検証する必要があります。 ポップアップページから認証ページに移動する際の注意事項を参照してください。

コード サンプル

タブ認証プロセスを示すサンプル コード:

サンプルの名前 説明 .NET Node.js マニフェスト
アプリの完全な認証 このサンプルでは、シングル サインオン (SSO) を使用してボット、タブ、メッセージング拡張機能で認証を使用し、ユーザー名とパスワードを使用して Facebook で認証を使用する方法を示します 表示 表示 表示

関連項目

Microsoft Entra ID を使用したタブ認証の詳細な実装については、次を参照してください。