次の方法で共有

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

重要

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

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

開始する前に、 Azure AD B2C を使用した Azure Static 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 well-Known 構成エンドポイントの 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"]
}

次のステップ

  • Last updated on