次の方法で共有

シングルページ アプリケーション：アプリの登録

  • [アーティクル]

Microsoft ID プラットフォームにシングル ページ アプリケーション (SPA) を登録するには、次の手順を実行します。 登録手順は、暗黙的な許可フローをサポートする MSAL.js 1.0 と、PKCE での承認コード フローをサポートする MSAL.js 2.0 で異なります。 MSAL.js 1.0 をお使いの場合は、より安全な PKCE を適用した承認コード フローを利用できるように、MSAL.js 2.0 に移行することをお勧めします。

アプリの登録を作成する

ヒント

この記事の手順は、開始するポータルによって若干異なる場合があります。

MSAL.js 1.0 ベースと MSAL.js 2.0 ベースの両方のアプリケーションで、次の手順を完了して最初のアプリ登録を作成します。

  1. Microsoft Entra 管理センターにサインインします。
  2. 複数のテナントにアクセスできる場合は、上部のメニューの [設定] アイコン を使い、[ディレクトリとサブスクリプション] メニューからアプリケーションを登録するテナントに切り替えます。
  3. [ID]>[アプリケーション]>[アプリの登録] に進み、[新規登録] を選択します。
  4. アプリケーションの [名前] を入力します。 この名前は、アプリのユーザーに表示される場合があります。また、後で変更することができます。
  5. アプリケーションでサポートされているアカウントの種類を選択します。 [リダイレクト URI] は入力しないでください。 さまざまなアカウントの種類の説明については、「アプリケーションを登録する」を参照してください。
  6. [登録] を選択して、アプリの登録を作成します。

次に、 [リダイレクト URI] を使用してアプリの登録を構成し、Microsoft ID プラットフォームがクライアントをセキュリティ トークンと共にリダイレクトする場所を指定します。 アプリケーションで使用している MSAL.js のバージョンに適した手順を使用します。

MSAL.js 2.0 以降では、暗黙的な許可フローよりも安全な、PKCE を適用した承認コード フローがサポートされている点に留意してください。 MSAL.js 1.0 をお使いの場合は、PKCE を適用した承認コード フローを利用できるように、MSAL.js 2.0 への移行をご検討ください。

リダイレクト URI: 承認コード フローを使用した MSAL.js 2.0

MSAL.js 2.0 以降を使用するアプリのリダイレクト URI を追加するには、次の手順に従います。 MSAL.js 2.0 以降では、ブラウザーのサード パーティ Cookie の制限に対応して、PKCE およびクロス オリジン リソース共有 (CORS) を使用した承認コード フローをサポートしています。 暗黙的な許可フローは、MSAL.js 2.0 以降ではサポートされていません。

  1. Microsoft Entra 管理センターで、「アプリの登録を作成する」で作成したアプリの登録を選択します。
  2. [管理] で、 [認証]>[プラットフォームを追加] の順に選択します。
  3. [Web アプリケーション] の下で、 [シングル ページ アプリケーション] タイルを選択します。
  4. [リダイレクト URI] の下で、リダイレクト URI を入力します。 [暗黙的な許可およびハイブリッド フロー] の下にあるチェック ボックスをオンにしないでください。
  5. [構成] を選択して、リダイレクト URI の追加を完了します。

これで、SPA がリダイレクト URI に登録されました。 [プラットフォームの追加] ウィンドウの [シングル ページ アプリケーション] タイルを使用してリダイレクト URI を構成すると、アプリケーションの登録は、PKCE と CORS を使用した承認コード フローをサポートします。

リダイレクト URI: 暗黙的なフローを使用した MSAL.js 1.0

次の手順に従って、MSAL.js 1.3 以前と暗黙的な許可フローを使用する SPA のリダイレクト URI を追加します。 MSAL.js 1.3 以前を使用するアプリケーションでは、承認コード フローはサポートされていません。

  1. Microsoft Entra 管理センターで、「アプリの登録を作成する」で作成したアプリの登録を選択します。
  2. [管理] で、 [認証]>[プラットフォームを追加] の順に選択します。
  3. [Web アプリケーション] の下で、 [シングル ページ アプリケーション] タイルを選択します。
  4. [リダイレクト URI] の下で、リダイレクト URI を入力します。
  5. [暗黙的な許可およびハイブリッド フロー] を有効にします。
    • アプリケーションでユーザーがサインインする場合は、 [ID トークン] を選択します。
    • アプリケーションでも保護された Web API を呼び出す必要がある場合は、 [アクセス トークン] を選択します。 これらのトークンの種類の詳細については、ID トークンとアクセス トークンに関するページを参照してください。
  6. [構成] を選択して、リダイレクト URI の追加を完了します。

これで、SPA がリダイレクト URI に登録されました。 ID トークンとアクセス トークンのどちらかまたは両方を選択すると、アプリケーションの登録で暗黙的な許可フローがサポートされます。

承認フローについての注意事項

既定では、SPA プラットフォーム構成を使用して作成されたアプリの登録によって、承認コード フローが有効になります。 このフローを利用するには、アプリケーションで MSAL.js 2.0 以降を使用する必要があります。

MSAL.js 1.3 を使用する SPA は、暗黙的な許可フローに限定されます。 現在の OAuth 2.0 のベスト プラクティスでは、SPA に対して、暗黙的なフローではなく承認コード フローを使用することを推奨しています。 また、有効期間が制限された更新トークンを使用することも、Safari ITP のような最新のブラウザーの Cookie プライバシー制限にアプリケーションを適合させるのに役立ちます。

アプリの登録で表示されるすべての運用 SPA が MSAL.js 2.0 と承認コード フローを使用している場合は、Microsoft Entra 管理センターのアプリの登録の [認証] ウィンドウで [暗黙的な許可] 設定をオフにします。 MSAL.js 1.x を使用している SPA がまだある場合は、暗黙的フローを有効 (オン) のままにします。

次のステップ

アプリのコード構成で作成したアプリの登録を使用するように、アプリのコードを構成します。