Ajouter des attributs utilisateur et personnaliser l’entrée utilisateur dans Azure Active Directory B2C

  • Article

Avant de commencer, utilisez le sélecteur Choisir un type de stratégie pour choisir le type de stratégie que vous configurez. Azure Active Directory B2C offre deux possibilités pour définir la façon dont les utilisateurs interagissent avec vos applications : via des flux utilisateurs prédéfinis ou via des stratégies personnalisées entièrement configurables. La procédure donnée dans cet article est différente pour chaque méthode.

Dans cet article, vous collectez un nouvel attribut lors de votre parcours d’inscription dans Azure Active Directory B2C (Azure AD B2C). Vous obtenez la ville des utilisateurs, vous la configurez en tant que liste déroulante et vous indiquez si elle doit être obligatoirement fournie.

Important

Cet exemple utilise la revendication intégrée « city ». Au lieu de cela, vous pouvez choisir l’un des attributs intégrés Azure AD B2C pris en charge ou un attribut personnalisé. Pour utiliser un attribut personnalisé, activez les attributs personnalisés. Pour utiliser un autre attribut intégré ou personnalisé, remplacez « city » par l’attribut de votre choix, par exemple l’attribut intégré jobTitle ou un attribut personnalisé comme extension_loyaltyId.

Prérequis

Ajouter des attributs utilisateur à votre flux d’utilisateur

  1. Connectez-vous au portail Azure.
  2. Si vous avez accès à plusieurs locataires, sélectionnez l’icône Paramètres dans le menu du haut pour basculer vers votre locataire Azure AD B2C à partir du menu Annuaires + abonnements.
  3. Sous Services Azure, sélectionnez Azure AD B2C. Vous pouvez également utiliser la zone de recherche pour rechercher et sélectionner Azure AD B2C.
  4. Dans votre locataire Azure AD B2C, sélectionnez Flux d’utilisateur.
  5. Sélectionnez votre stratégie (par exemple, « B2C_1_SignupSignin ») pour l’ouvrir.
  6. Sélectionnez Attributs utilisateur, puis sélectionnez l’attribut utilisateur (par exemple, « City »).
  7. Sélectionnez Enregistrer.

Fournir des revendications facultatives à votre application

Les revendications d’application sont des valeurs qui sont retournées à l’application. Mettez à jour votre flux d’utilisateurs pour qu’il contienne les revendications souhaitées.

  1. Sélectionnez votre stratégie (par exemple, « B2C_1_SignupSignin ») pour l’ouvrir.
  2. Cliquez sur Revendications de l’application.
  3. Sélectionnez les attributs que vous souhaitez renvoyer à votre application (par exemple, « Ville »).
  4. Sélectionnez Enregistrer.

Configurer le type d’entrée des attributs utilisateur

  1. Sélectionnez votre stratégie (par exemple, « B2C_1_SignupSignin ») pour l’ouvrir.

  2. Sélectionnez Mises en page.

  3. Sélectionnez Page d’inscription à un compte Local.

  4. Sous Attributs utilisateur, sélectionnez Ville.

    1. Dans la liste déroulante Facultatif, sélectionnez Non.
    2. Dans Type d’entrée utilisateur, sélectionnez le type d’entrée utilisateur actuel, par exemple TextBox, pour ouvrir un volet de fenêtre Éditeur de type d’entrée utilisateur.
    3. Dans la liste déroulante Type d’entrée utilisateur, sélectionnez DropdownSingleSelect.
    4. Dans Texte et Valeurs, entrez les paires de texte et valeur qui composent votre ensemble de réponses pour l’attribut. Le texte s’affiche dans l’interface web de votre flux, tandis que les valeurs sont stockées dans Azure AD B2C pour le texte sélectionné. Facultatif : utilisez les boutons « monter/descendre » pour réorganiser les éléments de la liste déroulante.

  5. Sélectionnez OK. Facultatif : utilisez les boutons « monter/descendre » pour réorganiser les attributs de la page d’inscription.

  6. Cliquez sur Enregistrer.

    Web page call green API.

Fournir une liste de valeurs à l’aide de collections localisées

Pour fournir une liste définie de valeurs pour l’attribut Ville :

  1. Activez la personnalisation de la langue sur le flux d’utilisateur.
  2. Sélectionnez votre stratégie (par exemple, « B2C_1_SignupSignin ») pour l’ouvrir.
  3. Dans la page Langues du flux utilisateur, sélectionnez une langue que vous souhaitez personnaliser.
  4. Sous Fichiers de ressources de niveau page, sélectionnez Page d’inscription au compte local.
  5. Sélectionnez Télécharger les valeurs par défaut (ou Télécharger les valeurs de remplacements si vous avez déjà modifié cette langue).
  6. Créez un attribut LocalizedCollections.

LocalizedCollections est un tableau de paires Name et Value. L’ordre des éléments sera l’ordre dans lequel ils apparaissent.

  • ElementId est l’attribut utilisateur auquel cet attribut LocalizedCollections apporte une réponse.
  • Name est la valeur affichée à l’utilisateur.
  • Value est ce qui est renvoyé dans la revendication lorsque cette option est sélectionnée.
{
  "LocalizedStrings": [...],
  "LocalizedCollections": [
    {
      "ElementType": "ClaimType",
      "ElementId": "city",
      "TargetCollection": "Restriction",
      "Override": true,
      "Items": [
        {
          "Name": "Berlin",
          "Value": "Berlin"
        },
        {
          "Name": "London",
          "Value": "London"
        },
        {
          "Name": "Seattle",
          "Value": "Seattle"
        }
      ]
    }
  ]
}

Charger vos modifications

  1. Une fois que vous avez terminé de modifier votre fichier JSON, revenez à votre client B2C.
  2. Sélectionnez Flux d’utilisateurs et votre stratégie (par exemple, « B2C_1_SignupSignin ») pour l’ouvrir.
  3. Sélectionnez Langues.
  4. Sélectionnez la langue dans laquelle vous voulez traduire.
  5. Sous Fichiers de ressources de niveau page, sélectionnez Page d’inscription au compte local.
  6. Sélectionnez l’icône de dossier et sélectionnez le fichier JSON à charger. Ces changements sont automatiquement enregistrés dans votre flux utilisateur.

Tester votre flux d’utilisateur

  1. Sélectionnez votre stratégie (par exemple, « B2C_1_SignupSignin ») pour l’ouvrir.
  2. Pour tester votre stratégie, sélectionnez Exécuter le flux d’utilisateur.
  3. Pour Application, sélectionnez l’application web testapp1 que vous avez précédemment inscrite. L’URL de réponse doit être https://jwt.ms.
  4. Cliquez sur Exécuter le flux d’utilisateur.

Vue d’ensemble

Vous pouvez collecter les données initiales auprès des utilisateurs par le biais du parcours utilisateur d’inscription ou de connexion. Des revendications supplémentaires peuvent être collectées par la suite au moyen des parcours utilisateur de modification de profil. Chaque fois qu’Azure AD B2C recueille de manière interactive des informations de l’utilisateur, il utilise le profil technique autodéclaré. Dans cet exemple, vous allez :

  1. Définir une revendication « city ».
  2. Demander à l’utilisateur la ville où il vit.
  3. conserver la ville dans le profil utilisateur de l’annuaire Azure AD B2C ;
  4. lire la revendication de ville dans l’annuaire Azure AD B2C à chaque connexion ;
  5. retourner la ville à votre application par partie de confiance après vous être connecté ou inscrit.

Définir une revendication

Une revendication fournit un stockage temporaire de données lors d’une exécution de stratégie Azure AD B2C. Le schéma de revendications est l’endroit où vous déclarez vos revendications. Les éléments suivants sont utilisés pour définir la revendication :

  • DisplayName : chaîne qui définit l’étiquette orientée utilisateur.
  • DataType : type de revendication.
  • UserHelpText : texte permettant à l’utilisateur de comprendre ce qui est requis.
  • UserInputType : type de contrôle d’entrée, tel qu’une zone de texte, une case d’option, une liste déroulante ou des sélections multiples.

Ouvrez le fichier d’extensions de votre stratégie. Par exemple : SocialAndLocalAccounts/TrustFrameworkExtensions.xml.

  1. Recherchez l’élément BuildingBlocks. Si l’élément n’existe pas, ajoutez-le.
  2. Localisez l’élément ClaimsSchema. Si l’élément n’existe pas, ajoutez-le.
  3. Ajoutez la revendication de ville à l’élément ClaimsSchema.
<!-- 
<BuildingBlocks>
  <ClaimsSchema> -->
    <ClaimType Id="city">
      <DisplayName>City where you work</DisplayName>
      <DataType>string</DataType>
      <UserInputType>DropdownSingleSelect</UserInputType>
      <Restriction>
        <Enumeration Text="Berlin" Value="berlin" />
        <Enumeration Text="London" Value="london" />
        <Enumeration Text="Seattle" Value="seattle" />
      </Restriction>
    </ClaimType>
  <!-- 
  </ClaimsSchema>
</BuildingBlocks>-->

Incluez l’attribut SelectByDefault sur un Enumeration élément que celui-ci soit sélectionné par défaut lors du premier chargement de la page. Par exemple, pour présélectionner l’élément London, modifiez l’élément Enumeration comme dans l’exemple suivant :

<Restriction>
  <Enumeration Text="Berlin" Value="berlin" />
  <Enumeration Text="London" Value="london" SelectByDefault="true" />
  <Enumeration Text="Seattle" Value="seattle" />
</Restriction>

Ajouter une revendication à l’interface utilisateur

Les profils techniques suivants sont autodéclarés, appelés lorsqu’un utilisateur est supposé entrer des informations :

  • LocalAccountSignUpWithLogonEmail : flux d’inscription de compte local.
  • SelfAsserted-social : compte fédéré avec première connexion de l’utilisateur.
  • SelfAsserted-ProfileUpdate :flux de modification de profil.

Pour collecter la revendication de ville au cours de l’inscription, celle-ci doit être ajoutée en tant que revendication de sortie au profil technique LocalAccountSignUpWithLogonEmail. Remplacez ce profil technique dans le fichier d’extension. Spécifiez la liste complète des revendications de sortie pour contrôler l’ordre dans lequel les revendications sont présentées à l’écran. Recherchez l’élément ClaimsProviders. Ajoutez un nouveau ClaimsProvider comme suit :

<ClaimsProvider>
  <DisplayName>Local Account</DisplayName>
  <TechnicalProfiles>
    <!--Local account sign-up page-->
    <TechnicalProfile Id="LocalAccountSignUpWithLogonEmail">
      <OutputClaims>
       <OutputClaim ClaimTypeReferenceId="email" PartnerClaimType="Verified.Email" Required="true" />
       <OutputClaim ClaimTypeReferenceId="newPassword" Required="true" />
       <OutputClaim ClaimTypeReferenceId="reenterPassword" Required="true" />
       <OutputClaim ClaimTypeReferenceId="displayName" />
       <OutputClaim ClaimTypeReferenceId="givenName" />
       <OutputClaim ClaimTypeReferenceId="surName" />
       <OutputClaim ClaimTypeReferenceId="city"/>
     </OutputClaims>
   </TechnicalProfile>
  </TechnicalProfiles>
</ClaimsProvider>

Pour collecter la revendication de ville après la connexion initiale avec un compte fédéré, celle-ci doit être ajoutée en tant que revendication de sortie au profil technique SelfAsserted-Social. Pour que les utilisateurs de comptes locaux et de comptes fédérés puissent modifier leurs données de profil ultérieurement, ajoutez la revendication de sortie et d’entrée au profil technique SelfAsserted-ProfileUpdate. Remplacez ces profils techniques dans le fichier d’extension. Spécifiez la liste complète des revendications de sortie pour contrôler l’ordre dans lequel les revendications sont présentées à l’écran. Recherchez l’élément ClaimsProviders. Ajoutez un nouveau ClaimsProvider comme suit :

<ClaimsProvider>
  <DisplayName>Self Asserted</DisplayName>
  <TechnicalProfiles>
    <!--Federated account first-time sign-in page-->
    <TechnicalProfile Id="SelfAsserted-Social">
      <InputClaims>
        <InputClaim ClaimTypeReferenceId="city" />
      </InputClaims>
      <OutputClaims>
        <OutputClaim ClaimTypeReferenceId="displayName"/>
        <OutputClaim ClaimTypeReferenceId="givenName"/>
        <OutputClaim ClaimTypeReferenceId="surname"/>
        <OutputClaim ClaimTypeReferenceId="city"/>
      </OutputClaims>
    </TechnicalProfile>
    <!--Edit profile page-->
    <TechnicalProfile Id="SelfAsserted-ProfileUpdate">
      <InputClaims>
        <InputClaim ClaimTypeReferenceId="city" />
      </InputClaims>
      <OutputClaims>
        <OutputClaim ClaimTypeReferenceId="displayName"/>
        <OutputClaim ClaimTypeReferenceId="givenName" />
        <OutputClaim ClaimTypeReferenceId="surname" />
        <OutputClaim ClaimTypeReferenceId="city"/>
      </OutputClaims>
    </TechnicalProfile>
  </TechnicalProfiles>
</ClaimsProvider>

Lire et écrire une revendication

Les profils techniques suivants sont des profils techniques Active Directory qui lisent et écrivent des données dans Microsoft Entra ID.
Dans les profils techniques Active Directory respectifs, utilisez PersistedClaims pour écrire des données dans le profil utilisateur, et OutputClaims pour lire des données depuis le profil utilisateur.

Remplacez ces profils techniques dans le fichier d’extension. Recherchez l’élément ClaimsProviders. Ajoutez un nouveau ClaimsProvider comme suit :

<ClaimsProvider>
  <DisplayName>Azure Active Directory</DisplayName>
  <TechnicalProfiles>
    <!-- Write data during a local account sign-up flow. -->
    <TechnicalProfile Id="AAD-UserWriteUsingLogonEmail">
      <PersistedClaims>
        <PersistedClaim ClaimTypeReferenceId="city"/>
      </PersistedClaims>
    </TechnicalProfile>
    <!-- Write data during a federated account first-time sign-in flow. -->
    <TechnicalProfile Id="AAD-UserWriteUsingAlternativeSecurityId">
      <PersistedClaims>
        <PersistedClaim ClaimTypeReferenceId="city"/>
      </PersistedClaims>
    </TechnicalProfile>
    <!-- Write data during edit profile flow. -->
    <TechnicalProfile Id="AAD-UserWriteProfileUsingObjectId">
      <PersistedClaims>
        <PersistedClaim ClaimTypeReferenceId="city"/>
      </PersistedClaims>
    </TechnicalProfile>
    <!-- Read data after user resets the password. -->
    <TechnicalProfile Id="AAD-UserReadUsingEmailAddress">
      <OutputClaims>  
        <OutputClaim ClaimTypeReferenceId="city" />
      </OutputClaims>
    </TechnicalProfile>
    <!-- Read data after user authenticates with a local account. -->
    <TechnicalProfile Id="AAD-UserReadUsingObjectId">
      <OutputClaims>  
        <OutputClaim ClaimTypeReferenceId="city" />
      </OutputClaims>
    </TechnicalProfile>
    <!-- Read data after user authenticates with a federated account. -->
    <TechnicalProfile Id="AAD-UserReadUsingAlternativeSecurityId">
      <OutputClaims>  
        <OutputClaim ClaimTypeReferenceId="city" />
      </OutputClaims>
    </TechnicalProfile>
  </TechnicalProfiles>
</ClaimsProvider>

Inclure une revendication dans le jeton

Pour retourner la revendication de ville à l’application par partie de confiance, ajoutez une revendication de sortie au fichier SocialAndLocalAccounts/SignUpOrSignIn.xml. Après un parcours utilisateur réussi, la revendication de sortie est ajoutée au jeton et envoyée à l’application. Modifiez l’élément de profil technique dans la section de partie de confiance pour ajouter la ville en tant que revendication de sortie.

<RelyingParty>
  <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
  <TechnicalProfile Id="PolicyProfile">
    <DisplayName>PolicyProfile</DisplayName>
    <Protocol Name="OpenIdConnect" />
    <OutputClaims>
      <OutputClaim ClaimTypeReferenceId="displayName" />
      <OutputClaim ClaimTypeReferenceId="givenName" />
      <OutputClaim ClaimTypeReferenceId="surname" />
      <OutputClaim ClaimTypeReferenceId="email" />
      <OutputClaim ClaimTypeReferenceId="objectId" PartnerClaimType="sub"/>
      <OutputClaim ClaimTypeReferenceId="identityProvider" />
      <OutputClaim ClaimTypeReferenceId="tenantId" AlwaysUseDefaultValue="true" DefaultValue="{Policy:TenantObjectId}" />
      <OutputClaim ClaimTypeReferenceId="city" DefaultValue="" />
    </OutputClaims>
    <SubjectNamingInfo ClaimType="sub" />
  </TechnicalProfile>
</RelyingParty>

Téléchargez et testez votre stratégie personnalisée mise à jour

  1. Si vous avez accès à plusieurs locataires, sélectionnez l’icône Paramètres dans le menu du haut pour basculer vers votre locataire Azure AD B2C à partir du menu Annuaires + abonnements.
  2. Recherchez et sélectionnez Azure AD B2C.
  3. Sous Stratégies, sélectionnez Identity Experience Framework.
  4. Sélectionnez Charger une stratégie personnalisée.
  5. Chargez les fichiers de stratégie que vous avez modifiés.

Tester la stratégie personnalisée

  1. Sélectionnez votre stratégie de partie de confiance, par exemple B2C_1A_signup_signin.
  2. Pour Application, sélectionnez une application web que vous avez précédemment inscrite. L’URL de réponse doit être https://jwt.ms.
  3. Sélectionnez le bouton Exécuter maintenant.
  4. Dans la page d’inscription ou de connexion, sélectionnez S’inscrire maintenant. Achevez d’entrer les informations utilisateur, dont le nom de la ville, puis cliquez sur Créer. Vous devez voir le contenu du jeton qui a été retourné.

L’écran d’inscription doit ressembler à la capture d’écran suivante :

Screenshot of modified sign-up option

Le jeton envoyé à votre application inclut la revendication city.

{
  "typ": "JWT",
  "alg": "RS256",
  "kid": "X5eXk4xyojNFum1kl2Ytv8dlNP4-c57dO6QGTVBwaNk"
}.{
  "exp": 1583500140,
  "nbf": 1583496540,
  "ver": "1.0",
  "iss": "https://contoso.b2clogin.com/f06c2fe8-709f-4030-85dc-38a4bfd9e82d/v2.0/",
  "aud": "e1d2612f-c2bc-4599-8e7b-d874eaca1ee1",
  "acr": "b2c_1a_signup_signin",
  "nonce": "defaultNonce",
  "iat": 1583496540,
  "auth_time": 1583496540,
  "name": "Emily Smith",
  "email": "joe@outlook.com",
  "given_name": "Emily",
  "family_name": "Smith",
  "city": "Berlin"
  ...
}

[Facultatif] Localiser l’interface utilisateur

Azure AD B2C vous permet d’adapter votre stratégie à différentes langues. Pour plus d’informations, découvrez comment personnaliser l’expérience linguistique. Pour localiser la page d’inscription, configurez la liste des langues prises en charge puis fournissez des étiquettes spécifique de la langue.

Notes

Lorsque vous utilisez la commande LocalizedCollection avec les étiquettes spécifiques de la langue, vous pouvez supprimer la collection Restriction de la définition de revendication.

L’exemple suivant montre comment fournir la liste de villes pour l’anglais et l’espagnol. La collection Restriction de la revendication city est définie avec une liste d’éléments pour l’anglais et l’espagnol. L’attribut SelectByDefault a pour effet de sélectionner un élément par défaut lors du premier chargement de la page.

<!-- 
<BuildingBlocks>-->
  <Localization Enabled="true">
    <SupportedLanguages DefaultLanguage="en" MergeBehavior="Append">
      <SupportedLanguage>en</SupportedLanguage>
      <SupportedLanguage>es</SupportedLanguage>
    </SupportedLanguages>
    <LocalizedResources Id="api.localaccountsignup.en">
      <LocalizedCollections>
        <LocalizedCollection ElementType="ClaimType" ElementId="city" TargetCollection="Restriction">
          <Item Text="Berlin" Value="Berlin"></Item>
          <Item Text="London" Value="London" SelectByDefault="true"></Item>
          <Item Text="Seattle" Value="Seattle"></Item>
        </LocalizedCollection>
      </LocalizedCollections>
    </LocalizedResources>
    <LocalizedResources Id="api.localaccountsignup.es">
      <LocalizedCollections>
        <LocalizedCollection ElementType="ClaimType" ElementId="city" TargetCollection="Restriction">
          <Item Text="Berlina" Value="Berlin"></Item>
          <Item Text="Londres" Value="London" SelectByDefault="true"></Item>
          <Item Text="Seattle" Value="Seattle"></Item>
        </LocalizedCollection>
      </LocalizedCollections>
    </LocalizedResources>
  </Localization>
<!-- 
</BuildingBlocks>-->

Après avoir ajouté l’élément localization, modifiez la définition du contenu avec la localisation. Dans l’exemple suivant, les ressources personnalisées en anglais (en) et en espagnol (es) sont ajoutées à la page d’inscription :

<!-- 
<BuildingBlocks>
  <ContentDefinitions> -->
   <ContentDefinition Id="api.localaccountsignup">
    <LocalizedResourcesReferences MergeBehavior="Prepend">
        <LocalizedResourcesReference Language="en" LocalizedResourcesReferenceId="api.localaccountsignup.en" />
        <LocalizedResourcesReference Language="es" LocalizedResourcesReferenceId="api.localaccountsignup.es" />
    </LocalizedResourcesReferences>
   </ContentDefinition>
  <!-- 
  </ContentDefinitions>
</BuildingBlocks>-->

Étapes suivantes

Étapes suivantes