外部 OAuth プロバイダーを使用する

[アーティクル]
04/15/2024

注:

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

更新authenticate()された API を使用して、Google、GitHub、LinkedIn、Facebookなどの外部またはサードパーティの OAuth プロバイダーをサポートできます。

function authenticate(authenticateParameters: AuthenticatePopUpParameters): Promise<string>

外部 OAuth プロバイダーを authenticate() サポートするために、API に次の値を追加します。

isExternal パラメーター
既存 url のパラメーターの 3 つのプレースホルダー値

次の表に、API パラメーター (AuthenticatePopUpParameters) と関数のauthenticate()一覧とその説明を示します。

パラメーター	説明
`isExternal`	パラメーターの種類はブール値です。これは、認証ウィンドウが外部ブラウザーで開くことを示します。
`height`	ポップアップの優先高さ。許容範囲外の場合、値は無視できます。
`url`	認証ポップアップ用のサードパーティ製アプリサーバーの URL。次の 3 つのパラメータープレースホルダーがあります。 - `oauthRedirectMethod`: `{}` でプレースホルダーを渡します。 Teams プラットフォームは、このプレースホルダーをディープリンクまたは Web ページに置き換え、呼び出しがモバイルプラットフォームから送信された場合にアプリサーバーを更新します。 - `authId`: UUID (ユニバーサル一意の identifer) は、このプレースホルダーを置き換えます。アプリサーバーはそれを使用してセッションを維持します。 - `hostRedirectUrl`: プレースホルダーをに `{}`渡します。現在のプラットフォームとクライアントは、このプレースホルダーをリダイレクト URL に置き換え、認証が完了した後にユーザーを正しいクライアントにリダイレクトします。
`width`	ポップアップの優先幅。許容範囲外の場合、値は無視できます。

注:

パラメーターは authID 認証セッションの間有効です。既定のタイムアウトは 120 秒です。

パラメーターの詳細については、認証 (AuthenticatePopUpParameters) 関数に関するページを参照してください。

外部ブラウザーへの認証の追加

次の画像は、外部ブラウザーに認証を追加するためのフローを示しています。

authenticate-OAuth

外部ブラウザーに認証を追加するには

外部認証ログインプロセスを開始します。サードパーティ製アプリは、外部認証ログインプロセスを開始するために true に設定された TeamsJS 関数authentication.authenticateisExternalを呼び出します。

渡された url には、および {hostRedirectUrl}の{authId}{oauthRedirectMethod}プレースホルダーが含まれています。
```
   authentication.authenticate({
      url: `${window.location.origin}/auth-start?oauthRedirectMethod={oauthRedirectMethod}&authId={authId}&hostRedirectUrl={hostRedirectUrl}&googleId=${googleId}`,
      isExternal: true
    }).then((result) => {
      this.getGoogleServerSideToken(result);
    }).catch((reason) => {
      console.log("failed" + reason);
      reject(reason);
    })
```
Teams クライアントは、および hostRedirectUrl のプレースホルダーoauthRedirectMethodauthIdを適切な値に自動的に置き換えた後、外部ブラウザーで URL を開きます。

例
```
 https://3p.app.server/auth?oauthRedirectMethod=deeplink&authId=1234567890&hostRedirectUrl=msteams://teams.microsoft.com/l/auth-callback?authId=1234567890&result={result} 
```

サードパーティ製アプリサーバーが応答します。サードパーティ製アプリサーバーは、を受け取り、次の 3 つのクエリパラメーターで保存 url します。

パラメーター	説明
`oauthRedirectMethod`	サードパーティ製アプリが認証要求の応答をクライアントに送り返す方法を示します。2 つの値の 1 つであるディープリンクまたはページ。
`authId`	request-id Teams は、ディープリンクを介してクライアントに送信する必要がある、この特定の認証要求用に作成します。
`hostRedirectUrl`	ディープリンクには、認証後にリダイレクトする開始クライアントの URL スキーマが含まれています。

ヒント

アプリは、OAuthProvider のログイン URL を生成するときに、OAuth state クエリパラメーターで、、oauthRedirectMethod、および hostRedirectUrl をマーシャリングauthIdできます。には state 、OAuthProvider がサーバーにリダイレクトされ、アプリが認証応答を開始クライアントに送信するための値を使用する場合に、手順 6 で説明されているように、渡された authId、 oauthRedirectMethod、および hostRedirectUrlが含まれます。

サードパーティ製アプリサーバーは、指定したにリダイレクトされます url。サードパーティ製アプリサーバーは、外部ブラウザーの OAuth プロバイダー認証ページにリダイレクトします。 redirect_uriは、アプリサーバー上の専用ルートです。 redirect_uri を OAuth プロバイダーの開発コンソールに静的として登録できます。パラメーターは状態オブジェクトを通じて送信する必要があります。

例
```
https://accounts.google.com/o/oauth2/v2/auth?redirect_uri=https://3p.app.server/authredirect&state={"authId":"…","oauthRedirectMethod":"…","hostRedirectUrl":"_"}&client_id=…    &response_type=code&access_type=offline&scope= … 
```
外部ブラウザーにサインインします。 OAuth プロバイダーは、認証コードと状態オブジェクトを使用して redirect_uri にリダイレクトします。
サードパーティ製アプリサーバーは、応答とチェック oauthRedirectMethodを処理します。これは、状態オブジェクトの外部 OAuth プロバイダーから返され、認証コールバックのディープリンクまたはを呼び出 notifySuccess()す Web ページを介して応答を返す必要があるかどうかを判断します。
```
if (state.oauthRedirectMethod === 'deeplink') {
   const clientRedirectUrl: string = state.hostRedirectUrl.replace('{result}', req.query.code)
   return res.redirect(clientRedirectUrl)
}
else {
// continue redirecting to a web-page that will call notifySuccess() – usually this method is used in Teams-Web
…
```
たとえば、Teams モバイルクライアントでは、変更された hostRedirectUrl 結果は次のようになります。
```
return res.redirect(`msteams://teams.microsoft.com/l/auth-callback?authId=${state.authId}&result=${req.query.code}`)
```
指定された値 hostRedirectUrl は、外部認証フローを開始するクライアントによって異なります。
Teams は成功コールバックを呼び出し、結果 (認証コード) をサードパーティのアプリに送信します。アプリは成功コールバックでコードを受け取り、コードを使用してトークンを取得し、次にユーザー情報を取得し、ユーザーインターフェイスを更新します。
```
successCallback: function (result) { 
… 
} 
```

外部 OAuth プロバイダーを使用する

外部ブラウザーへの認証の追加

関連項目

フィードバック

その他のリソース