MSAL2 プロバイダー

  • [アーティクル]

MSAL2 プロバイダーは 、MSAL ブラウザー を使用してユーザーにサインインし、Microsoft Graph で使用するトークンを取得します。

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

MSAL2 プロバイダーと MSAL プロバイダーの違い

使用法は似ていますが、MSAL プロバイダーと MSAL2 プロバイダーは、さまざまな OAuth フローに基づいて構築されています。 MSAL プロバイダーは、OAuth2.0 暗黙的な付与フローを実装する msal.js に基づいて構築されています。 MSAL2 プロバイダーは、PKCE を使用して OAuth 2.0 承認コード フローを実装する MSAL-browser 上に構築されています。 承認コード フローは、Web アプリケーションの暗黙的な許可フローよりも安全であると見なされるため、MsalProvider 上で Msal2Provider を使用することをお勧めします。 暗黙的な許可フローに関連するセキュリティの問題の詳細については、「暗黙的な フローの欠点」を参照してください。

すべての新しいアプリケーションでは、可能な限り MSAL2 プロバイダーを使用する必要があります。

作業の開始

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 が使用されます。 省略可能です。
音声ガイダンス ログインに使用するプロンプトの種類。、、 LOGINと の間SELECT_ACCOUNTCONSENTです。 既定値は 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 渡します。

アプリが MSAL 機能を使用する場合、および他の Microsoft Graph Toolkit 機能によって Msal2Provider 公開される機能以外の機能を使用する場合は、これを使用します。 これは、フレームワークが自動的に インスタンス化して 公開 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. コードで を にMSAL2Provider置き換えますMSALProvider。

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

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

    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 ページで初期化する」を参照してください。