Partager via

Activer les options d’authentification dans une application web statique Azure à l’aide d’Azure AD B2C

Important

À compter du 1er mai 2025, Azure AD B2C ne sera plus disponible pour les nouveaux clients. Pour plus d’informations, consultez notre FAQ.

Cet article explique comment activer, personnaliser et améliorer l’expérience d’authentification Azure Active Directory B2C (Azure AD B2C) pour vos applications web statiques Azure.

Avant de commencer, il est important de vous familiariser avec la configuration de l’authentification dans une application web statique Azure à l’aide de l’article Azure AD B2C .

Utiliser un domaine personnalisé

En utilisant un domaine personnalisé, vous pouvez entièrement personnaliser l’URL d’authentification. Du point de vue de l’utilisateur, les utilisateurs restent sur votre domaine pendant le processus d’authentification, plutôt que d’être redirigés vers le nom de domaine Azure AD B2C b2clogin.com.

Pour supprimer toutes les références à « b2c » dans l’URL, vous pouvez également remplacer votre nom de locataire B2C, contoso.onmicrosoft.com, dans l’URL de demande d’authentification par votre GUID d’ID de locataire. Par exemple, vous pouvez passer https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ à https://account.contosobank.co.uk/<tenant ID GUID>/.

Pour utiliser un domaine personnalisé et votre ID de locataire dans l’URL d’authentification, suivez les instructions de l’option Activer les domaines personnalisés. Ouvrez le fichier de configuration. Ce fichier contient des informations sur votre fournisseur d’identité Azure AD B2C.

Dans le fichier de configuration, procédez comme suit :

  1. Sous le localisez l’élément customOpenIdConnectProviderswellKnownOpenIdConfiguration .
  2. Mettez à jour l’URL de votre point de terminaison de configuration Azure AD B2C bien connu avec votre domaine personnalisé et votre ID de locataire. Pour plus d’informations, consultez Utiliser l’ID de locataire.

Le code JSON suivant montre les paramètres de l’application avant la modification :

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

Le code JSON suivant montre les paramètres de l’application après la modification :

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

Préélectionner un fournisseur d’identité

Si vous avez configuré le parcours de connexion de votre application pour inclure des comptes sociaux, tels que Facebook, LinkedIn ou Google, vous pouvez spécifier le domain_hint paramètre. Ce paramètre de requête fournit un indicateur à Azure AD B2C sur le fournisseur d’identité sociale qui doit être utilisé pour la connexion. Par exemple, si l’application spécifie domain_hint=facebook.com, le flux de connexion passe directement à la page de connexion Facebook.

Pour rediriger les utilisateurs vers un fournisseur d’identité externe, procédez comme suit :

  1. Vérifiez le nom de domaine de votre fournisseur d’identité externe. Pour plus d’informations, consultez Redirection de la connexion à un fournisseur de réseaux sociaux.
  2. Ouvrez le fichier de configuration.
  3. Sous l’élément login , recherchez le loginParameterNames.
  4. Ajoutez le paramètre domain_hint avec sa valeur correspondante, telle que facebook.com.

Les extraits de code suivants montrent comment passer le paramètre d’indicateur de domaine. Il utilise facebook.com comme valeur d’attribut.

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

Spécifier la langue de l’interface utilisateur

La personnalisation de la langue dans Azure AD B2C permet à votre flux utilisateur de prendre en charge diverses langues en fonction des besoins de vos clients. Pour plus d’informations, consultez Personnalisation de la langue.

Pour définir la langue par défaut, procédez comme suit :

  1. Configurez la personnalisation de la langue.
  2. Ouvrez le fichier de configuration.
  3. Sous l’élément login , recherchez le loginParameterNames.
  4. Ajoutez le paramètre ui_locales avec sa valeur correspondante, par es-esexemple .

Les extraits de code suivants montrent comment passer le ui_locales paramètre. Il utilise es-es comme valeur d’attribut.

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

Passer un paramètre de chaîne de requête personnalisé

Avec des stratégies personnalisées, vous pouvez passer un paramètre de chaîne de requête personnalisé. Un bon exemple de cas d’usage consiste à modifier dynamiquement le contenu de la page.

Pour passer un paramètre de chaîne de requête personnalisé, procédez comme suit :

  1. Configurez l’élément ContentDefinitionParameters .
  2. Ouvrez le fichier de configuration.
  3. Sous l’élément login , recherchez le loginParameterNames.
  4. Ajoutez le paramètre personnalisé, tel que campaignId.

Les extraits de code suivants montrent comment passer le campaignId paramètre de chaîne de requête personnalisé. Il utilise germany-promotion comme valeur d’attribut.

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

Étapes suivantes