Habilitar CAPTCHA no Azure Active Directory B2C

• Crie um fluxo de usuários para que os usuários possam se inscrever e entrar em seu aplicativo.
• Registar uma aplicação Web.

• Conclua as etapas em Iniciar com políticas personalizadas no Active Directory B2C. Este tutorial orienta você sobre como atualizar arquivos de política personalizados para usar sua configuração de locatário do Azure AD B2C.
• Registar uma aplicação Web.

1. Inicie sessão no portal Azure.

2. Se tiver acesso a vários inquilinos, selecione o ícone Definições no menu superior para mudar para o inquilino do Azure AD B2C no menu Diretórios + subscrições.

3. No menu à esquerda, selecione Azure AD B2C. Ou, selecione Todos os serviços e procure e selecione Azure AD B2C.

4. Selecione Fluxos de usuário.

5. Selecione o fluxo de usuário para o qual você deseja habilitar o CAPTCHA. Por exemplo, B2C_1_signinsignup.

6. Selecione Propriedades.

7. Em CAPTCHA (Pré-visualização), selecione o fluxo para o qual ativar o CAPTCHA, como Ativar CAPTCHA - Inscrever-se.

8. Selecione Guardar.

Testar o fluxo do usuário

Use as etapas em Testar o fluxo do usuário para testar e confirmar se o CAPTCHA está habilitado para o fluxo escolhido. Você deve ser solicitado a inserir os caracteres que você vê ou ouve, dependendo do tipo CAPTCHA, visual ou áudio, que você escolher.

Para habilitar o CAPTCHA em sua política personalizada, você precisa atualizar seus arquivos de política personalizados existentes. Se você não tiver nenhum arquivo de política personalizado existente, baixe o arquivo .zip ou clone o repositório do https://github.com/Azure-Samples/active-directory-b2c-custom-policy-starterpack. Neste artigo, atualizamos os arquivos XML na pasta /Display Controls Starterpack/LocalAccounts/ .

Declarar reclamações

Você precisa de mais declarações para habilitar o CAPTCHA em sua política personalizada:

1. No VS Code, abra o arquivo TrustFrameworkBase.XML .

2. ClaimsSchema Na seção, declare reivindicações usando o seguinte código:

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

Configurar um controle de exibição

Para habilitar o CAPTCHA para sua política personalizada, use um controle de exibição CAPTCHA. O controle de exibição CAPTCHA gera e renderiza a imagem CAPTCHA.

No arquivo TrustFrameworkBase.XML , localize o DisplayControls elemento e, em seguida, adicione o seguinte controle de exibição como um elemento filho. Se ainda não tiver um DisplayControls elemento, adicione um.

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

Configurar um perfil técnico CAPTCHA

O perfil técnico do CAPTCHA do Azure AD B2C verifica o desafio CAPTCHA. Este perfil técnico pode gerar um código CAPTCHA ou verificá-lo dependendo de como você o configura.

No arquivo TrustFrameworkBase.XML , localize o ClaimsProviders elemento e adicione o provedor de declarações usando o seguinte código:

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

O perfil técnico CAPTCHA que você configura com a operação GetChallenge gera e exibe a cadeia de caracteres de desafio CAPTCHA. O perfil técnico CAPTCHA que você configura com o VerifyChallenge verifica a cadeia de caracteres de desafio inserida pelo usuário.

Atualizar os layouts de página da definição de conteúdo

Para os vários layouts de página, use as seguintes versões de layout de página:

Exemplo:

No arquivo TrustFrameworkBase.XML , sob o ContentDefinitions elemento , localize uma definição de conteúdo com Id="api.localaccountsignup" e, em seguida, atualize seu DataUri conforme mostrado no código a seguir:

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

Especificamos a versão do layout de página autodeclarada como 2.1.27.

Depois de configurar seus perfis técnicos e controles de exibição, você pode especificar o fluxo para o qual deseja habilitar o CAPTCHA.

Habilite o CAPTCHA para fluxo de inscrição ou login

Para habilitar o CAPTCHA para seu fluxo de inscrição ou entrada, use as seguintes etapas:

1. Inspeccione a sua jornada de inscrição e login, como SignUpOrSignIn, para identificar o perfil técnico autoassumido que exibe a sua experiência de inscrição ou login.

2. No perfil técnico, como LocalAccountSignUpWithLogonEmail, adicione uma chave de metadados e uma entrada de declaração de exibição, conforme mostrado no código a seguir:

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

A entrada de declaração de exibição faz referência ao controle de exibição que você configurou anteriormente.

Habilitar CAPTCHA no fluxo de MFA

Para ativar o CAPTCHA no fluxo de MFA, tens de fazer uma atualização em dois perfis técnicos, nomeadamente no perfil técnico autoafirmado e no perfil técnico do fator telefone:

1. Inspecione a sua jornada de inscrição e login do utilizador, como SignUpOrSignIn, para identificar o perfil técnico autoafirmado e os perfis técnicos do fator telefone que são responsáveis pelo seu fluxo de inscrição ou login.

2. Em ambos os perfis técnicos, adicione uma chave de metadados e uma entrada de declaração de exibição, conforme mostrado no código a seguir:

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

Ativar sinalizador de recurso CAPTCHA

Para impor o CAPTCHA durante a inscrição, entrada ou MFA, você precisa adicionar um perfil técnico que habilite um sinalizador de recurso para cada cenário e, em seguida, chamar o perfil técnico na jornada do usuário.

1. No arquivo TrustFrameworkBase.XML , localize o ClaimsProviders elemento e adicione o provedor de declarações usando o seguinte código:

<!--<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. Definido DefaultValue como true ou false dependendo do cenário CAPTCHA

3. Adicione o perfil técnico dos sinalizadores de recursos à jornada do usuário e, em seguida, atualize a ordem do restante das etapas de orquestração.

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

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

Carregue os arquivos de política personalizados

Use as etapas em Carregar as políticas para carregar seus arquivos de política personalizados.

Testar a política personalizada

Use as etapas em Testar a política personalizada para testar e confirmar se o CAPTCHA está habilitado para o fluxo escolhido. Você deve ser solicitado a inserir os caracteres que você vê ou ouve, dependendo do tipo CAPTCHA, visual ou áudio, que você escolher.