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

  • [アーティクル]

Microsoft ID プラットフォームにシングル ページ アプリケーション (SPA) を登録するには、次の手順を実行します。 登録手順は、暗黙的な許可フローをサポートする 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 のバージョンに適した手順を使用します。

リダイレクト 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 以前と暗黙的な許可フローを使用するシングル ページ アプリのリダイレクト URI を追加します。 MSAL.js 1.3 以前を使用するアプリケーションでは、承認コード フローはサポートされていません。

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

これで、シングル ページ アプリケーション (SPA) の登録が完了し、クライアントがリダイレクトされ、セキュリティ トークンが送信されるリダイレクト URI が構成されました。 ID トークンとアクセス トークンのどちらかまたは両方を選択すると、暗黙的な許可フローが有効になります。

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

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

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

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

次のステップ

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