Configurer un flux d’inscription et de connexion pour un compte local en utilisant une stratégie Azure Active Directory B2C personnalisée

  • Article

Dans l’article Créer et lire un compte d’utilisateur à l’aide d’une stratégie Azure Active Directory B2C personnalisée , un utilisateur crée un compte d’utilisateur, mais ne s’y connecte pas.

Dans cet article, vous allez apprendre à écrire une stratégie Azure Active Directory B2C personnalisée (Azure AD B2C) qui permet à un utilisateur de créer un compte local Azure AD B2C ou de se connecter à un compte local. Un compte local fait référence à un compte créé dans votre tenant Azure AD B2C lorsqu’un utilisateur s’inscrit à votre application.

Vue d’ensemble

Azure AD B2C utilise le protocole d’authentification OpenID Connect pour vérifier les informations d’identification de l’utilisateur. Dans Azure AD B2C, vous envoyez les informations d’identification de l’utilisateur ainsi que d’autres informations à un point de terminaison sécurisé qui détermine ensuite si les informations d’identification sont valides ou non. En bref, lorsque vous utilisez l’implémentation d’Azure AD B2C d’OpenID Connect, vous pouvez sous-traiter l’inscription, la connexion et d’autres tâches de gestion des identités dans vos applications web à Microsoft Entra ID.

La stratégie Azure Active Directory B2C personnalisée fournit un profil technique OpenID Connect que vous utilisez pour passer un appel à un point de terminaison Microsoft sécurisé. En savoir plus sur le profil technique OpenID Connect.

Prérequis

Notes

Cet article fait partie de la série de guides pratiques Créer et exécuter vos propres stratégies personnalisées dans Azure Active Directory B2C. Nous vous recommandons de commencer cette série par le premier article.

Étape 1 : Configurer le profil technique OpenID Connect

Pour configurer un profil technique OpenID Connect, vous devez effectuer trois étapes :

  • Déclarez d’autres revendications.
  • Inscrivez des applications dans votre Portail Azure.
  • Enfin, configurez le profil technique OpenID Connect proprement dit

Étape 1.1 : Déclarer d’autres revendications

Dans le fichier ContosoCustomPolicy.XML, recherchez la section ClaimsSchema, puis ajoutez d’autres revendications en utilisant le code suivant :

    <!--<ClaimsSchema>-->
        ...
        <ClaimType Id="grant_type">
            <DisplayName>grant_type</DisplayName>
            <DataType>string</DataType>
            <UserHelpText>Special parameter passed for local account authentication to login.microsoftonline.com.</UserHelpText>
        </ClaimType>
        
        <ClaimType Id="scope">
            <DisplayName>scope</DisplayName>
            <DataType>string</DataType>
            <UserHelpText>Special parameter passed for local account authentication to login.microsoftonline.com.</UserHelpText>
        </ClaimType>
        
        <ClaimType Id="nca">
            <DisplayName>nca</DisplayName>
            <DataType>string</DataType>
            <UserHelpText>Special parameter passed for local account authentication to login.microsoftonline.com.</UserHelpText>
        </ClaimType>
        
        <ClaimType Id="client_id">
            <DisplayName>client_id</DisplayName>
            <DataType>string</DataType>
            <AdminHelpText>Special parameter passed to EvoSTS.</AdminHelpText>
            <UserHelpText>Special parameter passed to EvoSTS.</UserHelpText>
        </ClaimType>
        
        <ClaimType Id="resource_id">
            <DisplayName>resource_id</DisplayName>
            <DataType>string</DataType>
            <AdminHelpText>Special parameter passed to EvoSTS.</AdminHelpText>
            <UserHelpText>Special parameter passed to EvoSTS.</UserHelpText>
        </ClaimType>
    <!--</ClaimsSchema>-->

Étape 1.2 : Inscrire des applications Identity Experience Framework

Azure AD B2C exige que vous inscriviez deux applications qu’il utilise pour inscrire et connecter des utilisateurs avec des comptes locaux : IdentityExperienceFramework, API web, et ProxyIdentityExperienceFramework, application native avec autorisation déléguée à l’application IdentityExperienceFramework.

Si vous ne l’avez pas encore fait, inscrivez les applications suivantes. Pour automatiser la procédure pas à pas ci-dessous, accédez à Application d’installation IEF et suivez les instructions :

  1. Suivez les étapes décrites dans Inscrire une application Identity Experience Framework pour inscrire l’application Identity Experience Framework. Copiez l’ID d’application (client), un appID pour l’inscription de l’application Identity Experience Framework à utiliser lors de l’étape suivante.

  2. Suivez les étapes décrites dans Inscrire une application ProxyIdentityExperienceFramework pour inscrire l’application Proxy Identity Experience Framework. Copiez l’ID d’application (client), un proxyAppID pour l’inscription de l’application Proxy Identity Experience Framework à utiliser lors de l’étape suivante.

Étape 1.3 : Configurer un profil technique OpenID Connect

Dans le fichier ContosoCustomPolicy.XML, recherchez la section ClaimsProviders, puis ajoutez un élément Fournisseur de revendications contenant votre profil technique OpenID Connect à l’aide du code suivant :

    <!--<ClaimsProviders>-->
        ...
        <ClaimsProvider>
            <DisplayName>OpenID Connect Technical Profiles</DisplayName>
            <TechnicalProfiles>
                <TechnicalProfile Id="SignInUser">
                    <DisplayName>Sign in with Local Account</DisplayName>
                    <Protocol Name="OpenIdConnect" />
                    <Metadata>
                        <Item Key="UserMessageIfClaimsPrincipalDoesNotExist">We didn't find this account</Item>
                        <Item Key="UserMessageIfInvalidPassword">Your password or username is incorrect</Item>
                        <Item Key="UserMessageIfOldPasswordUsed">You've used an old password.</Item>
                        <Item Key="ProviderName">https://sts.windows.net/</Item>
                        <Item Key="METADATA">https://login.microsoftonline.com/{tenant}/.well-known/openid-configuration</Item>
                        <Item Key="authorization_endpoint">https://login.microsoftonline.com/{tenant}/oauth2/token</Item>
                        <Item Key="response_types">id_token</Item>
                        <Item Key="response_mode">query</Item>
                        <Item Key="scope">email openid</Item>
                        <!-- Policy Engine Clients -->
                        <Item Key="UsePolicyInRedirectUri">false</Item>
                        <Item Key="HttpBinding">POST</Item>
                        <Item Key="client_id">proxyAppID</Item>
                        <Item Key="IdTokenAudience">appID</Item>
                    </Metadata>
                    <InputClaims>
                        <InputClaim ClaimTypeReferenceId="email" PartnerClaimType="username" Required="true" />
                        <InputClaim ClaimTypeReferenceId="password" PartnerClaimType="password" Required="true" />
                        <InputClaim ClaimTypeReferenceId="grant_type" DefaultValue="password" />
                        <InputClaim ClaimTypeReferenceId="scope" DefaultValue="openid" />
                        <InputClaim ClaimTypeReferenceId="nca" PartnerClaimType="nca" DefaultValue="1" />
                        <InputClaim ClaimTypeReferenceId="client_id" DefaultValue="proxyAppID" />
                        <InputClaim ClaimTypeReferenceId="resource_id" PartnerClaimType="resource" DefaultValue="appID" />
                    </InputClaims>
                    <OutputClaims>
                        <OutputClaim ClaimTypeReferenceId="objectId" PartnerClaimType="oid" />
                    </OutputClaims>
                </TechnicalProfile>
            </TechnicalProfiles>
        </ClaimsProvider>
    <!--</ClaimsProviders>-->

Remplacez les deux instances de :

  • appID avec l’ID d’application (client) de l’application Identity Experience Framework que vous avez copiée à l’étape 1.2.

  • proxyAppID avec l’ID d’application (client) de l’application Proxy Identity Experience Framework que vous avez copiée à l’étape 1.2.

Étape 2 : Configurer l’interface utilisateur de connexion

Lorsque votre stratégie s’exécute, l’utilisateur doit voir une interface utilisateur qui lui permet de se connecter. L’interface utilisateur a également une option d’inscription si l’utilisation n’a pas encore de compte. Pour ce faire, vous devez effectuer ces deux étapes :

  • Configurez un profil technique autodéclaré qui affiche le formulaire de connexion à l’utilisateur.
  • Configurez la définition de contenu pour l’interface utilisateur de connexion.

Étape 2.1 : Configurer un profil technique d’interface utilisateur de connexion

Dans le fichier ContosoCustomPolicy.XML, recherchez le profil technique SignInUser et ajoutez un profil technique déclaré automatiquement après celui-ci à l’aide du code suivant :

    <TechnicalProfile Id="UserSignInCollector">
        <DisplayName>Local Account Signin</DisplayName>
        <Protocol Name="Proprietary"
            Handler="Web.TPEngine.Providers.SelfAssertedAttributeProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
        <Metadata>
            <Item Key="setting.operatingMode">Email</Item>
            <Item Key="SignUpTarget">AccountTypeInputCollectorClaimsExchange</Item>
        </Metadata>
        <DisplayClaims>
            <DisplayClaim ClaimTypeReferenceId="email" Required="true" />
            <DisplayClaim ClaimTypeReferenceId="password" Required="true" />
        </DisplayClaims>
        <OutputClaims>
            <OutputClaim ClaimTypeReferenceId="email" />
            <OutputClaim ClaimTypeReferenceId="password"  />
            <OutputClaim ClaimTypeReferenceId="objectId" />
        </OutputClaims>
        <ValidationTechnicalProfiles>
            <ValidationTechnicalProfile ReferenceId="SignInUser" />
        </ValidationTechnicalProfiles>
    </TechnicalProfile>

Nous avons ajouté un profil technique autodéclaré, UserSignInCollector, qui affiche le formulaire de connexion à l’utilisateur. Nous avons configuré le profil technique pour collecter l’adresse e-mail de l’utilisateur comme nom de connexion, tel qu’indiqué dans les métadonnées setting.operatingMode. Le formulaire de connexion comprend un lien d’inscription qui dirige l’utilisateur vers un formulaire d’inscription comme indiqué par les métadonnées SignUpTarget. Vous verrez comment nous avons configuré SignUpWithLogonEmailExchangeClaimsExchange dans les étapes d’orchestration.

Nous avons également ajouté le profil technique SignInUser OpenID Connect en tant que ValidationTechnicalProfile. Par conséquent, le profil technique SignInUser s’exécute quand l’utilisateur sélectionne le bouton Se connecter (voir la capture d’écran à l’étape 5).

À l’étape suivante (étape 2.2), nous configurons une définition de contenu que nous utilisons dans ce profil technique autodéclaré.

Étape 2.2 : Configurer la définition de contenu de l’interface de connexion

Dans le fichier ContosoCustomPolicy.XML, recherchez la section ContentDefinitions, puis connectez-vous à la Définition de contenu à l’aide du code suivant :

    <!--<ContentDefinitions>-->
        ...
            <ContentDefinition Id="SignupOrSigninContentDefinition">
                <LoadUri>~/tenant/templates/AzureBlue/unified.cshtml</LoadUri>
                <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
                <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.7</DataUri>
                <Metadata>
                    <Item Key="DisplayName">Signin and Signup</Item>
                </Metadata>
            </ContentDefinition>
    <!--</ContentDefinitions>-->

Nous avons configuré une définition de contenu pour notre profil technique autodéclaré, SignupOrSigninContentDefinition. Nous pouvons le spécifier dans le profil technique en utilisant l’élément des métadonnées ou le spécifier lorsque nous référençons le profil technique dans les étapes d’orchestration. Auparavant, nous avons appris à spécifier une définition de contenu directement dans le profil technique autodéclaré. Dans cet article, nous allons donc découvrir comment la spécifier lorsque nous référencerons le profil technique dans les étapes d’orchestration, étape 3.

Étape 3 : Mettre à jour les étapes d’orchestration du parcours utilisateur

Dans le fichier ContosoCustomPolicy.XML, recherchez le parcours utilisateur HelloWorldJourney et remplacez toutes sa collection d’étapes d’orchestration par le code suivant :

    <!--<OrchestrationSteps>-->
        ...
        <OrchestrationStep Order="1" Type="CombinedSignInAndSignUp" ContentDefinitionReferenceId="SignupOrSigninContentDefinition">
            <ClaimsProviderSelections>
                <ClaimsProviderSelection ValidationClaimsExchangeId="LocalAccountSigninEmailExchange" />
            </ClaimsProviderSelections>
            <ClaimsExchanges>
                <ClaimsExchange Id="LocalAccountSigninEmailExchange" TechnicalProfileReferenceId="UserSignInCollector" />
            </ClaimsExchanges>
        </OrchestrationStep>

        <OrchestrationStep Order="2" Type="ClaimsExchange">
            <Preconditions>
                <Precondition Type="ClaimsExist" ExecuteActionsIf="true">
                    <Value>objectId</Value>
                    <Action>SkipThisOrchestrationStep</Action>
                </Precondition>
            </Preconditions>
            <ClaimsExchanges>
                <ClaimsExchange Id="AccountTypeInputCollectorClaimsExchange" TechnicalProfileReferenceId="AccountTypeInputCollector"/>
            </ClaimsExchanges>
        </OrchestrationStep>

        <OrchestrationStep Order="3" Type="ClaimsExchange">
            <Preconditions>
                <Precondition Type="ClaimsExist" ExecuteActionsIf="true">
                    <Value>objectId</Value>
                    <Action>SkipThisOrchestrationStep</Action>
                </Precondition>
                <Precondition Type="ClaimEquals" ExecuteActionsIf="true">
                  <Value>accountType</Value>
                  <Value>company</Value>
                  <Action>SkipThisOrchestrationStep</Action>
                </Precondition>
            </Preconditions>
            <ClaimsExchanges>
                <ClaimsExchange Id="GetAccessCodeClaimsExchange" TechnicalProfileReferenceId="AccessCodeInputCollector" />
            </ClaimsExchanges>
        </OrchestrationStep>
        
        <OrchestrationStep Order="4" Type="ClaimsExchange">
            <Preconditions>
                <Precondition Type="ClaimsExist" ExecuteActionsIf="true">
                    <Value>objectId</Value>
                    <Action>SkipThisOrchestrationStep</Action>
                </Precondition>
            </Preconditions>
            <ClaimsExchanges>
                <ClaimsExchange Id="SignUpWithLogonEmailExchange" TechnicalProfileReferenceId="UserInformationCollector" />
            </ClaimsExchanges>
        </OrchestrationStep>  
      
        <OrchestrationStep Order="5" Type="ClaimsExchange">
            <ClaimsExchanges>
            <ClaimsExchange Id="AADUserReaderExchange" TechnicalProfileReferenceId="AAD-UserRead"/>
            </ClaimsExchanges>
        </OrchestrationStep>                
        
        <OrchestrationStep Order="6" Type="ClaimsExchange">
            <ClaimsExchanges>
            <ClaimsExchange Id="GetMessageClaimsExchange" TechnicalProfileReferenceId="UserInputMessageClaimGenerator"/>
            </ClaimsExchanges>          
        </OrchestrationStep>                
        
        <OrchestrationStep Order="7" Type="SendClaims" CpimIssuerTechnicalProfileReferenceId="JwtIssuer" />
    <!--</OrchestrationSteps>-->

Dans les étapes d’orchestration deux à cinq, nous avons utilisé des conditions préalables pour déterminer si l’étape d’orchestration doit s’exécuter. Nous devons déterminer si l’utilisateur se connecte ou s’inscrit.

Lorsque la stratégie personnalisée s’exécute :

  • Étape 1 de l orchestration : affiche la page de connexion pour que l’utilisateur puisse se connecter ou sélectionner le lien S’inscrire maintenant. Notez que nous spécifions la définition de contenu que le profil technique autodéclaré UserSignInCollector utilise pour afficher le formulaire de connexion.

  • Étape 2 de l’orchestration : cette étape s’exécute si l’utilisateur s’inscrit (objectId n’existe pas). Nous affichons donc le formulaire de sélection du type de compte en appelant le profil technique autodéclaré AccountTypeInputCollector.

  • Étape 3 de ’orchestration : cette étape s’exécute si l’utilisateur s’inscrit (objectId n’existe pas) et qu’un utilisateur ne sélectionne pas d’entreprise accountType. Nous devons donc demander à l’utilisateur d’entrer un accessCode en appelant le profil technique autodéclaré AccessCodeInputCollector.

  • Étape 4 de l’orchestration : cette étape s’exécute si l’utilisateur s’inscrit (objectId n’existe pas). Nous affichons donc le formulaire d’inscription en appelant le profil technique autodéclaré UserInformationCollector.

  • Étape 5 de l’orchestration : cette étape lit les informations du compte à partir de Microsoft Entra ID (nous appelons le profil technique Microsoft Entra ID AAD-UserRead), afin de s’exécuter si un utilisateur s’inscrit ou se connecte.

  • Étape 6 de l’orchestration : cette étape appelle le profil technique UserInputMessageClaimGenerator pour assembler le message d’accueil de l’utilisateur.

  • Étape 7 de l’orchestration : enfin, l’étape 8 assemble et retourne le jeton JWT à la fin de l’exécution de la stratégie.

Étape 4 : stratégie de chargement

Suivez les étapes décrites dans Charger un fichier de stratégie personnalisée pour charger votre fichier de stratégie. Si vous chargez un fichier portant le même nom que celui déjà présent dans le portail, veillez à sélectionner Remplacer la stratégie personnalisée si elle existe déjà.

Étape 5 : stratégie de test

Suivez les étapes décrites dans Tester la stratégie personnalisée pour tester votre stratégie personnalisée. Une fois la stratégie exécutée, vous voyez une interface similaire à la capture d’écran ci-dessous :

screenshot of sign-up or sign-in interface.

Vous pouvez vous connecter en entrant l’Adresse e-mail et le Mot de passe d’un compte existant. Si vous n’avez pas encore de compte, vous devez sélectionner le lien S’inscrire maintenant pour créer un compte d’utilisateur.

Étapes suivantes