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>

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