Activer CAPTCHA dans Azure Active Directory B2C

• Créez un flux d’utilisateurs pour permettre aux utilisateurs de s’inscrire et de se connecter à votre application.
• Inscrire une application web.

• Suivez les étapes de Prise en main des stratégies personnalisées dans Active Directory B2C. Ce tutoriel vous explique comment mettre à jour des fichiers de stratégie personnalisés pour utiliser votre configuration de locataire Azure AD B2C.
• Inscrire une application web.

1. Connectez-vous au portail Azure.

2. Si vous avez accès à plusieurs tenants (locataires), sélectionnez l’icône Paramètres dans le menu supérieur pour basculer vers votre tenant Azure AD B2C à partir du menu Annuaires + abonnements.

3. Dans le menu de gauche, sélectionnez Azure AD B2C. Vous pouvez également sélectionner Tous les services et rechercher et sélectionner Azure AD B2C.

4. Sélectionnez Flux utilisateur.

5. Sélectionnez le flux utilisateur pour lequel vous souhaitez activer CAPTCHA. Par exemple, B2C_1_signinsignup.

6. Sélectionnez Propriétés.

7. Sous CAPTCHA (préversion), sélectionnez le flux pour lequel activer CAPTCHA pour, par exemple Activer CAPTCHA - Inscrivez-vous.

8. Cliquez sur Enregistrer.

Tester le flux utilisateur

Utilisez les étapes de test du flux utilisateur pour tester et vérifier que CAPTCHA est activé pour votre flux choisi. Vous devez être invité à entrer les caractères que vous voyez ou entendez en fonction du type CAPTCHA, du visuel ou de l’audio, que vous choisissez.

Pour activer CAPTCHA dans votre stratégie personnalisée, vous devez mettre à jour vos fichiers de stratégie personnalisée existants. Si vous n’avez pas de fichiers de stratégie personnalisée existants, téléchargez le fichier .zip ou clonez le référentiel à partir de https://github.com/Azure-Samples/active-directory-b2c-custom-policy-starterpack. Dans cet article, nous mettons à jour les fichiers XML dans le dossier /Display Controls Starterpack/LocalAccounts/ .

Déclarer des revendications

Vous avez besoin d’autres revendications pour activer CAPTCHA dans votre stratégie personnalisée :

1. Dans VS Code, ouvrez le fichier TrustFrameworkBase.XML .

2. Dans la ClaimsSchema section, déclarez des revendications à l’aide du code suivant :

    <!--<ClaimsSchema>-->
     ...
     <ClaimType Id="inputSolution">
       <DataType>string</DataType>
     </ClaimType>
   
     <ClaimType Id="solved">
       <DataType>boolean</DataType>
     </ClaimType>
   
     <ClaimType Id="reason">
       <DataType>string</DataType>
     </ClaimType>
   
     <ClaimType Id="azureregion">
       <DataType>string</DataType>
     </ClaimType>
   
     <ClaimType Id="challengeId">
       <DisplayName>The ID of the generated captcha</DisplayName>
       <DataType>string</DataType>
       <UserHelpText>Captcha challenge identifier</UserHelpText>
       <UserInputType>Paragraph</UserInputType>
     </ClaimType>
   
     <ClaimType Id="challengeType">
       <DisplayName>Type of captcha (visual / audio)</DisplayName>
       <DataType>string</DataType>
       <UserHelpText>Captcha challenge type</UserHelpText>
       <UserInputType>Paragraph</UserInputType>
     </ClaimType>
   
     <ClaimType Id="challengeString">
       <DisplayName>Captcha challenge code</DisplayName>
       <DataType>string</DataType>
       <UserHelpText>Captcha challenge code</UserHelpText>
       <UserInputType>Paragraph</UserInputType>
     </ClaimType>
   
     <ClaimType Id="captchaEntered">
       <DisplayName>Captcha entered by the user</DisplayName>
       <DataType>string</DataType>
       <UserHelpText>Enter the characters you see</UserHelpText>
       <UserInputType>TextBox</UserInputType>
     </ClaimType>
   
     <ClaimType Id="isCaptchaSolved">
       <DisplayName>Flag indicating that the captcha was successfully solved</DisplayName>
       <DataType>boolean</DataType>
     </ClaimType>
   
     <ClaimType Id="mfaCaptchaEnabled">
       <DisplayName>flag used to control captcha enabled in MFA</DisplayName>
       <DataType>string</DataType>
     </ClaimType>
   
     <ClaimType Id="signupCaptchaEnabled">
       <DisplayName>flag used to control captcha enabled during signup</DisplayName>
       <DataType>string</DataType>
     </ClaimType>
   
     <ClaimType Id="signinCaptchaEnabled">
       <DisplayName>flag used to control captcha enabled during signin</DisplayName>
       <DataType>string</DataType>
     </ClaimType>
     ...
    <!--<ClaimsSchema>-->
   

Configurer un contrôle d’affichage

Pour activer CAPTCHA pour votre stratégie personnalisée, vous utilisez un contrôle d’affichage CAPTCHA. Le contrôle d’affichage CAPTCHA génère et affiche l’image CAPTCHA.

Dans le fichier TrustFrameworkBase.XML , recherchez l’élément DisplayControls , puis ajoutez le contrôle d’affichage suivant en tant qu’élément enfant. Si vous n’avez DisplayControls pas encore d’élément, ajoutez-en un.

<!--<DisplayControls>-->
...    
<DisplayControl Id="captchaControlChallengeCode" UserInterfaceControlType="CaptchaControl" DisplayName="Help us beat the bots">    
    <InputClaims>
        <InputClaim ClaimTypeReferenceId="challengeType" />
        <InputClaim ClaimTypeReferenceId="challengeId" />
    </InputClaims>

    <DisplayClaims>
        <DisplayClaim ClaimTypeReferenceId="challengeType" ControlClaimType="ChallengeType" />
        <DisplayClaim ClaimTypeReferenceId="challengeId" ControlClaimType="ChallengeId" />
        <DisplayClaim ClaimTypeReferenceId="challengeString" ControlClaimType="ChallengeString" />
        <DisplayClaim ClaimTypeReferenceId="captchaEntered" ControlClaimType="CaptchaEntered" />
    </DisplayClaims>

    <Actions>
    <Action Id="GetChallenge">
        <ValidationClaimsExchange>
        <ValidationClaimsExchangeTechnicalProfile
            TechnicalProfileReferenceId="HIP-GetChallenge" />
        </ValidationClaimsExchange>
    </Action>

    <Action Id="VerifyChallenge">
        <ValidationClaimsExchange>
        <ValidationClaimsExchangeTechnicalProfile
            TechnicalProfileReferenceId="HIP-VerifyChallenge" />
        </ValidationClaimsExchange>
    </Action>
    </Actions>
</DisplayControl> 
...
<!--</DisplayControls>-->

Configurer un profil technique CAPTCHA

Le profil technique CAPTCHA Azure AD B2C vérifie le défi CAPTCHA. Ce profil technique peut générer un code CAPTCHA ou le vérifier en fonction de la façon dont vous le configurez.

Dans le fichier TrustFrameworkBase.XML , recherchez l’élément ClaimsProviders et ajoutez le fournisseur de revendications à l’aide du code suivant :

<!--<ClaimsProvider>-->
...
<ClaimsProvider>

    <DisplayName>HIPChallenge</DisplayName>

    <TechnicalProfiles>

    <TechnicalProfile Id="HIP-GetChallenge">
        <DisplayName>GetChallenge</DisplayName>
        <Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.CaptchaProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
        <Metadata>
            <Item Key="Operation">GetChallenge</Item>
            <Item Key="Brand">HIP</Item>
        </Metadata>
        <InputClaims>
            <InputClaim ClaimTypeReferenceId="challengeType" />
        </InputClaims>
        <DisplayClaims>
            <DisplayClaim ClaimTypeReferenceId="challengeString" />
        </DisplayClaims>
        <OutputClaims>
            <OutputClaim ClaimTypeReferenceId="challengeId" />
            <OutputClaim ClaimTypeReferenceId="challengeString" PartnerClaimType="ChallengeString" />
            <OutputClaim ClaimTypeReferenceId="azureregion" />
        </OutputClaims>
    </TechnicalProfile>
    <TechnicalProfile Id="HIP-VerifyChallenge">
        <DisplayName>Verify Code</DisplayName>
        <Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.CaptchaProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
        <Metadata>
        <Item Key="Brand">HIP</Item>
            <Item Key="Operation">VerifyChallenge</Item>
        </Metadata>
        <InputClaims>
            <InputClaim ClaimTypeReferenceId="challengeType" DefaultValue="Visual" />
            <InputClaim ClaimTypeReferenceId="challengeId" />
            <InputClaim ClaimTypeReferenceId="captchaEntered" PartnerClaimType="inputSolution" Required="true" />
            <InputClaim ClaimTypeReferenceId="azureregion" />
        </InputClaims>
        <DisplayClaims>
            <DisplayClaim ClaimTypeReferenceId="captchaEntered" />
        </DisplayClaims>
        <OutputClaims>
            <OutputClaim ClaimTypeReferenceId="challengeId" />
            <OutputClaim ClaimTypeReferenceId="isCaptchaSolved" PartnerClaimType="solved" />
            <OutputClaim ClaimTypeReferenceId="reason" PartnerClaimType="reason" />
        </OutputClaims>
    </TechnicalProfile>
    </TechnicalProfiles>
</ClaimsProvider>    
...
<!--<ClaimsProviders>-->

Le profil technique CAPTCHA que vous configurez avec l’opération GetChallenge génère et affiche la chaîne de défi CAPTCHA. Le profil technique CAPTCHA que vous configurez avec VerifyChallenge vérifie la chaîne de défi que l’utilisateur entre.

Mettre à jour les mises en page de la définition de contenu

Pour les différentes mises en page, utilisez les versions de mise en page suivantes :

Exemple :

Dans le fichier TrustFrameworkBase.XML , sous l’élément ContentDefinitions , localisez une définition de contenu avec Id="api.localaccountsignup », puis met à jour son DataUri comme indiqué dans le code suivant :

<!---<ContentDefinitions>-->
...
<ContentDefinition Id="api.localaccountsignup">
    ...
    <!--Update this DataUri-->
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.27</DataUri>
    ...
</ContentDefinition>
...
<!---</ContentDefinitions>-->

Nous spécifions la mise en page auto-assertée version 2.1.27.

Une fois que vous avez configuré vos profils techniques et contrôles d’affichage, vous pouvez spécifier le flux pour lequel vous souhaitez activer CAPTCHA.

Activer CAPTCHA pour le flux d’inscription ou de connexion

Pour activer CAPTCHA pour votre flux d’inscription ou de connexion, procédez comme suit :

1. Inspectez votre parcours utilisateur d’inscription, tel que SignUpOrSignIn, pour identifier le profil technique autodéclaré qui affiche votre expérience d’inscription ou de connexion.

2. Dans le profil technique, tel que LocalAccountSignUpWithLogonEmail, ajoutez une clé de métadonnées et une entrée de revendication d’affichage, comme indiqué dans le code suivant :

<TechnicalProfile Id="LocalAccountSignUpWithLogonEmail">
    ...
  <Metadata>
    ...
    <!--Add this metadata entry. Set value to true to activate CAPTCHA-->
    <Item Key="setting.enableCaptchaChallenge">true</Item>
    ...
  </Metadata>
    ...
  <DisplayClaims>
    ...
    <!--Add this display claim, which is a reference to the captcha display control-->
    <DisplayClaim DisplayControlReferenceId="captchaControlChallengeCode" /> 
    ...
  </DisplayClaims>
    ...
</TechnicalProfile>

L'entrée de réclamation d'affichage fait référence au contrôle d’affichage que vous avez configuré précédemment.

Activer CAPTCHA dans le flux MFA

Pour activer CAPTCHA dans le flux MFA, vous devez effectuer une mise à jour dans deux profils techniques, c’est-à-dire dans le profil technique autodéclaré et dans le profil technique du facteur téléphonique :

1. Inspectez votre parcours utilisateur d’inscription, tel que SignUpOrSignIn, pour identifier le profil technique autodéclaré et les profils techniques de facteur téléphonique responsables de votre flux d’inscription ou de connexion.

2. Dans les deux profils techniques, ajoutez une clé de métadonnées et une entrée de revendication d’affichage, comme indiqué dans le code suivant :

<TechnicalProfile Id="PhoneFactor-InputOrVerify">
    ...
  <Metadata>
    ...
    <!--Add this metadata entry. Value set to true-->
    <Item Key="setting.enableCaptchaChallenge">true</Item>
    ...
  </Metadata>
    ...
  <DisplayClaims>
    ...
    <!--Add this display claim-->
    <DisplayClaim DisplayControlReferenceId="captchaControlChallengeCode" /> 
    ...
  </DisplayClaims>
    ...
</TechnicalProfile>

Activer l’indicateur de fonctionnalité CAPTCHA

Pour appliquer CAPTCHA lors de l’inscription, de la connexion ou de l’authentification multifacteur, vous devez ajouter un profil technique qui active un indicateur de fonctionnalité pour chaque scénario, puis appeler le profil technique dans le parcours utilisateur.

1. Dans le fichier TrustFrameworkBase.XML , recherchez l’élément ClaimsProviders et ajoutez le fournisseur de revendications à l’aide du code suivant :

<!--<ClaimsProvider>-->
...
<ClaimsProvider>

    <DisplayName>Set Feature Flags</DisplayName>

    <TechnicalProfiles>

    <TechnicalProfile Id="SetFeatureDefaultValue">
        <DisplayName>Set Feature Flags</DisplayName>
        <Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.ClaimsTransformationProtocolProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
        <OutputClaims>
            <OutputClaim ClaimTypeReferenceId="signupCaptchaEnabled" DefaultValue="true" />
            <OutputClaim ClaimTypeReferenceId="signinCaptchaEnabled" DefaultValue="true" />
            <OutputClaim ClaimTypeReferenceId="mfaCaptchaEnabled" DefaultValue="true" />
        </OutputClaims>
    </TechnicalProfile>
    </TechnicalProfiles>
</ClaimsProvider>
...
<!--<ClaimsProviders>-->

2. Défini DefaultValue sur true ou false en fonction du scénario CAPTCHA

3. Ajoutez le profil technique des indicateurs de fonctionnalité au parcours utilisateur, puis mettez à jour l’ordre du reste des étapes d’orchestration.

<!--<UserJourneys>-->
...
<UserJourney Id="SignUpOrSignIn">
    <OrchestrationSteps>

        <!--Add this orchestration step-->
        <OrchestrationStep Order="1" Type="ClaimsExchange">
          <ClaimsExchanges>
            <ClaimsExchange Id="SetFeatureDefaultValue" TechnicalProfileReferenceId="SetFeatureDefaultValue" />
          </ClaimsExchanges>
        </OrchestrationStep>
...
<!--<UserJourneys>-->

Charger les fichiers de stratégie personnalisés

Utilisez les étapes décrites dans Charger les stratégies pour charger vos fichiers de stratégie personnalisés.

Tester la stratégie personnalisée

Utilisez les étapes de test de la stratégie personnalisée pour tester et vérifier que CAPTCHA est activé pour votre flux choisi. Vous devez être invité à entrer les caractères que vous voyez ou entendez en fonction du type CAPTCHA, du visuel ou de l’audio, que vous choisissez.