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

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

認証オプションの概要

多くの最新の Web アプリケーションは、クライアント側のシングルページ アプリケーション ("SPA") として構築されています。 開発者は、JavaScript または SPA フレームワーク (Angular、Vue、React など) を使用してそれらを作成します。 これらのアプリケーションは 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 テナントが含まれるディレクトリを必ず使用してください。 ポータル ツールバーの [Directories + subscriptions](ディレクトリ + サブスクリプション) アイコンを選択します。

  3. [ポータルの設定] | [Directories + subscriptions](ディレクトリ + サブスクリプション) ページの [ディレクトリ名] の一覧で自分の Azure AD B2C ディレクトリを見つけて、 [切り替え] を選択します。

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

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

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

  7. [サポートされているアカウントの種類] で、 [Accounts in any identity provider or organizational directory (for authenticating users with user flows)]((ユーザー フローを使用してユーザーを認証するための) 任意の ID プロバイダーまたは組織のディレクトリのアカウント) を選択します

  8. [リダイレクト URI] で、 [Single-page application (SPA)](シングルページ アプリケーション (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 には、次の制限があります。

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

  10. [登録] を選択します。

暗黙的フローの有効化

SPA アプリにより MSAL.js 1.3 以前と暗黙の許可フローが使われている場合、またはユーザー フローやカスタム ポリシーをテストするために https://jwt.ms/ アプリを構成する場合は、アプリの登録で暗黙の許可フローを有効にする必要があります。

  1. 左側のメニューの [管理] セクションで、 [認証] を選択します。

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

  3. [保存] を選択します。

アプリで MSAL.js 2.0 以降を使っている場合、MSAL.js 2.0 以降では PKCE による承認コード フローがサポートされているため、暗黙的なフロー許可を有効にしないでください。

暗黙的フローからの移行

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

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

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

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


次のステップ

次に、ユーザーがサインアップ、サインイン、および各自のプロファイルを管理できるようにするユーザー フローの作成方法を確認します。