Azure AD B2C を使用して Azure 静的 Web アプリの認証オプションを有効にする

  • [アーティクル]

この記事では、Azure 静的 Web アプリの Azure Active Directory B2C (Azure AD B2C) 認証エクスペリエンスの有効化、カスタマイズ、および拡張を行う方法について説明します。

開始する前に、Azure AD B2C を使用してAzure 静的 Web アプリで認証を構成するに関する記事について理解しておくことが重要です。

カスタム ドメインの使用

カスタム ドメインを使用すると、認証 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 を使用するには、カスタム ドメインを有効にする方法に関するページのガイダンスに従ってください。 構成ファイルを開きます。 このファイルには、Azure AD B2C ID プロバイダーに関する情報が含まれています。

構成ファイルで、次の手順に従います。

  1. customOpenIdConnectProviders で、wellKnownOpenIdConfiguration 要素を見つけます。
  2. カスタム ドメインとテナント ID を使用して、Azure AD B2C の既知の構成エンドポイントの URL を更新します。 詳しくは、「テナント ID を使用する」をご覧ください。

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

"openIdConnectConfiguration": {
    "wellKnownOpenIdConfiguration": "https://contoso.b2clogin.com/contoso.onmicrosoft.com/<POLICY_NAME>/v2.0/.well-known/openid-configuration"
    }
}

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

"openIdConnectConfiguration": {
    "wellKnownOpenIdConfiguration": "https://login.contoso.com/00000000-0000-0000-0000-000000000000/<POLICY_NAME>/v2.0/.well-known/openid-configuration"
    }

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

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

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

  1. 外部 ID プロバイダーのドメイン名を確認します。 詳細については、「サインインをソーシャル プロバイダーにリダイレクトする」を参照してください。
  2. 構成ファイルを開きます。
  3. login 要素で、loginParameterNames を見つけます。
  4. facebook.com など、対応する値を持つ domain_hint パラメーターを追加します。

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

"login": {
    "nameClaimType": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
    "scopes": [],
    "loginParameterNames": ["domain_hint=facebook.com"]
}

UI 言語を指定する

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

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

  1. 言語のカスタマイズを構成します。
  2. 構成ファイルを開きます。
  3. login 要素で、loginParameterNames を見つけます。
  4. es-es など、対応する値を持つ ui_locales パラメーターを追加します。

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

"login": {
    "nameClaimType": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
    "scopes": [],
    "loginParameterNames": ["ui_locales=es-es"]
}

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

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

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

  1. ContentDefinitionParameters 要素を構成します。
  2. 構成ファイルを開きます。
  3. login 要素で、loginParameterNames を見つけます。
  4. campaignId のようなカスタム パラメーターを追加します。

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

"login": {
    "nameClaimType": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
    "scopes": [],
    "loginParameterNames": ["campaignId=germany-promotion"]
}

次のステップ