チュートリアル: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 など) を使用できます。

シングルページ アプリケーション認証

暗黙的な許可のフロー

  • OAuth 2.0 暗黙的フローMSAL.js 1.x などの一部のライブラリでは、暗黙的な許可フローのみがサポートされます。 暗黙的な許可フローでは、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. [サポートされているアカウントの種類] で、 [Accounts in any identity provider or organizational directory (for authenticating users with user flows)]((ユーザー フローを使用してユーザーを認証するための) 任意の ID プロバイダーまたは組織のディレクトリのアカウント) を選択します

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

    リダイレクト URI とは、ユーザーが承認サーバー (この場合は Azure AD B2C) とのやり取りが完了したときにユーザーが送信される、また承認が成功したときにアクセス トークンまたは認証コードが送信されるエンドポイントです。 実稼働アプリケーションでは、通常は 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 にリダイレクトされた場合に除外される可能性があります。
  8. [アクセス許可] で、 [openid と offline_access アクセス許可に対して管理者の同意を付与します] チェック ボックスをオンにします。

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

暗黙的フローの有効化

暗黙的フローを使用する場合は、アプリの登録で暗黙的な許可フローを有効にする必要があります。

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

暗黙的フローからの移行

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

アプリの登録によって表される、すべての運用シングルページ アプリケーションが認可コード フローを使用している場合は、暗黙的な許可フローの設定を無効にします。

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

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


次のステップ

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