Azure Active Directory B2C にシングルページ アプリケーションを登録する
アプリケーションが 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 アプリケーションの登録
Azure portal にサインインします。
複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを選択し、[ディレクトリとサブスクリプション] メニューからお使いの Azure AD B2C テナントに切り替えます。
Azure portal で、 [Azure AD B2C] を検索して選択します。
[アプリの登録] を選択し、 [新規登録] を選択します。
アプリケーションの名前を入力します。 たとえば、spaapp1 のように入力します。
[サポートされているアカウントの種類] で、 [Accounts in any identity provider or organizational directory (for authenticating users with user flows)]((ユーザー フローを使用してユーザーを認証するための) 任意の ID プロバイダーまたは組織のディレクトリのアカウント) を選択します
[リダイレクト 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-oidcURL にリダイレクトされた場合に除外される可能性があります。
[アクセス許可] で、 [openid と offline_access アクセス許可に対して管理者の同意を付与します] チェック ボックスをオンにします。
[登録] を選択します。
暗黙的フローの有効化
SPA アプリで MSAL.js 1.3 またはそれ以前の暗黙的な許可フローを備えたバージョンを使っている場合、またはユーザー フローやカスタム ポリシーをテストするために https://jwt.ms/ アプリを構成している場合は、アプリの登録で暗黙的な許可フローを有効にする必要があります。
左側のメニューの [管理] セクションで、 [認証] を選択します。
[暗黙的な許可およびハイブリッド フロー] で、[アクセス トークン (暗黙的なフローに使用)] と [ID トークン (暗黙的およびハイブリッド フローに使用)] の両方のチェック ボックスをオンにします。
[保存] を選択します。
アプリで MSAL.js 2.0 以降を使っている場合、MSAL.js 2.0 以降では PKCE による承認コード フローがサポートされているため、暗黙的なフロー許可を有効にしないでください。
暗黙的フローからの移行
暗黙的フローを使用する既存のアプリケーションを使用している場合は、認可コード フローをサポートするフレームワーク (MSAL.js 2.0 以降など) を使用して、認可コード フローを使用するように移行することをお勧めします。
アプリの登録によって表されるすべての運用 SPA が、認可コード フローの使用を始める場合は、次のように暗黙的な許可フローの設定を無効にします。
- 左側のメニューの [管理] セクションで、 [認証] を選択します。
- [暗黙的な許可] で、[アクセス トークン] と [ID トークン] の両方のチェック ボックスをオフにします。
- [保存] を選択します。
暗黙的フローを有効 (オン) なままにしておくと、暗黙的フローを使用するアプリケーションは引き続き機能します。
次のステップ
Azure Active Directory B2C 内にユーザー フローを作成する方法について説明します。