JavaScript 用の MSAL ライブラリを使用すると、クライアント側の JavaScript アプリケーションは、Microsoft Entra IDの職場および学校アカウント、Microsoft個人アカウント (MSA) とソーシャル ID プロバイダー (Facebook、Google、LinkedIn、Microsoft アカウントなど) を使用して、Azure AD を使用してユーザーを認証できます。B2C サービス。 また、アプリがトークンを取得して、Microsoft GraphなどのMicrosoft Cloud サービスにアクセスすることもできます。
@azure/msal-browser パッケージでは、PKCE を使用した OAuth 2.0 承認コード フローを使用した JavaScript シングルページ アプリケーションでの認証が有効になります。 暗黙的なフローはサポートされていません。 現在のバージョンは v5.x MSAL.js です。 古いバージョンを使用している場合は、アップグレードの 移行ガイド を参照してください。
Prerequisites
@azure/msal-browserは、 Single-Page アプリケーション のシナリオで使用することを意図しています。@azure/msal-browserを使用する前に、構成の有効なを取得し、アプリがリダイレクト トラフィックを受け入れるルートを登録するには、Microsoft Entra IDにclientIdを登録する必要があります。
主要な機能
MSAL Browser には、シングルページ アプリケーションに対して次の機能が用意されています。
- ポップアップ フローまたはリダイレクト フローを使用してユーザーをサインインさせる
- キャッシュから、または更新を介してトークンをサイレントモードで取得する
- Cross-Origin-Opener-Policy（COOP）ポップアップフローのサポート
- モデル コンテキスト プロトコル (MCP) 認証
- プラットフォーム ブローカー (WAM) を介したデバイス バインド トークン
- localStorage 内の AES-GCM で暗号化されたトークンキャッシュ
- 所有証明 (PoP) トークン
- タブとアプリケーション間でのシングル サインオン
- Microsoft 365 アプリ向けの入れ子式アプリ認証 (NAA)
Installation
npm経由
npm install @azure/msal-browser
Samples
msal-browser-samples フォルダーには、ライブラリのサンプル アプリケーションが含まれています。
サンプルを実行する手順の詳細については、VanillaJSTestApp2.0 フォルダーの README.md ファイル を参照してください。
チュートリアルに基づくより高度なサンプルについては、GitHubのAzureサンプル領域を参照してください。
- Express.js Web API を呼び出す JavaScript SPA
- On-Behalf-Of フローを使用して Express.js Web API 経由で Microsoft Graph を呼び出す JavaScript SPA
- Azure App ServiceとAzure Storageのデプロイ に関するチュートリアル
フレームワークラッパー
Angular や React などのフレームワークを使用している場合は、ラッパー ライブラリの 1 つを使用することに興味があるかもしれません。
- Angular:
@azure/msal-angular(現在: v5.1.1) - React:
@azure/msal-react(現在: v5.0.6)