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

2025-05-06

重要

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

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

[前提条件]

Angular SPA での認証の構成または独自の Angular SPA での認証の有効化に関する記事を理解してください。

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

ポップアップウィンドウ: 認証はポップアップウィンドウで行われ、アプリケーションの状態は保持されます。認証時にユーザーがアプリケーションページから離れたくない場合は、この方法を使用します。ただし、Internet Explorer のポップアップウィンドウには既知の問題があります。
- ポップアップウィンドウでサインインするには、 src/app/app.component.ts クラスで loginPopup メソッドを使用します。
- src/app/app.module.ts クラスで、interactionType属性を InteractionType.Popup に設定します。
- ポップアップウィンドウでサインアウトするには、 src/app/app.component.ts クラスで logoutPopup メソッドを使用します。サインアウトが完了した後、要求の一部としてlogoutPopup渡すことで、メインウィンドウを別のページ (ホームページやサインインページなど) にリダイレクトするようにmainWindowRedirectUriを構成することもできます。
リダイレクト: ユーザーは、認証フローを完了するために Azure AD B2C にリダイレクトされます。ポップアップウィンドウが無効になっているブラウザーの制約またはポリシーがユーザーにある場合は、この方法を使用します。
- リダイレクトを使用してサインインするには、 src/app/app.component.ts クラスで loginRedirect メソッドを使用します。
- src/app/app.module.ts クラスで、interactionType属性を InteractionType.Redirect に設定します。
- リダイレクトを使用してサインアウトするには、 src/app/app.component.ts クラスで logoutRedirect メソッドを使用します。 postLogoutRedirectUri設定して、サインアウト後にリダイレクトする URI を構成します。この URI は、アプリケーション登録のリダイレクト URI として追加する必要があります。

次の例では、サインインしてサインアウトする方法を示します。

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

//src/app/app.component.ts
login() {
  if (this.msalGuardConfig.authRequest){
    this.authService.loginPopup({...this.msalGuardConfig.authRequest} as PopupRequest);
  } else {
    this.authService.loginPopup();
  }
}

logout() { 
  this.authService.logoutPopup({
    mainWindowRedirectUri: '/',
  });
}

//src/app/app.component.ts
login() {
  if (this.msalGuardConfig.authRequest){
    this.authService.loginRedirect({...this.msalGuardConfig.authRequest} as RedirectRequest);
  } else {
    this.authService.loginRedirect();
  }
}

logout() { 
  this.authService.logoutRedirect({
    postLogoutRedirectUri: 'http://localhost:4200'
  });
}

MSAL Angular ライブラリには、対話型サインイン (ユーザーがサインインボタンを選択する場所)、MSAL Guard、MSAL Interceptor の 3 つのサインインフローがあります。 MSAL Guard と MSAL Interceptor の構成は、ユーザーが有効なアクセストークンなしで保護されたリソースにアクセスしようとしたときに有効になります。このような場合、MSAL ライブラリはユーザーに強制的にサインインさせます。

次のサンプルでは、ポップアップウィンドウまたはリダイレクトを使用してサインインするように MSAL Guard と MSAL Interceptor を構成する方法を示します。

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

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
    }
  },
  {
    interactionType: InteractionType.Popup,
    protectedResourceMap: new Map([
      [protectedResources.todoListApi.endpoint, protectedResources.todoListApi.scopes]
    ])
  })

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
    }
  },
  {
    interactionType: InteractionType.Redirect,
    protectedResourceMap: new Map([
      [protectedResources.todoListApi.endpoint, protectedResources.todoListApi.scopes]
    ])
  })

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

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

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

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

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

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.loginHint = "bob@contoso.com"

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      loginHint: "bob@contoso.com"
    }
  },

// src/app/app.component.ts
let authRequestConfig: RedirectRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as RedirectRequest
}

authRequestConfig.loginHint = "bob@contoso.com"

this.authService.loginRedirect(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      loginHint: "bob@contoso.com"
    }
  },

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

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

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

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

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

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

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.domainHint = "facebook.com";

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      domainHint: "facebook.com"
    }
  },

// src/app/app.component.ts
let authRequestConfig: RedirectRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as RedirectRequest
}

authRequestConfig.domainHint = "facebook.com";

this.authService.loginRedirect(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      domainHint: "facebook.com"
    }
  },

UI 言語を指定する

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

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

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

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

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

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"ui_locales" : "es-es"};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

// src/app/app.component.ts
let authRequestConfig: RedirectRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as RedirectRequest
}

authRequestConfig.extraQueryParameters = {"ui_locales" : "es-es"};

this.authService.loginRedirect(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

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

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

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

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

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

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

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"campaignId": 'germany-promotion'}

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

// src/app/app.component.ts
let authRequestConfig: RedirectRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as RedirectRequest
}

authRequestConfig.extraQueryParameters = {"campaignId": 'germany-promotion'}

this.authService.loginRedirect(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"campaignId" : "germany-promotion"}
    }
  },

ID トークンヒントを渡す

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

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

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

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

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

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"id_token_hint": idToken};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"id_token_hint" : idToken}
    }
  },

// src/app/app.component.ts
let authRequestConfig: RedirectRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as RedirectRequest
}

authRequestConfig.extraQueryParameters = {"id_token_hint": idToken};

this.authService.loginRedirect(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"id_token_hint" : idToken}
    }
  },

カスタムドメインの使用

カスタムドメインを使用すると、認証 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/app/auth-config.ts 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 構成オブジェクトを示しています。

const msalConfig = {
    auth: {
      ...
      authority: "https://custom.___domain.com/00000000-0000-0000-0000-000000000000/B2C_1_susi",
      knownAuthorities: ["custom.___domain.com"],
      ...
    },
  ...
}

ログの設定

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

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

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

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

Angular ログを構成するには、 src/app/auth-config.ts で次のキーを構成します。

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

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

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

次のステップ

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

次の方法で共有

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

[前提条件]

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

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

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

UI 言語を指定する

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

ID トークン ヒントを渡す

カスタム ドメインの使用

ログの設定

次のステップ

フィードバック

その他のリソース

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

ID トークンヒントを渡す

カスタムドメインの使用