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

O Adobe recomenda o uso da captura de dados moderna e extensível Componentes principaispara criação de um novo Forms adaptávelou adição de 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 formulários adaptáveis com base nos 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.

AEM Forms suporte a reCAPTCHA no Adaptive Forms. Você pode usar o serviço reCAPTCHA pelo Google para implementar o CAPTCHA.

NOTE
  • AEM Forms suporte para reCaptcha v2 e reCaptcha Enterprise. Nenhuma outra versão é compatível.
  • O reCAPTCHA no Adaptive Forms não é compatível no modo offline no AEM Forms aplicativo.

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 serviço reCAPTCHA inclui reCAPTCHA v2 e reCAPTCHA Enterprise que você pode integrar a 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. Criar ou selecionar um Projeto do Google Cloud e habilitar API corporativa do reCAPTCHA.

  2. Obtenha o ID do projeto e criar um Chave de API e uma chave do site para sites.

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

    1. Ir 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, ative Configurações da nuvem.
      3. Selecionar Salvar e fechar para salvar a configuração e sair do diálogo.
  4. Configurar o serviço em nuvem para reCAPTCHA Enterprise.

    1. Na instância do autor do Experience Manager, acesse tools-1 > Cloud Service.
    2. Selecionar reCAPTCHA. A página Configurações é aberta. Selecione o contêiner de configuração criado e selecione Criar.
    3. Selecionar versão como reCAPTCHA Enterprise e especifique Nome, ID do projeto, Chave do site e Chave de API (Obtida na Etapa 2) para o serviço reCAPTCHA Enterprise.
    4. Selecione o tipo de chave, o tipo de chave deve ser o mesmo que a 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. Especificar um 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. Selecionar Criar para criar a configuração do cloud service.

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

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

  1. Obter Par de chaves da API do reCAPTCHA do Google. Inclui uma chave do site e uma chave secreta.

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

    1. Ir 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, ative Configurações da nuvem.
      3. Selecionar Salvar e fechar para salvar a configuração e sair do diálogo.
  3. Configure o serviço de nuvem para o reCAPTCHA v2.

    1. Na instância do autor do AEM, acesse tools-1 > Cloud Service.
    2. Selecionar reCAPTCHA. A página Configurações é aberta. Selecione o contêiner de configuração criado e selecione Criar.
    3. Selecionar versão como reCAPTCHA v2 , especifique Nome, Chave do site e Chave secreta para o serviço reCAPTCHA (Obtido na Etapa 1) e selecione Criar para criar a configuração do cloud service.
    4. Na caixa de diálogo Editar componente, especifique o site e as chaves secretas obtidas na etapa 1. Selecionar Salvar configurações e selecione 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 uso de CAPTCHA em formulários adaptáveis.

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

Para usar o reCAPTCHA em formulários adaptáveis:

  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 a 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. Selecionar Ocultar título se não quiser que o título seja exibido.

  5. No Serviço de captcha selecione reCAPTCHA para ativar o serviço reCAPTCHA se você o tiver configurado conforme descrito em Serviço reCAPTCHA da Google.

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

    1. Se você selecionar reCAPTCHA Enterprise versão, o tipo de chave pode ser de caixa de seleção ou baseado em pontuação, Baseia-se na sua seleção ao configurar chave do site para sites:
    note note
    NOTE
    • Na configuração da nuvem com tipo de chave as caixa de seleção, a mensagem de erro personalizada será exibida como uma mensagem em linha se a validação do captcha falhar.
    • Na configuração da nuvem com tipo de chave as baseado em pontuação, a mensagem de erro personalizada será exibida como uma mensagem pop-up se a validação do captcha falhar.
    1. Você pode selecionar o tamanho como Normal e Compacto.
    2. É possível selecionar um Referência de vinculação, Em Referência de vinculação os dados enviados são dados vinculados, caso contrário, são dados desvinculados. 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 reCAPTCHA v2 versão:

    1. Você pode selecionar o tamanho como Normal ou Compacto para o widget reCAPTCHA.
    2. É possível selecionar a variável Invisível opção 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. A variável protegido pelo reCAPTCHA exibido abaixo, é exibido nos formulários protegidos.
    Google protegido pelo selo reCAPTCHA

  7. Salve as propriedades.

NOTE
Não selecionar Padrão no menu suspenso do serviço Captcha, quando o serviço AEM CAPTCHA padrão é descontinuado.

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 e 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 Valor da moeda no formulário e crie as seguintes regras:

Mostrar ou ocultar regras

NOTE
Quando você seleciona uma configuração reCAPTCHA v2 e o tamanho é definido como Invisível, a opção mostrar/ocultar permanece desativada.

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 visualizar as propriedades do componente.
  2. No Validar CAPTCHA , selecione Validar CAPTCHA no envio do formulário.
  3. Selecionar 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 visualizar as propriedades do componente.
  2. No Validar CAPTCHA , selecione Validar CAPTCHA em uma ação do usuário.
  3. Selecionar Concluído para salvar as propriedades do componente.

Experience Manager Forms fornece ValidateCAPTCHA API 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.

Veja a seguir um exemplo de ValidateCAPTCHA API 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 variável ValidateCAPTCHA A API 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: uso Experience Manager Forms Validar a API CAPTCHA para validar CAPTCHA usando uma ação enviar personalizada

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

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

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

Você também pode invocar ValidateCAPTCHA ao aplicar regras em um componente em um Formulário adaptável.

Por exemplo, você adiciona um Validar CAPTCHA em um Formulário adaptável e crie 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 com um clique de Validar CAPTCHA botão:

Validar CAPTCHA

Você pode chamar o servlet personalizado que inclui ValidateCAPTCHA API usando o editor de regras e ativar ou desativar 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, processar e validar o serviço reCAPTCHA.

Defina o af.cloudservices.recaptcha.domain propriedade do Configuração do canal da Web do formulário adaptável e da comunicação interativa configuração a ser especificada 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, Gerar configurações de OSGi usando o SDK do AEM, e implantar a configuração para a instância do Cloud Service.

Consulte também see-also

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