Azure Active Directory B2C を使用して React アプリケーションで認証オプションを構成する

[アーティクル]
01/11/2024

この記事では、React シングルページアプリケーション (SPA) の Azure Active Directory B2C (Azure AD B2C) 認証エクスペリエンスをカスタマイズおよび拡張できる方法について説明します。開始する前に、React SPA での認証の構成または独自の React SPA での認証の有効化に関する記事の内容をよく理解しておいてくだささい。

次の 2 つの方法で、MSAL.js を使用してユーザーをサインさせるようにシングルページアプリケーションを構成することができます。

ポップアップウィンドウ: 認証はポップアップウィンドウで行われ、アプリケーションの状態は保持されます。認証中にユーザーをアプリケーションページから移動させたくない場合は、この方法を使用します。 Internet Explorer のポップアップウィンドウには既知の問題があります。
- ポップアップウィンドウでサインインするには、loginPopup メソッドを使用します。
- ポップアップウィンドウでサインアウトするには、logoutPopup メソッドを使用します。
リダイレクト: ユーザーは認証フローを完了するために Azure AD B2C にリダイレクトされます。ユーザーのブラウザーに制約またはポリシーがあり、ポップアップウィンドウが無効になっている場合は、この方法を使用します。
- リダイレクトでサインインするには、loginRedirect メソッドを使用します。
- リダイレクトでサインアウトするには、logoutRedirect メソッドを使用します。

次のサンプルは、サインインとサインアウトの方法を示しています。

ポップアップ
リダイレクト

// src/components/NavigationBar.jsx
instance.loginPopup(loginRequest)
            .catch((error) => console.log(error))

instance.logoutPopup({ postLogoutRedirectUri: "/", mainWindowRedirectUri: "/" })

// src/components/NavigationBar.jsx
instance.loginRedirect(loginRequest)

instance.logoutRedirect({ postLogoutRedirectUri: "/" })

カスタムドメインの使用

カスタムドメインを使用すると、認証 URL を完全にブランド化できます。ユーザーの観点からは、認証プロセスの間、ユーザーは Azure AD B2C b2clogin.com ドメイン名にリダイレクトされるのではなく、ドメインにとどまります。

URL 内の "b2c" へのすべての参照を削除するために、認証要求 URL の B2C テナント名 contoso.onmicrosoft.com をテナント ID GUID に置換することもできます。たとえば、https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ を https://account.contosobank.co.uk/<tenant ID GUID>/ に変更できます。

認証 URL でテナント ID にカスタムドメインを使用する場合は、カスタムドメインの有効化に関するガイダンスに従ってください。 src/authConfig.js MSAL 構成オブジェクトを開き、カスタムドメイン名とテナント ID を使用するように authorities と knownAuthorities を変更します。

次の JavaScript は、変更前の MSAL 構成オブジェクトを示しています。

const msalConfig = {
    auth: {
      ...
      authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/B2C_1_susi",
      knownAuthorities: ["fabrikamb2c.b2clogin.com"],
      ...
    },
  ...
}

次の JavaScript は、変更後の MSAL 構成オブジェクトを示しています。

export const b2cPolicies = {
    names: {
        signUpSignIn: "b2c_1_susi",
        forgotPassword: "b2c_1_reset",
        editProfile: "b2c_1_edit_profile"
    },
    authorities: {
        signUpSignIn: {
            authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/b2c_1_susi",
        },
        forgotPassword: {
            authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/b2c_1_reset",
        },
        editProfile: {
            authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/b2c_1_edit_profile"
        }
    },
    authorityDomain: "custom.domain.com"
}

サインインユーザー体験中に、アプリが特定のユーザーをターゲットにする場合があります。アプリがユーザーを対象とする場合は、認証要求にユーザーのサインイン名を含む login_hint クエリパラメーターを指定できます。 Azure AD B2C によってサインイン名が自動的に入力されるので、ユーザーはパスワードを入力するだけで済みます。

サインイン名を事前入力するには、次の手順を実行します。

カスタムポリシーを使用する場合は、「直接サインインの設定」の説明に従って、必要な入力要求を追加します。
既存の PopupRequest または RedirectRequest MSAL 構成オブジェクトを作成または使用します。
対応するサインインヒントを使用して loginHint 属性を設定します。

次のコードスニペットは、サインインヒントパラメーターを渡す方法を示しています。属性値として bob@contoso.com が使用されます。

ポップアップ
リダイレクト

// src/components/NavigationBar.jsx
loginRequest.loginHint = "bob@contoso.com";
instance.loginPopup(loginRequest);

// src/components/NavigationBar.jsx
loginRequest.loginHint = "bob@contoso.com"; 
instance.loginRedirect(loginRequest);

ID プロバイダーを事前に選択する

Facebook、LinkedIn、Google などのソーシャルアカウントを含むようにアプリケーションのサインインプロセスを構成した場合は、domain_hint パラメーターを指定できます。このクエリパラメーターは、サインインに使用する必要があるソーシャル ID プロバイダーに関するヒントを Azure AD B2C に提供します。たとえば、アプリケーションで domain_hint=facebook.com を指定した場合、サインインフローで Facebook のサインインページに直接移動します。

外部 ID プロバイダーにユーザーをリダイレクトするには、以下を実行します。

外部 ID プロバイダーのドメイン名を確認します。詳細については、「サインインをソーシャルプロバイダーにリダイレクトする」を参照してください。
既存の PopupRequest または RedirectRequest MSAL 構成オブジェクトを作成または使用します。
対応するドメインヒントを使用して domainHint 属性を設定します。

次のコードスニペットは、ドメインヒントパラメーターを渡す方法を示しています。属性値として facebook.com が使用されます。

ポップアップ
リダイレクト

// src/components/NavigationBar.jsx
loginRequest.domainHint = "facebook.com";
instance.loginPopup(loginRequest);

loginRequest.domainHint = "facebook.com";
instance.loginRedirect(loginRequest);

UI 言語を指定する

Azure AD B2C の言語のカスタマイズを使用すると、ユーザーフローで、顧客のニーズに合わせてさまざまな言語に対応できます。詳細については、言語のカスタマイズに関する記事を参照してください。

優先する言語を設定するには、次のようにします。

言語のカスタマイズを構成します。
extraQueryParameters 属性を持つ既存の PopupRequest または RedirectRequest MSAL 構成オブジェクトを作成または使用します。
対応する言語コードが含まれる ui_locales パラメーターを、extraQueryParameters 属性に追加します。

次のコードスニペットは、ドメインヒントパラメーターを渡す方法を示しています。属性値として es-es が使用されます。

ポップアップ
リダイレクト

// src/components/NavigationBar.jsx
loginRequest.extraQueryParameters = {"ui_locales" : "es-es"};
instance.loginPopup(loginRequest);

loginRequest.extraQueryParameters = {"ui_locales" : "es-es"};
instance.loginRedirect(loginRequest);

カスタムクエリ文字列パラメーターを渡す

カスタムポリシーを利用するとき、カスタムクエリ文字列パラメーターを渡すことができます。ページコンテンツを動的に変化させるときにお勧めです。

カスタムクエリ文字列パラメーターを渡すには、次の手順に従います。

ContentDefinitionParameters 要素を構成します。
extraQueryParameters 属性を持つ既存の PopupRequest または RedirectRequest MSAL 構成オブジェクトを作成または使用します。
campaignId などのカスタムクエリ文字列パラメーターを追加します。パラメーターの値を設定します。

次のコードスニペットは、カスタムクエリ文字列パラメーターを渡す方法を示しています。属性値として germany-promotion が使用されます。

ポップアップ
リダイレクト

// src/components/NavigationBar.jsx
loginRequest.extraQueryParameters = {"campaignId": 'germany-promotion'};
instance.loginPopup(loginRequest);

loginRequest.extraQueryParameters = {"campaignId": 'germany-promotion'};
instance.loginRedirect(loginRequest);

ID トークンヒントを渡す

証明書利用者アプリケーションからは、OAuth2 認可要求の一部としてインバウンド JSON Web トークン (JWT) を送信できます。インバウンドトークンは、ユーザーまたは認可要求に関するヒントです。 Azure AD B2C によってトークンが検証された後、クレームが抽出されます。

認証要求に ID トークンヒントを含めるには、次のようにします。

カスタムポリシーで、ID トークンヒントの技術プロファイルを定義します。
extraQueryParameters 属性を持つ既存の PopupRequest または RedirectRequest MSAL 構成オブジェクトを作成または使用します。
ID トークンを格納する、対応する変数が含まれる id_token_hint パラメーターを追加します。

次のコードスニペットは、ID トークンヒントを定義する方法を示しています。

ポップアップ
リダイレクト

// src/components/NavigationBar.jsx
loginRequest.extraQueryParameters = {"id_token_hint": idToken};
instance.loginPopup(loginRequest);

loginRequest.extraQueryParameters = {"id_token_hint": idToken};
instance.loginRedirect(loginRequest);

ログの構成

MSAL ライブラリでは、問題の診断に役立つログメッセージが生成されます。アプリでログを構成できます。また、このアプリでは、詳細なレベルや、個人データと組織データのどちらを記録するかをカスタムコントロールできます。

ユーザーが認証の問題を抱えている場合は、MSAL ログコールバックを作成して、ユーザーがログを送信できるようにすることを推奨します。 MSAL では、以下のレベルのログ記録の詳細が提供されます。

エラー: 問題が発生し、エラーが生成されたことを示します。このレベルは、問題をデバッグおよび特定するために使用されます。
警告: 必ずしもエラーや障害があったわけではありませんが、診断や問題を特定するための情報です。
情報: MSAL は、情報提供を目的としたイベントを記録しますが、必ずしもデバッグを目的としたものではありません。
詳細: 既定のレベルです。 MSAL では、ライブラリの動作の詳細がログに記録されます。

既定では、MSAL ロガーによって、個人または組織のデータはキャプチャされません。ライブラリには、個人と組織のデータをログ記録可能にした場合に、そのログ記録を有効にするオプションが用意されています。

MSAL ログ記録を構成するには、src/authConfig.js で次のキーを構成します。

loggerCallback はロガーコールバック関数です。
logLevel では、ログ記録のレベルを指定できます。使用できる値: Error、Warning、Info、および Verbose。
piiLoggingEnabled では、個人データの入力を有効にします。指定できる値: true または false。

次のコードスニペットでは、MSAL ログを構成する方法を示します。

export const msalConfig = {
  ...
  system: {
    loggerOptions: {
        loggerCallback: (logLevel, message, containsPii) => {  
            console.log(message);
          },
          logLevel: LogLevel.Verbose,
          piiLoggingEnabled: false
      }
  }
  ...
}

次の手順

詳細情報: MSAL.js の構成オプション。

Azure Active Directory B2C を使用して React アプリケーションで認証オプションを構成する

サインインとサインアウトの動作

カスタム ドメインの使用

サインイン名を事前入力する