次の方法で共有


シングルページ アプリケーション:コード構成

ご利用のシングルページ アプリケーション (SPA) のコードを構成する方法について説明します。

シングルページ アプリをサポートする Microsoft ライブラリ

次の Microsoft ライブラリはシングルページ アプリをサポートしています。

言語/フレームワーク プロジェクト
GitHub
Package 取得
started
ユーザーのサインイン Web API へのアクセス 一般提供 (GA) または
パブリック プレビュー1
Angular MSAL Angular v22 msal-angular クイックスタート ライブラリでは、ユーザー サインインの ID トークンを要求できます。 ライブラリでは、保護された Web API のアクセス トークンを要求できます。 GA
Angular MSAL Angular3 msal-angular ライブラリでは、ユーザー サインインの ID トークンを要求できます。 ライブラリでは、保護された Web API のアクセス トークンを要求できます。 GA
AngularJS MSAL AngularJS3 msal-angularjs ライブラリでは、ユーザー サインインの ID トークンを要求できます。 ライブラリでは、保護された Web API のアクセス トークンを要求できます。 パブリック プレビュー
JavaScript MSAL.js v22 msal-browser チュートリアル ライブラリでは、ユーザー サインインの ID トークンを要求できます。 ライブラリでは、保護された Web API のアクセス トークンを要求できます。 GA
JavaScript MSAL.js 1.03 msal-core ライブラリでは、ユーザー サインインの ID トークンを要求できます。 ライブラリでは、保護された Web API のアクセス トークンを要求できます。 GA
React MSAL React2 msal-react クイックスタート ライブラリでは、ユーザー サインインの ID トークンを要求できます。 ライブラリでは、保護された Web API のアクセス トークンを要求できます。 GA

1 オンライン サービスのユニバーサル ライセンス条項は、"パブリック プレビュー" のライブラリに適用されます。

2 PKCE のみを使用した認証コード フロー (推奨)。

3暗黙的な許可フロー のみ (非推奨)。

アプリケーションのコード構成

MSAL ライブラリでは、ライブラリの初期化中にアプリケーションの登録情報が構成として渡されます。

import * as Msal from "@azure/msal-browser"; // if using CDN, 'Msal' will be available in global scope

// Configuration object constructed.
const config = {
    auth: {
        clientId: 'your_client_id'
    }
};

// create PublicClientApplication instance
const publicClientApplication = new Msal.PublicClientApplication(config);

構成可能なオプションの詳細については、MSAL.js を使用したアプリケーションの初期化に関する記事を参照してください。

次のステップ

このシナリオの次の記事であるサインインとサインアウトに関する記事に進みます。