次の方法で共有

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

  • [アーティクル]

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

前提条件

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

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

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

  • ポップアップ ウィンドウ: 認証はポップアップ ウィンドウで行われ、アプリケーションの状態は保持されます。 認証中にユーザーをアプリケーション ページから移動させたくない場合は、この方法を使用します。 ただし、Internet Explorer のポップアップ ウィンドウには既知の問題があります。
    • ポップアップ ウィンドウでサインインするには、src/app/app.component.ts クラスで loginPopup メソッドを使用します。
    • src/app/app.module.ts クラスで、interactionType 属性を InteractionType.Popup に設定します。
    • ポップアップ ウィンドウでサインアウトするには、src/app/app.component.ts クラスで logoutPopup メソッドを使用します。 要求の一部として mainWindowRedirectUri を渡すことにより、サインアウトが完了した後、メイン ウィンドウを別のページ (ホーム ページやサインインページなど) にリダイレクトするように logoutPopup を構成することもできます。
  • リダイレクト: ユーザーは認証フローを完了するために 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: '/',
  });
}

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]
    ])
  })

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

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

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

  1. カスタム ポリシーを使用する場合は、「直接サインインの設定」の説明に従って、必要な入力要求を追加します。
  2. 既存の PopupRequest または RedirectRequest MSAL 構成オブジェクトを作成または使用します。
  3. 対応するサインイン ヒントを使用して 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"
    }
  },

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

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

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

  1. 外部 ID プロバイダーのドメイン名を確認します。 詳細については、「サインインをソーシャル プロバイダーにリダイレクトする」を参照してください。
  2. 既存の PopupRequest または RedirectRequest MSAL 構成オブジェクトを作成または使用します。
  3. 対応するドメイン ヒントを使用して 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"
    }
  },

UI 言語を指定する

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

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

  1. 言語のカスタマイズを構成します。
  2. extraQueryParameters 属性を持つ既存の PopupRequest または RedirectRequest MSAL 構成オブジェクトを作成または使用します。
  3. 対応する言語コードが含まれる 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"}
    }
  },

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

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

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

  1. ContentDefinitionParameters 要素を構成します。
  2. extraQueryParameters 属性を持つ既存の PopupRequest または RedirectRequest MSAL 構成オブジェクトを作成または使用します。
  3. 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"}
    }
  },

ID トークン ヒントを渡す

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

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

  1. カスタム ポリシーで、ID トークン ヒントの技術プロファイルを定義します。
  2. extraQueryParameters 属性を持つ既存の PopupRequest または RedirectRequest MSAL 構成オブジェクトを作成または使用します。
  3. 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}
    }
  },

カスタム ドメインの使用

カスタム ドメインを使用すると、認証 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
      }
  }
  ...
}

次の手順