Azure Active Directory B2C を使用して Node.js Web API で認証を有効にする

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

この記事では、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 によってサインイン名が自動的に入力されるので、ユーザーはパスワードを入力するだけで済みます。

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

カスタムポリシーを使用している場合は、直接サインインの設定に関する記事の説明に従って、必要な入力要求を追加します。
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 プロバイダーにユーザーをリダイレクトするには、以下を実行します。

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

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

authCodeRequest.domainHint = "facebook.com"

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

UI 言語を指定する

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

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

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

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

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

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

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

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

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

ContentDefinitionParameters 要素を構成します。
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 トークンヒントを含めるには、次のようにします。

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

次のコードスニペットは、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 の構成オプションの詳細を確認します。

Azure Active Directory B2C を使用して Node.js Web API で認証を有効にする

カスタム ドメインの使用

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