MSAL プロバイダーMSAL provider

MSAL プロバイダーは MSAL.js を使用してユーザーにサインインし、トークンを取得して Microsoft Graph で使用します。The MSAL provider uses MSAL.js to sign in users and acquire tokens to use with Microsoft Graph.

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

概要Get started

MSAL プロバイダーは、HTML または JavaScript で初期化できます。You can initialize the MSAL provider in HTML or JavaScript.

HTML ページでの初期化Initialize in your HTML page

新しいプロバイダーを作成する最も簡単な方法は、HTML で MSAL プロバイダーを初期化することです。Initializing the MSAL provider in HTML is the simplest way to create a new provider. コンポーネントを使用して mgt-msal-providerクライアント id とその他のプロパティを設定します。Use the mgt-msal-provider component to set the client-id and other properties. これにより、 UserAgentApplication すべての認証とトークンの取得で使用される新しいインスタンスが作成されます。This will create a new UserAgentApplication instance that will be used for all authentication and acquiring tokens.

<mgt-msal-provider client-id="<YOUR_CLIENT_ID>"
属性Attribute 説明Description
クライアント idclient-id String クライアント ID (「アプリ/クライアント ID の作成」を参照してください)。String client ID (see Creating an app/client ID). 必須です。Required.
ログインの種類login-type と-既定値の間の列挙体 redirect popupredirect です。Enumeration between redirect and popup - default value is redirect. 省略可能。Optional.
スコープscopes ユーザーがサインイン時に同意する必要がある範囲の、コンマ区切りの文字列。Comma separated strings for scopes the user must consent to on sign in. 省略可能。Optional.
authority Authority 文字列-既定は common authority です。Authority string - default is the common authority. シングルテナントアプリの場合は、テナント ID またはテナント名を使用します。For single-tenant apps, use your tenant ID or tenant name. たとえば、[your-tenant-name] または[your-tenant-id] などです。For example,[your-tenant-name] or[your-tenant-id]. 省略可能。Optional.
リダイレクト-uriredirect-uri リダイレクト URI 文字列-既定では、現在のウィンドウ URI が使用されます。Redirect URI string - by default the current window URI is used. 省略可能。Optional.
依存-オンdepends-on もう1つの優先度の高いプロバイダコンポーネントの要素セレクター文字列。Element selector string of another higher priority provider component. 省略可能。Optional.

JavaScript での初期化Initialize in JavaScript

JavaScript でプロバイダーを初期化することで、より多くのオプションを提供できます。You can provide more options by initializing the provider in JavaScript.

import {Providers, MsalProvider} from '@microsoft/mgt'
import {UserAgentApplication} from "msal";

Providers.globalProvider = new MsalProvider(config: MsalConfig);

MsalConfig は次のとおりです。where MsalConfig is:

interface MsalConfig {
  clientId: string;
  scopes?: string[];
  authority?: string;
  redirectUri?: string;
  loginType?: LoginType; // LoginType.Popup or LoginType.Redirect (redirect is default)
  loginHint?: string
  options?: Configuration; // msal js Configuration object

を指定する必要があり clientId ます (新しいを作成する場合 UserAgentApplication )。You must provide a clientId (to create a new UserAgentApplication).

MSAL.js の詳細と、MSAL ライブラリを初期化するときに使用できるその他のオプションについては、 Msal のドキュメントを参照してください。To learn more about MSAL.js and for additional options you can use when initializing the MSAL library, see the MSAL documentation.

アプリ/クライアント ID の作成Creating an app/client ID

アプリを登録し、クライアント ID を取得する方法の詳細については、「 アプリのクイックスタートを登録する」を参照してください。For details about how to register an app and get a client ID, see the Register an app quick start.

注: MSAL では、OAuth の暗黙的フローのみがサポートされています。Note: MSAL only supports the Implicit Flow for OAuth. Azure Portal でアプリケーションの暗黙的フローを有効にしてください (既定では有効になっていません)。Make sure to enable Implicit Flow in your application in the Azure Portal (it is not enabled by default). [ 認証] で、[ 暗黙的な付与 ] セクションを見つけて、 アクセストークンID トークンのチェックボックスをオンにします。Under Authentication, find the Implicit grant section and select the checkboxes for Access tokens and ID tokens. 共通の権限を使用するには、 任意の組織ディレクトリにアカウントを設定します。To use the common authority, set Account in any organizational directory. 特定のテナントを使用するには、 authority 初期化中にを設定します。To use a specific tenant, set the authority during initialization.