Microsoft Teams プロバイダーMicrosoft Teams provider

Microsoft Teams タブの内部にある Teams プロバイダーを使用して、認証と Microsoft Graph のすべてのコンポーネントへのアクセスを容易にします。Use the Teams provider inside your Microsoft Teams tab to facilitate authentication and Microsoft Graph access to all components.

詳細については、「 providers」を参照してください。To learn more, see providers.

作業の開始Get started

Teams プロバイダーを使用する前に、ページで Microsoft TEAMS SDK を参照していることを確認する必要があります。Before using the Teams provider, you will need to make sure you have referenced the Microsoft Teams SDK in your page.

via script タグvia script tag

次の例では、HTML (CDN 経由) でプロバイダーを使用します。The following example uses the provider in HTML (via CDN).

<!-- Microsoft Teams sdk must be referenced before the toolkit -->
<script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>

<mgt-teams-provider
  client-id="<YOUR_CLIENT_ID>"
  auth-popup-url="https://<YOUR-DOMAIN>.com/AUTH-PATH"
  authority=""
></mgt-teams-provider>
属性Attribute 説明Description
クライアント idclient-id String クライアント ID ( Teams アプリを構成するを参照してください。String client ID (see Configure your Teams app. 必須です。Required.
auth-popup-urlauth-popup-url ポップアップの認証を処理するページへの絶対パスまたは相対パスです (「 ポップアップページの作成」を参照してください)。Absolute or relative path to the page that will handle auth in the popup (see Create the popup page). 必須です。Required.
スコープscopes ユーザーがサインイン時に同意する必要がある範囲の、コンマ区切りの文字列。Comma separated strings for scopes the user must consent to on sign in. 省略可能。Optional.
依存-オンdepends-on 別の優先度の高いプロバイダコンポーネントの要素セレクター文字列。Element selector string of another higher-priority provider component. 省略可能。Optional.
authority Authority 文字列。Authority string. 既定では、common authority になっています。The default is the common authority. シングルテナントアプリの場合は、テナント ID またはテナント名を使用します。For single-tenant apps, use your tenant ID or tenant name. たとえば、https://login.microsoftonline.com/[your-tenant-name].onmicrosoft.com または https://login.microsoftonline.com/[your-tenant-id] などです。For example, https://login.microsoftonline.com/[your-tenant-name].onmicrosoft.com or https://login.microsoftonline.com/[your-tenant-id]. 省略可能。Optional.

NPM 経由via NPM

次の例では、(NPM を介して) JS モジュールでプロバイダーを使用しています。The following example uses the provider in JS modules (via NPM).

ツールキットと Microsoft Teams SDK の両方がインストールされていることを確認してください。Make sure to install both the toolkit and the Microsoft Teams SDK.

npm install @microsoft/mgt @microsoft/teams-js

次に、プロバイダーをインポートして使用します。Next, import and use the provider.

import '@microsoft/teams-js';
import {Providers, TeamsProvider} from '@microsoft/mgt';
Providers.globalProvider = new TeamsProvider(config);

where configwhere config is

export interface TeamsConfig {
  clientId: string;
  authPopupUrl: string;
  scopes?: string[];
  msalOptions?: Configuration;
}

または、Microsoft Teams ライブラリへの参照を設定する必要がある場合があります。Alternatively, you might need to set the reference to the Microsoft Teams Library. 次に例を示します:Here is an example:

import * as MicrosoftTeams from "@microsoft/teams-js/dist/MicrosoftTeams";
import {Providers, TeamsProvider} from '@microsoft/mgt';

TeamsProvider.microsoftTeamsLib = MicrosoftTeams;
Providers.globalProvider = new TeamsProvider(config);

完全な例については、「 Microsoft Teams タブのサンプル」を参照してください。For a complete example, see Microsoft Teams tab sample.

Teams アプリを構成するConfigure your Teams app

Teams アプリの使用を開始するだけの場合は、「 Microsoft teams アプリにタブを追加する」を参照してください。If you're just getting started with Teams apps, see Add tabs to Microsoft Teams apps. アプリ Studio を使用して、アプリマニフェストをすばやく開発することもできます。You can also use App Studio to quickly develop your app manifest.

タブを使用してアプリをインストールした後、コンポーネントを使用する準備ができたら、アプリが Microsoft Graph にアクセスするための適切なアクセス許可を持っていることを確認する必要があります。After you install your app with a tab, and you're ready to use the components, you need to make sure that your app has the right permissions to access Microsoft Graph. 必要なアクセス許可を使用してアプリを構成するには、次のようにします。To configure your app with the necessary permissions:

  1. ドメイン名を取得するRetrieve your domain name
  2. 新しいアプリの登録を作成するCreate a new app registration
  3. アプリケーションのアクセス許可を付与するGrant your application permission

[ API へのアクセスの追加] ページに適切な権限を追加することが重要です。It's important to add the right permission on the Add API access page. 必要なコンポーネントに応じて、管理者がアクセス許可を追加して承認する必要があります。You will need an administrator to add and approve the permissions, depending on which component you need.

ヒント: 追加するアクセス許可がわからない場合は、各コンポーネントのドキュメントを参照してください。Tip: If you're not sure what permissions to add, see the documentation for each component.

暗黙的な許可フローを有効にするEnable implicit grant Flow

暗黙的な許可フローを有効にしてください。これは、クライアント側からトークンを要求する web アプリの要件です。Make sure to enable implicit grant flow; this is a requirement for web apps that request tokens from the client side. Azure Portal では、アプリの登録を管理するときに、マニフェストを編集してに変更し oauth2AllowImplicitFlow true ます。In the Azure Portal, when managing your app registration, edit the manifest and change oauth2AllowImplicitFlow to true.

ポップアップページを作成するCreate the popup page

Teams の資格情報を使用してサインインするには、Teams アプリがポップアップで開く URL を指定する必要があります。これは、認証フローに従います。In order to sign in with your Teams credentials, you need to provide a URL that the Teams app will open in a popup, which will follow the authentication flow. この URL は、ドメイン内に存在する必要があり、メソッドを呼び出す必要があり TeamsProvider.handleAuth(); ます。This URL needs to be in your domain, and it needs to call the TeamsProvider.handleAuth(); method. このページで実行する必要があるのは、これだけです。That's the only thing that this page needs to do. 例:For example:

<script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>

<script>
  mgt.TeamsProvider.handleAuth();
</script>

または、認証ポップアップページで参照されているモジュールを使用します。or via a module referenced in your auth popup page:

import * as MicrosoftTeams from "@microsoft/teams-js/dist/MicrosoftTeams";
import {Providers, TeamsProvider} from '@microsoft/mgt';

TeamsProvider.microsoftTeamsLib = MicrosoftTeams;
TeamsProvider.handleAuth();

リダイレクト Uri を構成するConfigure redirect URIs

このページを web サイトに公開した後、プロパティで URL を使用する必要があり auth-popup-url/authPopupUrl ます。After you publish this page on your website, you need to use the URL in the auth-popup-url/authPopupUrl property. この URL は、Azure AD ポータルのアプリ構成で有効なリダイレクト URI として構成する必要もあります。This URL also needs to be configured as a valid redirect URI in your app configuration in the Azure AD portal.