Aktivera CAPTCHA i Azure Active Directory B2C

• Skapa ett användarflöde så att användare kan registrera sig och logga in på ditt program.
• Registrera ett webbprogram.

• Slutför stegen i Kom igång med anpassade principer i Active Directory B2C. Handledningen visar hur du uppdaterar anpassade principfiler för att använda konfigurationen för din Azure AD B2C-klient.
• Registrera ett webbprogram.

1. Logga in på Azure-portalen.

2. Om du har åtkomst till flera klientorganisationer väljer du ikonen Inställningar på den översta menyn för att växla till din Azure AD B2C-klientorganisation från menyn Kataloger + prenumerationer.

3. I den vänstra menyn väljer du Azure AD B2C. Eller välj Alla tjänster och sök efter och välj Azure AD B2C.

4. Välj Användarflöden.

5. Välj det användarflöde som du vill aktivera CAPTCHA för. Till exempel B2C_1_signinsignup.

6. Välj Egenskaper.

7. Under CAPTCHA (förhandsversion) väljer du det flöde som du vill aktivera CAPTCHA för, till exempel Aktivera CAPTCHA – Registrera dig.

8. Välj Spara.

Testa användarflödet

Använd stegen i Testa användarflödet för att testa och bekräfta att CAPTCHA är aktiverat för det valda flödet. Du bör uppmanas att ange de tecken som du ser eller hör beroende på VILKEN CAPTCHA-typ, visuellt objekt eller ljud du väljer.

Om du vill aktivera CAPTCHA i din anpassade princip måste du uppdatera dina befintliga anpassade principfiler. Om du inte har några befintliga anpassade principfiler laddar du ned .zip-filen eller klonar lagringsplatsen från https://github.com/Azure-Samples/active-directory-b2c-custom-policy-starterpack. I den här artikeln uppdaterar vi XML-filerna i mappen /Display Controls Starterpack/LocalAccounts/ .

Deklarera anspråk

Du behöver fler anspråk för att aktivera CAPTCHA i din anpassade princip:

1. Öppna filen TrustFrameworkBase.XML i VS Code.

2. I avsnittet ClaimsSchema deklarerar du anspråk med hjälp av följande kod:

    <!--<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>-->
   

Konfigurera en visningskontroll

Om du vill aktivera CAPTCHA för din anpassade princip använder du en CAPTCHA-visningskontroll. CAPTCHA-visningskontrollen genererar och återger CAPTCHA-avbildningen.

Leta upp elementet i DisplayControls och lägg sedan till följande visningskontroll som ett underordnat element. Om du inte redan har DisplayControls element lägger du till ett.

<!--<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>-->

Konfigurera en teknisk CAPTCHA-profil

Azure AD B2C CAPTCHA:s tekniska profil verifierar CAPTCHA-utmaningen. Den här tekniska profilen kan generera en CAPTCHA-kod eller verifiera den beroende på hur du konfigurerar den.

Leta upp elementet i ClaimsProviders och lägg till anspråksprovidern med hjälp av följande kod:

<!--<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>-->

Den tekniska CAPTCHA-profilen som du konfigurerar med GetChallenge-åtgärden genererar och visar CAPTCHA-utmaningssträngen. Den tekniska CAPTCHA-profilen som du konfigurerar med VerifyChallenge verifierar den utmaningssträng som användaren anger.

Uppdatera innehållsdefinitionens sidlayouter

Använd följande sidlayoutversioner för de olika sidlayouterna:

Exempel:

Leta upp en innehållsdefinition med Id="api.localaccountsignup" under elementet ContentDefinitions i den TrustFrameworkBase.XML filen och uppdaterar sedan dess DataUri enligt följande kod:

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

Vi anger den självföreskrivna sidlayoutversionen som 2.1.27.

När du har konfigurerat dina tekniska profiler och visningskontroller kan du ange det flöde som du vill aktivera CAPTCHA för.

Aktivera CAPTCHA för registrerings- eller inloggningsflöde

Använd följande steg för att aktivera CAPTCHA för ditt registrerings- eller inloggningsflöde:

1. Granska din registrerings- och inloggningsresa, till exempel SignUpOrSignIn, för att identifiera den självdeklarerade tekniska profil som visar din registrerings- eller inloggningsupplevelse.

2. I den tekniska profilen, till exempel LocalAccountSignUpWithLogonEmail, lägger du till en metadatanyckel och en visningsanspråkspost enligt följande kod:

<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>

Visningsanspråksposten refererar till visningskontrollen som du konfigurerade tidigare.

Aktivera CAPTCHA i MFA-flöde

För att aktivera CAPTCHA i MFA-flödet måste du uppdatera två tekniska profiler, det vill säga: i den självbekräftade tekniska profilen och i den tekniska profilen för telefonfaktorn:

1. Granska din registrerings- och inloggningsjourney, till exempel SignUpOrSignIn, för att identifiera de självdeklarerade tekniska profiler och telefonfaktor-tekniska profiler som ansvarar för ditt registrerings- eller inloggningsflöde.

2. I båda de tekniska profilerna lägger du till en metadatanyckel och en visningsanspråkspost enligt följande kod:

<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>

Aktivera CAPTCHA-funktionsflagga

För att framtvinga CAPTCHA under registrering, inloggning eller MFA måste du lägga till en teknisk profil som aktiverar en funktionsflagga för varje scenario och sedan anropa den tekniska profilen under användarresan.

1. Leta upp elementet i ClaimsProviders och lägg till anspråksprovidern med hjälp av följande kod:

<!--<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. Ange DefaultValue till sant eller falskt beroende på CAPTCHA-scenariot

3. Lägg till den tekniska profilen för funktionsflaggor i användarresan och uppdatera sedan ordningen på resten av orkestreringsstegen.

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

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

Ladda upp anpassade policyfiler

Följ stegen i Ladda upp principerna för att ladda upp dina anpassade principfiler.

Testa den anpassade policyn

Använd stegen i Testa den anpassade principen för att testa och bekräfta att CAPTCHA är aktiverat för det valda flödet. Du bör uppmanas att ange de tecken som du ser eller hör beroende på VILKEN CAPTCHA-typ, visuellt objekt eller ljud du väljer.