Habilitar CAPTCHA no Azure Active Directory B2C

• Crie um fluxo de usuário para que os usuários possam se inscrever e fazer login no seu aplicativo.
• Registrar um aplicativo da web.

• Conclua as etapas em Comece a usar políticas personalizadas no Active Directory B2C. Esse tutorial mostra como atualizar arquivos de política personalizados para usar sua configuração de locatário do Azure AD B2C.
• Registrar um aplicativo da web.

1. Entre no portal do Azure.

2. Se você tiver acesso a vários locatários, selecione o ícone Configurações no menu superior para alternar para seu locatário do Azure AD B2C no menu Diretórios + assinaturas.

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

4. Escolha 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 (Versão prévia), selecione o fluxo para o qual deseja habilitar o CAPTCHA, como Habilitar CAPTCHA - Inscrever-se.

8. Clique em Salvar.

Testar o fluxo de 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ê será solicitado a inserir os caracteres que vê ou ouve, dependendo do tipo de CAPTCHA, visual ou sonoro, que escolher.

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

Declarar reivindicaçõ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. Na ClaimsSchema 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 elemento DisplayControls e adicione o seguinte controle de exibição como um elemento filho. Se você ainda não tiver o elemento DisplayControls, 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 CAPTCHA do Azure AD B2C verifica o desafio CAPTCHA. Esse 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 do CAPTCHA que você configura com a operação GetChallenge gera e exibe a cadeia de caracteres de desafio do CAPTCHA. O perfil técnico CAPTCHA que você configura com o VerifyChallenge verifica a sequência de desafios inserida pelo usuário.

Atualizar layouts de página de 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, no elemento ContentDefinitions, localize uma definição de conteúdo com Id="api.localaccountsignup" e 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 autoafirmada 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.

Habilitar CAPTCHA para fluxo de inscrição ou login

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

1. Inspecione a jornada do usuário de inscrição, como SignUpOrSignIn, para identificar o perfil técnico autoafirmado que exibe sua experiência de inscrição ou login.

2. No perfil técnico, como LocalAccountSignUpWithLogonEmai, 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 reivindicação de exibição faz referência ao controle de exibição que você configurou anteriormente.

Habilitar CAPTCHA no fluxo MFA

Para habilitar o CAPTCHA no fluxo MFA, você precisa fazer uma atualização em dois perfis técnicos, ou seja, no perfil técnico autoafirmado e no perfil técnico fator telefone:

1. Inspecione a jornada do usuário de inscrição e entrada, como SignUpOrSignIn, para identificar o perfil técnico autoafirmado e os perfis técnicos do fator telefônico que são responsáveis ​​pelo seu fluxo de inscrição ou entrada.

2. Em ambos os perfis técnicos, adicione uma chave de metadados e uma entrada de reivindicaçã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>

Habilitar sinalizador de recurso CAPTCHA

Para aplicar o CAPTCHA durante a inscrição, o login ou o 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. Defina DefaultValue como verdadeiro ou falso dependendo do cenário do CAPTCHA

3. Adicione o perfil técnico dos sinalizadores de recursos à jornada do usuário e atualize a ordem das demais 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>-->

Carregar os arquivos de política personalizados

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

Teste 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ê será solicitado a inserir os caracteres que vê ou ouve, dependendo do tipo de CAPTCHA, visual ou sonoro, que escolher.