Usar reCAPTCHA no Adaptive Forms using-reCAPTCHA-in-adaptive-forms

O Adobe recomenda o uso de Componentes principaisde captura de dados moderna e extensível para criar um novo Forms Adaptávelou adicionar o Forms Adaptável às páginas do AEM Sites. Esses componentes representam um avanço significativo na criação do Forms adaptável, garantindo experiências de usuário impressionantes. Este artigo descreve a abordagem mais antiga para criar o Forms adaptável usando componentes de base.

Versão
Link do artigo
AEM 6.5
Clique aqui
AEM as a Cloud Service
Este artigo
Aplica-se a
Formulário adaptável baseado em Componentes de base.
Para o formulário adaptável baseado em Componentes principais, Clique aqui.

O CAPTCHA (um teste de Turing público e completamente automatizado para diferenciar computadores e humanos) é um programa comumente usado em transações online para distinguir entre humanos e programas ou bots automatizados. O recurso apresenta um desafio e avalia a resposta do usuário para determinar se é um humano ou um bot interagindo com o site. O CAPTCHA impede que o usuário prossiga se o teste falhar e ajuda a tornar as transações online seguras, evitando que bots publiquem spam ou outro conteúdo mal-intencionado.

O AEM Forms as a Cloud Service é compatível com as seguintes soluções CAPTCHA:

Configurar o serviço reCAPTCHA pelo Google google-reCAPTCHA

Os autores de formulários podem usar o serviço reCAPTCHA pelo Google para implementar o reCAPTCHA no Adaptive Forms. Ele oferece recursos avançados de CAPTCHA para proteger o site. Para obter mais informações sobre como o reCAPTCHA funciona, consulte Google reCAPTCHA. O AEM Forms oferece suporte a reCAPTCHA v2 e reCAPTCHA Enterprise. Nenhuma outra versão é compatível. Observe também que o reCAPTCHA no Adaptive Forms não é compatível no modo offline no aplicativo AEM Forms. Com base em seu requisito, você pode configurar o serviço reCAPTCHA para habilitar:

reCAPTCHA

Configurar o reCAPTCHA Enterprise steps-to-implement-reCAPTCHA-enterprise-in-forms

  1. Crie ou selecione um projeto do Google Cloud e habilite a API corporativa do reCAPTCHA.

  2. Obtenha a ID do Projeto e crie uma chave de API e uma chave de site para sites.

  3. Criar contêiner de configuração para serviços em nuvem.

    1. Vá para Ferramentas > Geral > Navegador de Configuração.

    2. Selecione uma pasta ou crie uma pasta e ative a pasta para configurações de nuvem seguindo estas etapas:

      1. No Navegador de Configuração, selecione a pasta e selecione Propriedades.
      2. Na caixa de diálogo Propriedades de Configuração, habilite Configurações de Nuvem.
      3. Selecione Salvar e fechar para salvar a configuração e sair da caixa de diálogo.
  4. Configure o serviço de nuvem para reCAPTCHA Enterprise.

    1. Na instância do autor do Experience Manager, vá para tools-1 > Cloud Service.
    2. Selecione reCAPTCHA. A página Configurações é aberta. Selecione o contêiner de configuração criado e selecione Criar.
    3. Selecione a versão como reCAPTCHA Enterprise e especifique o Nome, a ID do Projeto, a Chave do Site e a Chave da API (Obtida na Etapa 2) para o serviço reCAPTCHA Enterprise.
    4. Selecione o tipo de chave; o tipo de chave deve ser igual à chave do site que você configurou no projeto do Google Cloud, por exemplo, Chave do site da caixa de seleção ou Chave do site com base em pontuação.
    5. Especifique uma pontuação de limite no intervalo de 0 a 1. Pontuações maiores ou iguais às pontuações de limite identificam a interação humana, caso contrário, são consideradas interação de bot.
    6. Selecione Criar para criar a configuração do serviço de nuvem.

Quando o serviço reCAPTCHA Enterprise estiver ativado, ele estará disponível para uso em formulários adaptáveis. Consulte usando CAPTCHA em formulários adaptáveis.

Configurar o Google reCAPTCHA v2 steps-to-implement-reCAPTCHA-v2-in-forms

  1. Obtenha o par de chaves da API do reCAPTCHA da Google. Inclui uma chave do site e uma chave secreta.

  2. Criar contêiner de configuração para serviços em nuvem.

    1. Vá para Ferramentas > Geral > Navegador de Configuração.

    2. Selecione uma pasta ou crie uma pasta e ative a pasta para configurações de nuvem seguindo estas etapas:

      1. No Navegador de Configuração, selecione a pasta e selecione Propriedades.
      2. Na caixa de diálogo Propriedades de Configuração, habilite Configurações de Nuvem.
      3. Selecione Salvar e fechar para salvar a configuração e sair da caixa de diálogo.
  3. Configure o serviço de nuvem para o reCAPTCHA v2.

    1. Na instância do autor AEM, vá para tools-1 > Cloud Service.
    2. Selecione reCAPTCHA. A página Configurações é aberta. Selecione o contêiner de configuração criado e selecione Criar.
    3. Selecione a versão como reCAPTCHA v2, especifique o Nome, a Chave do Site e a Chave Secreta para o serviço reCAPTCHA (Obtido na Etapa 1) e selecione Criar para criar a configuração do serviço de nuvem.
    4. Na caixa de diálogo Editar componente, especifique o site e as chaves secretas obtidas na etapa 1. Selecione Salvar configurações e OK para concluir a configuração.

    Depois que o serviço reCAPTCHA é configurado, ele é disponibilizado para uso em formulários adaptáveis. Para obter mais informações, consulte usando CAPTCHA em formulários adaptáveis.

Usar o Google reCAPTCHA em formulários adaptáveis using-reCAPTCHA

Para usar o Google reCAPTCHA em um formulário adaptável:

  1. Abra um formulário adaptável no modo de edição.

    note note
    NOTE
    Verifique se o contêiner de configuração selecionado ao criar o formulário adaptável contém o serviço de nuvem reCAPTCHA. Também é possível editar propriedades do formulário adaptável para alterar o contêiner de configuração associado ao formulário.
  2. No navegador de componentes, arraste e solte o componente Captcha no formulário adaptável.

    note note
    NOTE
    • Não há suporte para o uso de mais de um componente Captcha em um formulário adaptável. Além disso, não é recomendável usar CAPTCHA em um painel marcado para carregamento lento ou em um fragmento.
    • O reCaptcha é sensível ao tempo e expira em cerca de dois minutos. Portanto, é recomendável colocar o componente Captcha antes do botão Enviar no formulário adaptável.
  3. Selecione o componente Captcha adicionado e selecione cmppr para editar suas propriedades.

  4. Especifique um título para o widget CAPTCHA. O valor padrão é Captcha. Selecione Ocultar título se não quiser que o título seja exibido.

  5. No menu suspenso do serviço Captcha, selecione reCAPTCHA para habilitar o serviço reCAPTCHA se você o tiver configurado conforme descrito no serviço reCAPTCHA do Google.

  6. Selecione uma configuração na lista suspensa Configurações para reCAPTCHA Enterprise ou reCAPTCHA v2

    1. Se você selecionar a versão reCAPTCHA Enterprise, o tipo de chave poderá ser caixa de seleção ou com base na pontuação. Ela será baseada na sua seleção ao configurar a chave do site para sites:
    note note
    NOTE
    • Na configuração da nuvem com tipo de chave como caixa de seleção, a mensagem de erro personalizada será exibida como uma mensagem embutida se a validação de captcha falhar.
    • Na configuração da nuvem com tipo de chave como baseado em pontuação, a mensagem de erro personalizada será exibida como uma mensagem pop-up se a validação de captcha falhar.
    1. Você pode selecionar o tamanho como Normal e Compacto.
    2. Você pode selecionar uma Referência de Ligação. Em Referência de Ligação, os dados enviados são dados associados, caso contrário, são dados não associados. Abaixo estão exemplos XML de dados não vinculados e dados vinculados (com referência de vinculação como SSN), respectivamente, quando um formulário é enviado.
    code language-xml
            <?xml version="1.0" encoding="UTF-8" standalone="no"?>
            <afData>
            <afUnboundData>
                <data>
                    <captcha16820607953761>
                        <captchaType>reCaptchaEnterprise</captchaType>
                        <captchaScore>0.9</captchaScore>
                    </captcha16820607953761>
                </data>
            </afUnboundData>
            <afBoundData>
                <Root
                    xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/"
                    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
                    <PersonalDetails>
                        <SSN>371237912</SSN>
                        <FirstName>Sarah </FirstName>
                        <LastName>Smith</LastName>
                    </PersonalDetails>
                    <OtherInfo>
                        <City>California</City>
                        <Address>54 Residency</Address>
                        <State>USA</State>
                        <Zip>123112</Zip>
                    </OtherInfo>
                </Root>
            </afBoundData>
            <afSubmissionInfo>
                <stateOverrides/>
                <signers/>
                <afPath>/content/dam/formsanddocuments/captcha-form</afPath>
                <afSubmissionTime>20230608034928</afSubmissionTime>
            </afSubmissionInfo>
            </afData>
    
    code language-xml
            <?xml version="1.0" encoding="UTF-8" standalone="no"?>
            <afData>
            <afUnboundData>
                <data/>
            </afUnboundData>
            <afBoundData>
                <Root
                    xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/"
                    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
                    <PersonalDetails>
                        <SSN>
                            <captchaType>reCaptchaEnterprise</captchaType>
                            <captchaScore>0.9</captchaScore>
                        </SSN>
                        <FirstName>Sarah</FirstName>
                        <LastName>Smith</LastName>
                    </PersonalDetails>
                    <OtherInfo>
                        <City>California</City>
                        <Address>54 Residency</Address>
                        <State>USA</State>
                        <Zip>123112</Zip>
                    </OtherInfo>
                </Root>
            </afBoundData>
            <afSubmissionInfo>
                <stateOverrides/>
                <signers/>
                <afPath>/content/dam/formsanddocuments/captcha-form</afPath>
                <afSubmissionTime>20230608035111</afSubmissionTime>
            </afSubmissionInfo>
            </afData>
    

    Se você selecionar a versão reCAPTCHA v2:

    1. Você pode selecionar o tamanho como Normal ou Compacto para o widget re do reCAPTCHA.
    2. Você pode selecionar a opção Invisível para mostrar o desafio de CAPTCHA somente no caso de uma atividade suspeita.

    O serviço reCAPTCHA é ativado no formulário adaptável. Você pode visualizar o formulário e ver o CAPTCHA funcionando. O símbolo protegido pelo reCAPTCHA, exibido abaixo, é exibido nos formulários protegidos.
    Google protegido pelo selo reCAPTCHA

  7. Salve as propriedades.

NOTE
Não selecione Padrão no menu suspenso do serviço Captcha, pois o serviço AEM CAPTCHA padrão está obsoleto.

Mostrar ou ocultar o componente CAPTCHA com base em regras show-hide-captcha

É possível optar por mostrar ou ocultar o componente CAPTCHA com base nas regras aplicadas em um componente de um Formulário adaptável. Selecione o componente, selecione editar regras e selecione Criar para criar uma regra. Para obter mais informações sobre como criar regras, consulte Editor de regras.

Por exemplo, o componente CAPTCHA deve ser exibido em um formulário adaptável somente se o campo Valor da moeda no formulário tiver um valor maior que 25000.

Selecione o campo Valor da Moeda no formulário e crie as seguintes regras:

Mostrar ou ocultar regras

NOTE
Ao selecionar uma configuração do reCAPTCHA v2 e o tamanho estiver definido como Invisível, a opção mostrar/ocultar permanecerá desabilitada.

Validar CAPTCHA validate-captcha

É possível validar CAPTCHA em um Formulário adaptável ao enviar o formulário ou basear a validação CAPTCHA em ações e condições do usuário.

Validar CAPTCHA no envio do formulário validation-form-submission

Para validar um CAPTCHA automaticamente ao enviar um Formulário adaptável:

  1. Selecione o componente CAPTCHA e selecione cmppr para exibir as propriedades do componente.
  2. Na seção Validar CAPTCHA, selecione Validar CAPTCHA no envio do formulário.
  3. Selecione Concluído para salvar as propriedades do componente.

Validar CAPTCHA em ações e condições do usuário validate-captcha-user-action

Para validar um CAPTCHA com base nas condições e ações do usuário:

  1. Selecione o componente CAPTCHA e selecione cmppr para exibir as propriedades do componente.
  2. Na seção Validar CAPTCHA, selecione Validar CAPTCHA em uma ação do usuário.
  3. Selecione Concluído para salvar as propriedades do componente.

Experience Manager Forms fornece a API ValidateCAPTCHA para validar CAPTCHA usando condições predefinidas. Você pode chamar a API usando uma Ação enviar personalizada ou definindo regras em componentes em um Formulário adaptável.

Este é um exemplo de uma API ValidateCAPTCHA para validar CAPTCHA usando condições predefinidas:

if (slingRequest.getParameter("numericbox1614079614831").length() >= 5) {
     GuideCaptchaValidatorProvider apiProvider = sling.getService(GuideCaptchaValidatorProvider.class);
        String formPath = slingRequest.getResource().getPath();
        String captchaData = slingRequest.getParameter(GuideConstants.GUIDE_CAPTCHA_DATA);
        if (!apiProvider.validateCAPTCHA(formPath, captchaData).isCaptchaValid()){
            response.setStatus(400);
            return;
        }
    }

O exemplo significa que a API ValidateCAPTCHA valida o CAPTCHA no formulário somente se o número de dígitos na caixa numérica especificada pelo usuário durante o preenchimento do formulário for maior que 5.

Opção 1: Use a API ValidateCAPTCHA Experience Manager Forms para validar CAPTCHA usando uma Ação de Envio personalizada

Execute as seguintes etapas para usar a API ValidateCAPTCHA para validar CAPTCHA usando uma Ação de envio personalizada:

  1. Adicione o script que inclui a API ValidateCAPTCHA para personalizar a Ação de Envio. Para obter mais informações sobre Ações de Envio personalizadas, consulte Criar uma Ação de Envio personalizada para o Forms Adaptável.
  2. Selecione o nome da Ação de Envio personalizada na lista suspensa Ação de Envio nas propriedades Envio de um Formulário adaptável.
  3. Selecione Enviar. O CAPTCHA é validado com base nas condições definidas na API ValidateCAPTCHA da Ação de Envio personalizada.

Opção 2: Use a API Experience Manager Forms ValidateCAPTCHA para validar CAPTCHA em uma ação do usuário antes de enviar o formulário

Você também pode invocar a API ValidateCAPTCHA aplicando regras em um componente em um Formulário adaptável.

Por exemplo, você adiciona um botão Validar CAPTCHA em um Formulário adaptável e cria uma regra para chamar um serviço com o clique de um botão.

A figura a seguir ilustra como você pode chamar um serviço clicando em um botão Validar CAPTCHA:

Validar CAPTCHA

Você pode chamar o servlet personalizado que inclui a API ValidateCAPTCHA usando o editor de regras e habilitar ou desabilitar o botão enviar do Formulário adaptável com base no resultado da validação.

Da mesma forma, você pode usar o editor de regras para incluir um método personalizado para validar CAPTCHA em um Formulário adaptável.

Editar domínio do serviço reCAPTCHA reCAPTCHA-service-domain

O serviço reCAPTCHA usa https://www.recaptcha.net/ como o domínio padrão. Você pode modificar as configurações para definir https://www.google.com/ ou qualquer nome de domínio personalizado para carregar, renderizar e validar o serviço reCAPTCHA.

Defina a propriedade af.cloudservices.recaptcha.domain da configuração Configuração do Canal da Web de Formulário Adaptável e Comunicação Interativa para especificar https://www.google.com/ ou qualquer outro nome de domínio personalizado. O seguinte arquivo JSON exibe uma amostra:

{
  "af.cloudservices.recaptcha.domain": "https://www.google.com/"
}

Para definir valores de uma configuração, Gere Configurações OSGi usando o SDK do AEM e implante a configuração na instância do Cloud Service.

Consulte também see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab