次の方法で共有

Azure Active Directory B2C を使用して Node.js Web アプリで認証オプションを有効にする

重要

2025 年 5 月 1 日より、Azure AD B2C は新規のお客様向けに購入できなくなります。 詳細については、FAQ を参照してください。

この記事では、Node.js Web アプリケーションの Azure Active Directory B2C (Azure AD B2C) 認証エクスペリエンスを有効、カスタマイズ、および強化する方法について説明します。

開始する前に、次の記事を理解することが重要です。

カスタム ドメインの使用

カスタム ドメインを使用すると、認証 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 を使用するには、「 カスタム ドメインを有効にする」のガイダンスに従います。 プロジェクトのルート フォルダーの下で、 .env ファイルを開きます。 このファイルには、Azure AD B2C ID プロバイダーに関する情報が含まれています。

env ファイルで、次の操作を行います。

  • tenant-name.b2clogin.comのすべてのインスタンスをカスタム ドメインに置き換えます。 たとえば、 tenant-name.b2clogin.comを login.contoso.comに置き換えます。
  • tenant-name.onmicrosoft.comのすべてのインスタンスをテナント ID に置き換えます。 詳細については、「 テナント ID の使用」を参照してください。

次の構成は、変更前のアプリ設定を示しています。

#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_susi
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_passwordreset
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_edit
#B2C authority domain
AUTHORITY_DOMAIN=https://contoso.b2clogin.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint 
LOGOUT_ENDPOINT=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_susi/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

次の構成は、変更後のアプリ設定を示しています。

#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_susi
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_passwordreset
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_edit
#B2C authority domain
AUTHORITY_DOMAIN=https://login.contoso.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint 
LOGOUT_ENDPOINT=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_susi/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

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

サインイン ユーザー体験中に、アプリが特定のユーザーをターゲットにしている可能性があります。 アプリがユーザーを対象とする場合は、承認要求で、ユーザーのサインイン名を使用して login_hint クエリ パラメーターを指定できます。 Azure AD B2C によってサインイン名が自動的に設定され、ユーザーはパスワードのみを指定する必要があります。

サインイン名を事前に入力するには、次の操作を行います。

  1. カスタム ポリシーを使用している場合は、「 直接サインインの設定」の説明に従って、必要な入力要求を追加します。
  2. authCodeRequest オブジェクトを検索し、ログイン ヒントloginHint属性を設定します。

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

authCodeRequest.loginHint = "bob@contoso.com"

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

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

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

ユーザーを外部 ID プロバイダーにリダイレクトするには、次の操作を行います。

  1. 外部 ID プロバイダーのドメイン名を確認します。 詳細については、「サインインをソーシャル プロバイダーにリダイレクトする」を参照してください。
  2. authCodeRequest オブジェクトを検索し、対応するドメイン ヒントdomainHint属性を設定します。

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

authCodeRequest.domainHint = "facebook.com"

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

UI 言語を指定する

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

優先する言語を設定するには、次の操作を行います。

  1. 言語のカスタマイズを構成します。
  2. authCodeRequestオブジェクトを検索し、対応するextraQueryParameters追加パラメーターを使用して属性ui_locales設定します。

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

authCodeRequest.extraQueryParameters = {"ui_locales" : "es-es"}

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

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

カスタム ポリシーでは、カスタム クエリ文字列パラメーターを渡すことができます。 適切なユース ケースの例として、 ページコンテンツを動的に変更する場合があります。

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

  1. ContentDefinitionParameters 要素を構成します。
  2. authCodeRequest オブジェクトを検索し、対応する追加パラメーターextraQueryParameters属性を設定します。

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

authCodeRequest.extraQueryParameters = {"campaignId" : "germany-promotion"}

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

ID トークン ヒントを渡す

証明書利用者アプリケーションは、OAuth2 承認要求の一部として受信 JSON Web トークン (JWT) を送信できます。 受信トークンは、ユーザーまたは承認要求に関するヒントです。 Azure AD B2C はトークンを検証し、要求を抽出します。

認証要求に ID トークン ヒントを含めるには、次の操作を行います。

  1. カスタム ポリシーで、 ID トークン ヒント技術プロファイルを定義します。
  2. authCodeRequestオブジェクトを検索し、対応するextraQueryParameters追加パラメーターを使用して属性id_token_hint設定します。

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

authCodeRequest.extraQueryParameters = {"id_token_hint": idToken}

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)

ログの設定

MSAL ライブラリは、問題の診断に役立つログ メッセージを生成します。 アプリはログ記録を構成できます。 アプリでは、詳細レベルと、個人データと組織データをログに記録するかどうかをカスタムで制御することもできます。

MSAL ログ コールバックを作成し、ユーザーが認証に問題がある場合にログを送信する方法を提供することをお勧めします。 MSAL では、次のレベルのログの詳細が提供されます。

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

既定では、MSAL ロガーは個人または組織のデータをキャプチャしません。 ライブラリには、個人データと組織データのログ記録を有効にするオプションがあります (これを行う場合)。

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

  • logLevel では、ログ記録のレベルを指定できます。 使用可能な値: Error、 Warning、 Info、および Verbose。
  • piiLoggingEnabled により、個人データの入力が可能になります。 指定できる値: true または false。

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

 const confidentialClientConfig = {
    ...
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                console.log(message);
            },
            piiLoggingEnabled: false,
            logLevel: msal.LogLevel.Verbose,
        }
    }
};

次のステップ

MSAL.js 構成オプションの詳細を確認します。

  • Last updated on