Azure Active Directory B2C にシングルページ アプリケーションを登録する

アプリケーションが Azure Active Directory B2C (Azure AD B2C) と対話できるようにするには、管理するテナントにアプリケーションを登録する必要があります。 このガイドでは、Azure portal を使用してシングルページ アプリケーション ("SPA") を登録する方法について説明します。

認証オプションの概要

最新の Web アプリケーションの多くは、クライアント側のシングルページ アプリケーション ("SPA") として構築されています。 開発者は、JavaScript または Angular、Vue、React などの SPA フレームワークを使用して記述します。 これらのアプリケーションは Web ブラウザーで実行され、その認証には、従来のサーバー側 Web アプリケーションとは異なる特性があります。

Azure AD B2C には、シングルページ アプリケーションがユーザーをサインインさせ、バックエンド サービスまたは Web API にアクセスするためのトークンを取得できるようにする 2 つの オプションが用意されています。

承認コード フロー (PKCE を使用)

OAuth 2.0 認証コード フロー (PKCE を使用) を使用すると、アプリケーションは 認証 コードを ID トークンと交換して、保護された API を呼び出すために必要な認証されたユーザーと アクセス トークンを表すことができます。 さらに、 更新トークンが 返され、ユーザーに代わってリソースへの長期的なアクセスが提供されます。これらのユーザーとの対話は必要ありません。

これは 推奨されるアプローチです 。 有効期間が制限された更新トークンを使用すると、アプリケーションは Safari ITP などの 最新のブラウザー Cookie のプライバシー制限に適応できます。

このフローを利用するために、アプリケーションでは、 MSAL.jsなど、それをサポートする認証ライブラリを使用できます。

暗黙的な許可のフロー

MSAL.js 1.x などの一部のライブラリでは、暗黙的な許可フローのみがサポートされるか、暗黙的フローを使用するようにアプリケーションが実装されます。 このような場合、Azure AD B2C では OAuth 2.0 の暗黙的フローがサポートされます。 暗黙的な許可フローにより、アプリケーションは承認エンドポイントから ID と アクセス トークンを取得できます。 承認コード フローとは異なり、暗黙的な許可フローは 更新トークンを返しません。

この認証フローには、Electron や React-Native などのクロスプラットフォーム JavaScript フレームワークを使用するアプリケーション シナリオは含まれません。 これらのシナリオでは、ネイティブ プラットフォームとの対話のための追加の機能が必要です。

[前提条件]

• Azure サブスクリプションをお持ちでない場合は、開始する前に 無料アカウント を作成してください。

• Azure AD B2C テナントがない場合は、ここで作成します。 既存の Azure AD B2C テナントを使用できます。

SPA アプリケーションの登録

1. Azure portal にサインインします。

2. 複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを選択し、[ディレクトリとサブスクリプション] メニューからお使いの Azure AD B2C テナントに切り替えます。

3. Azure portal で、 [Azure AD B2C] を検索して選択します。

4. [アプリの登録] を選択し、[新しい登録] を選択します。

5. アプリケーションの名前を入力します。 たとえば、 spaapp1 です。

6. [ サポートされているアカウントの種類] で、任意の ID プロバイダーまたは組織のディレクトリで [アカウント] を選択します (ユーザー フローを使用してユーザーを認証する場合)

7. [ リダイレクト URI] で [ シングルページ アプリケーション (SPA)] を選択し、URL テキスト ボックスに「 https://jwt.ms 」と入力します。

   リダイレクト URI は、承認サーバー (この場合は Azure AD B2C) がユーザーとの対話を完了した後にユーザーを送信するエンドポイントです。 また、リダイレクト URI エンドポイントは、承認が成功すると、アクセス トークンまたは承認コードを受け取ります。 実稼働アプリケーションでは、通常は https://contoso.com/auth-response などの、お使いのアプリが実行されているパブリック アクセスが可能なエンドポイントです。 このガイドのようなテスト目的で、トークンのデコードされた内容を表示する Microsoft 所有の Web アプリケーションである https://jwt.ms に設定できます (トークンの内容がブラウザーから離れることはありません)。 アプリの開発中に、アプリケーションがローカルでリッスンするエンドポイント ( http://localhost:5000など) を追加できます。 お使いの登録済みアプリケーションでは、いつでもリダイレクト URI を追加したり、変更したりすることができます。

   リダイレクト URI には、次の制限があります。

   • 応答 URL は、httpsを使用しない限り、スキーム localhostで始まる必要があります。
   • 応答 URL では大文字と小文字が区別されます。 大文字と小文字の区別は、実行中のアプリケーションの URL パスの場合と一致している必要があります。 たとえば、アプリケーションがパス .../abc/response-oidcの一部として含まれている場合は、応答 URL に .../ABC/response-oidc を指定しないでください。 Web ブラウザーでは大文字と小文字を区別を区別するものとしてパスが処理されるため、.../abc/response-oidc に関連付けられている cookie は、大文字と小文字が一致しない .../ABC/response-oidc URL にリダイレクトされた場合に除外される可能性があります。

8. 許可の下にある、「openid」と「offline_access」権限に対する管理者の同意を付与する」 チェックボックスを選択します。

9. 登録 を選択します。

暗黙的な許可フローを有効にする

暗黙的な許可フローは、MSAL.jsバージョン 1.3 以前のバージョンを使用している場合、またはアプリ登録を使用してテスト目的でユーザー フローを テストする場合の 2 つの理由で有効にすることができます。

アプリの暗黙的な許可フローを有効にするには、次の手順を使用します。

1. 作成したアプリの登録を選びます。

2. [管理] で、 [認証] を選択します。

3. [暗黙的な許可およびハイブリッド フロー] で、[アクセス トークン (暗黙的なフローに使用)] と [ID トークン (暗黙的およびハイブリッド フローに使用)] の両方のチェック ボックスをオンにします。

4. 保存 を選択します。

暗黙的な許可のフローからの移行

暗黙的フローを使用する既存のアプリケーションがある場合は、PKCE をサポートするフレームワーク ( MSAL.js 2.0 以降など) を使用して、PKCE で承認コード フローを使用するように移行することをお勧めします。

アプリ登録によって表されるすべての運用 SPA が承認コード フローの使用を開始したら、次のように暗黙的な許可フロー設定を無効にします。

1. 左側のメニューで、管理の下にある認証を選択します。
2. [ 暗黙的な許可] で、[ アクセス トークン ] と [ ID トークン ] の両方のチェック ボックスをオフにします。
3. 保存 を選択します。

暗黙的フローを有効 (オン) のままにすると、暗黙的フローを使用するアプリケーションは引き続き機能します。

次のステップ

Azure Active Directory B2C でユーザー フローを作成する方法について説明します。