次の方法で共有

MSAL2 プロバイダー

  • [アーティクル]

MSAL2 プロバイダーは、PKCE を使用して OAuth 2.0 承認コード フローを実装する MSAL ブラウザー上に構築されています。 これは、ユーザーのサインインと、Microsoft Graph で使用するトークンの取得に使用されます。

詳細については、「 プロバイダー」を参照してください。

作業の開始

HTML または JavaScript で MSAL2 プロバイダーを初期化できます。

HTML ページで初期化する

新しいプロバイダーを作成する最も簡単な方法は、HTML で MSAL2 プロバイダーを初期化することです。 mgt-msal2-provider コンポーネントを使用して、クライアント ID やその他のプロパティを設定します。 これにより、すべての認証とトークンの取得に使用される新しい PublicClientApplication インスタンスが作成されます。

    <mgt-msal2-provider client-id="<YOUR_CLIENT_ID>"
                        login-type="redirect/popup"
                        scopes="user.read,people.read"
                        redirect-uri="https://my.redirect/uri"
                        authority="">
    </mgt-msal2-provider>
属性 説明
client-id 文字列クライアント ID (「アプリ/クライアント ID の作成」を参照)。 必須。
login-type redirectとpopupの間の列挙 - 既定値はredirect。 省略可能。
scopes サインイン時にユーザーが同意する必要があるスコープのコンマ区切り文字列。 省略可能。
custom-hosts Microsoft Graph クライアントが呼び出すことができるドメインのコンマ区切り文字列。 省略可能です。
authority 機関文字列 - 既定値は共通の権限です。 シングル テナントのアプリの場合は、テナント ID またはテナント名を使用します。 たとえば、https://login.microsoftonline.com/[your-tenant-contoso.com または https://login.microsoftonline.com/[your-tenant-id] などです。 省略可能です。
redirect-uri リダイレクト URI 文字列 - 既定では、現在のウィンドウ URI が使用されます。 省略可能。
音声ガイダンス SELECT_ACCOUNT、CONSENT、LOGINの間のログインに使用するプロンプトの種類。 既定値は SELECT_ACCOUNT です。 省略可能。
base-url Microsoft Graph 呼び出しに使用する Microsoft Graph エンドポイント。 サポートされている 任意の National クラウド デプロイを指定できます。 既定値は https://graph.microsoft.com です。
incremental-consent-disabled 増分同意が無効かどうかを指定します。 既定の false。 省略可能。

JavaScript で初期化する

JavaScript でプロバイダーを初期化することで、さらに多くのオプションを提供できます。

    import {Providers} from '@microsoft/mgt-element';
    import {Msal2Provider, Msal2Config, Msal2PublicClientApplicationConfig} from '@microsoft/mgt-msal2-provider';

    // initialize the auth provider globally
    Providers.globalProvider = new Msal2Provider(config: Msal2Config | Msal2PublicClientApplicationConfig);

次のセクションで説明するように、 Msal2Provider コンストラクター パラメーターは 2 つの方法で構成できます。

新しいを作成するための clientId を指定する PublicClientApplication

このオプションは、Microsoft Graph Toolkit がアプリケーション内のすべての認証を担当する場合に適しています。

interface Msal2Config {
  clientId: string;
  scopes?: string[];
  customHosts?: string[];
  authority?: string;
  redirectUri?: string;
  loginType?: LoginType; // LoginType.Popup or LoginType.Redirect (redirect is default)
  prompt?: PromptType; // PromptType.CONSENT, PromptType.LOGIN or PromptType.SELECT_ACCOUNT
  sid?: string; // Session ID
  loginHint?: string;
  domainHint?: string;
  isIncrementalConsentDisabled?: boolean, //Disable incremental consent, true by default
  options?: Configuration // msal-browser Configuration object
}

publicClientApplication プロパティに既存のPublicClientApplicationを渡します。

これは、アプリで、 Msal2Provider やその他の Microsoft Graph Toolkit 機能によって公開される機能以外の MSAL 機能を使用する場合に使用します。 これは、フレームワークが自動的にインスタンス化し、 PublicClientApplication を公開する場合に適しています。たとえば、 MSAL-angular を使用する場合です。 詳細については、Microsoft Graph Toolkit リポジトリの angular-app サンプルを参照してください。

このオプションを使用する場合は、必ず競合の機会を理解してください。 その性質上、ユーザーがサインインしたり、追加のスコープに同意したりするなどして、 Msal2Provider がセッションの状態を変更するリスクがあります。 アプリやその他のフレームワークが、これらの状態の変更に適切に対応していることを確認するか、代わりに カスタム プロバイダー を使用することを検討してください。

interface Msal2PublicClientApplicationConfig {
  publicClientApplication: PublicClientApplication;
  scopes?: string[];
  customHosts?: string[];
  authority?: string;
  redirectUri?: string;
  loginType?: LoginType; // LoginType.Popup or LoginType.Redirect (redirect is default)
  prompt?: PromptType; // PromptType.CONSENT, PromptType.LOGIN or PromptType.SELECT_ACCOUNT
  sid?: string; // Session ID
  loginHint?: string;
  domainHint?: string;
  isIncrementalConsentDisabled?: boolean, //Disable incremental consent, true by default
  options?: Configuration // msal-browser Configuration object
}

別のクラウド エンドポイントを使用する

これは、ツールキットを使用して、別の Microsoft 365 エンドポイントからデータをレンダリングする場合に使用します。

import {Providers, Msal2Provider} from '@microsoft/mgt'

const config: Msal2Config = {
  baseUrl: 'https://graph.microsoft.us', // change the base URL
  clientId: '2dfea037-xxx-c05708a1b241',
  ... // rest of the config
}

Providers.globalProvider = new Msal2Provider(config);

また：

<mgt-msal2-provider
      client-id="2dfea037-xxx-c05708a1b241"
      redirect-uri="http://localhost:3000"
      base-url="https://dod-graph.microsoft.us"
      scopes="user.read,user.read.all">
</mgt-msal2-provider>

カスタム API を呼び出すには、その API スコープを要求します。

<mgt-get resource="https://myapi.com/v1.0/api" scopes="api://CUSTOM_API_GUID/SCOPE">
  ...
</mgt-get>

または、JavaScript/Typescript を使用します。

import { prepScopes } from "@microsoft/mgt-element";

graphClient
  .api("https://myapi.com/v1.0/api")
  .middlewareOptions(prepScopes("api://CUSTOM_API_GUID/SCOPE"))
  .get();
...

カスタム ホストを使用して、さまざまなMicrosoft Entra IDセキュリティで保護されたエンドポイントを呼び出す

独自のカスタム Microsoft Entra IDセキュリティで保護されたエンドポイントを呼び出す場合は、それらのドメインを基になる Microsoft Graph クライアントに渡します。

import {Providers, Msal2Provider} from '@microsoft/mgt'

const config: Msal2Config = {
  clientId: '2dfea037-xxx-c05708a1b241',
  customHosts: ['mydomain.com'] //array of domains, not urls!
  ... // rest of the config
}

Providers.globalProvider = new Msal2Provider(config);

また：

<mgt-msal2-provider
      client-id="2dfea037-xxx-c05708a1b241"
      redirect-uri="http://localhost:3000"
      custom-hosts="mydomain.com"
      scopes="user.read,user.read.all">
</mgt-msal2-provider>

アプリ/クライアント ID の作成

アプリを登録してクライアント ID を取得する方法の詳細については、「Microsoft Entra アプリを作成する」を参照してください。

MSAL プロバイダーから MSAL2 プロバイダーへの移行

MSAL プロバイダーを使用しているアプリケーションを MSAL2 プロバイダーに移行するには、

  1. Microsoft Entra 管理センターに移動します。

  2. [ID] メニューを展開> [アプリケーション] を展開>[アプリの登録] を選択します。

  3. 移行するアプリのアプリ登録を選択します。

  4. 左側のメニューの [認証 ] に移動します。

  5. [ プラットフォームの構成] で、[ プラットフォームの追加 ] を選択し、[ シングルページ アプリケーション] を選択します。

  6. Web で現在登録されているすべてのリダイレクト URI を削除し、代わりに単一ページ アプリケーションに追加します。

  7. コードで、 MSALProvider を MSAL2Provider に置き換えます。

    JS/TS コードでプロバイダーを初期化する場合は、次の手順に従います。

    mgt-MSAL-providerの import ステートメントを に置き換えます

    import {Msal2Provider, PromptType} from '@microsoft/mgt-msal2-provider';

    MsalProvider の初期化を に置き換えます

    Providers.globalProvider = new Msal2Provider({
  clientId: 'REPLACE_WITH_CLIENTID'
  ...
})

    HTML でプロバイダーを初期化する場合は、

    <mgt-msal-provider client-id="" ... ></mgt-msal-provider>

    で

    <mgt-msal2-provider  client-id="" ... ></mgt-msal2-provider>

    詳細については、「 HTML ページで初期化する」を参照してください。