Azure AD B2C を使って Azure Static Web アプリで認証を構成する

この記事では、Azure Static Web アプリに Azure Active Directory B2C (Azure AD B2C) 認証機能を追加する方法について説明します。 詳細については、「Azure Static Web Apps でのカスタム認証」を参照してください。

概要

OpenID Connect (OIDC) は、OAuth 2.0 を基盤にした認証プロトコルです。 OIDC を使用して、ユーザーを安全に Azure Static Web アプリにサインインさせます。 サインイン フローには、次の手順が含まれます。

  1. ユーザーが Azure Static Web アプリにアクセスして [サインイン] を選びます。
  2. Azure Static Web アプリによって認証要求が開始され、ユーザーが Azure AD B2C にリダイレクトされます。
  3. ユーザーがサインアップまたはサインインし、パスワードをリセットします。 ソーシャル アカウントを使用してサインインすることもできます。
  4. ユーザーがサインインに成功すると、Azure AD B2C によって Azure Static Web アプリに ID トークンが返されます。
  5. Azure Static Web アプリは、ID トークンを認証し、要求の内容を読み取り、セキュリティで保護されたページをユーザーに返します。

アクセス トークンが有効期限切れになった場合、またはアプリ セッションが無効になった場合、Azure Static Web アプリは新しい認証要求を開始し、ユーザーを Azure AD B2C にリダイレクトします。 Azure AD B2C SSO セッションがアクティブである場合、Azure AD B2C は、ユーザーに再度サインインを促さずにアクセス トークンを発行します。 Azure AD B2C セッションが有効期限切れまたは無効になった場合、ユーザーは再度サインインするように促されます。

前提条件

  • Premium Azure サブスクリプション。
  • アプリをまだ作成していない場合は、Azure Static Web アプリを作成する方法に関するガイダンスに従ってください。
  • Azure Static Web アプリの staticwebapp.config.json 構成ファイルについてよく理解してください。
  • Azure Static Web アプリのアプリの設定についてよく理解してください。

手順 1: ユーザー フローを構成する

ユーザーがアプリにサインインしようとすると、ユーザー フローを介した承認エンドポイントへの認証要求がアプリによって開始されます。 ユーザー フローによって、ユーザーのエクスペリエンスが定義および制御されます。 ユーザーがユーザー フローを完了すると、Azure AD B2C によってトークンが生成され、ユーザーはアプリケーションにリダイレクトされます。

ユーザー フローまたはカスタム ポリシーの作成をまだ行っていない場合は、作成します。 手順を繰り返して、次のように 3 つの個別のユーザー フローを作成します。

  • サインインと サインアップを結合したユーザー フロー (例:)susi。 このユーザー フローでは、パスワードを忘れた 場合のエクスペリエンスもサポート されています。
  • プロファイル編集 ユーザー フロー (例: edit_profile) 。
  • パスワードのリセット ユーザー フロー (例: reset_password)。

Azure AD B2C は、 B2C_1_ ユーザー フロー名の前に付加されます。 たとえば、susiB2C_1_susi になります。

手順 2: Web アプリケーションを登録する

アプリケーションが Azure AD B2C でサインインできるようにするには、Azure AD B2C ディレクトリにアプリを登録します。 登録したアプリによって、アプリと Azure AD B2C の間に信頼関係が確立されます。

アプリの登録時に、"リダイレクト URI" を指定します。 リダイレクト URI は、ユーザーが Azure AD B2C で認証を行った後、Azure AD B2C によってリダイレクトされるエンドポイントです。 アプリ登録プロセスは、アプリを一意に識別するアプリケーション ID (またはクライアント ID として知られています) を生成します。 アプリが登録されると、Azure AD B2C はアプリケーション ID とリダイレクト URI の両方を使用して認証要求を作成します。 また、トークンを安全に取得するためにアプリによって使用される、"クライアント シークレット" を作成します。

手順 2.1: アプリを登録する

アプリケーションを登録するには、次の手順に従います。

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

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

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

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

  5. [名前] には、アプリケーションの名前を入力します (例: My Azure Static web app)。

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

  7. [リダイレクト URI] で、 [Web] を選択し、URL ボックスに「https://<YOUR_SITE>/.auth/login/aadb2c/callback」と入力します。 <YOUR_SITE> を Azure Static Web アプリ名に置き換えます。 (例: https://witty-island-11111111.azurestaticapps.net/.auth/login/aadb2c/callback)。 Azure Static Web アプリのカスタム ドメインを構成した場合は、リダイレクト URI でそのカスタム ドメインを使用します。 たとえば、https://www.example.com/.auth/login/aadb2c/callback のように指定します。

  8. [アクセス許可] で、 [Grant admin consent to openid and offline access permissions](OpenID とオフラインのアクセス許可に管理者の同意を与える) チェック ボックスをオンにします。

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

  10. [概要] を選択します。

  11. アプリケーション (クライアント) ID を記録しておきます。これは、後で Web アプリケーションを構成するときに使用します。

    Screenshot of the web app Overview page for recording your web application I D.

手順 2.2: クライアント シークレットを作成する

  1. [Azure AD B2C - アプリの登録] ページで、作成したアプリケーション (例: My Azure Static web app) を選びます。
  2. 左側のメニューで、[管理][証明書とシークレット] を選択します。
  3. [新しいクライアント シークレット] を選択します。
  4. [説明] ボックスにクライアント シークレットの説明を入力します。 たとえば、clientsecret1 のようにします。
  5. [有効期限] で、シークレットが有効な期間を選択してから、 [追加] を選択します。
  6. クライアント アプリケーションのコードで使用できるように、シークレットのを記録します。 このページからの移動後は、このシークレットの値は "二度と表示されません"。 アプリケーションのコード内で、この値をアプリケーション シークレットとして使用します。

手順 3: Azure Static アプリを構成する

アプリケーションが Azure AD B2C に登録されたら、Azure Static Web アプリのアプリケーション設定内に、次のアプリケーション シークレットを作成します。 アプリケーション設定を構成するには、Azure portal または Azure CLI を使用します。 詳細については、「Azure Static Web Apps のアプリケーション設定を構成する」の記事を参照してください。

アプリ設定に次のキーを追加します。

設定名
AADB2C_PROVIDER_CLIENT_ID 手順 2.1 の Web アプリ (クライアント) ID。
AADB2C_PROVIDER_CLIENT_SECRET 手順 2.2 の Web アプリ (クライアント) シークレット。

重要

アプリケーション シークレットは機密性の高いセキュリティ資格情報です。 このシークレットを他のユーザーと共有したり、クライアント アプリケーション内で配布したり、ソース管理にチェックインしたりしないでください。

3.1 OpenID Connect ID プロバイダーを追加する

アプリ ID とシークレットを追加したら、次の手順に従って、Azure AD B2C を OpenId Connect ID プロバイダーとして追加します。

  1. authauth セクションに、OICD プロバイダーの構成ブロックとプロバイダー定義を追加します。

    {
      "auth": {
        "identityProviders": {
          "customOpenIdConnectProviders": {
            "aadb2c": {
              "registration": {
                "clientIdSettingName": "AADB2C_PROVIDER_CLIENT_ID",
                "clientCredential": {
                  "clientSecretSettingName": "AADB2C_PROVIDER_CLIENT_SECRET"
                },
                "openIdConnectConfiguration": {
                  "wellKnownOpenIdConfiguration": "https://<TENANT_NAME>.b2clogin.com/<TENANT_NAME>.onmicrosoft.com/<POLICY_NAME>/v2.0/.well-known/openid-configuration"
                }
              },
              "login": {
                "nameClaimType": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
                "scopes": [],
                "loginParameterNames": []
              }
            }
          }
        }
      }
    }
    
  2. <TENANT_NAME> を、Azure AD B2C テナント名の最初の部分に置き換えます (例: https://contoso.b2clogin.com/contoso.onmicrosoft.com)。

  3. <POLICY_NAME> を、手順 1 で作成したユーザー フローまたはカスタム ポリシーに置き換えます。

手順 4: Azure Static Web アプリを確認する

  1. /.auth/login/aadb2c に移動します。 /.auth/login は Azure Static アプリのログイン エンドポイントをポイントします。 ご利用の OpenID Connect ID プロバイダーへの aadb2c 参照。 次の URL は、Azure Static アプリのログイン エンドポイントを示しています。https://witty-island-11111111.azurestaticapps.net/.auth/login/aadb2c

  2. サインアップまたはサインイン プロセスを完了します。

  3. ブラウザー デバッガーで、次の JavaScript をコンソールで実行します。 この JavaScript コードは、サインイン ユーザーに関する情報を示します。

    async function getUserInfo() {
      const response = await fetch('/.auth/me');
      const payload = await response.json();
      const { clientPrincipal } = payload;
      return clientPrincipal;
    }
    
    await getUserInfo();
    

ヒント

ブラウザーで上記の JavaScript コードを実行できない場合は、次の URL (https://<app-name>.azurewebsites.net/.auth/me) に移動します。 <app-name> を実際の Azure Web アプリに置き換えます。

次のステップ