DocumentaçãoAEM 6.5Guia do usuário

Uso de CAPTCHA em formulários adaptáveis using-captcha-in-adaptive-forms

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
Versão
Link do artigo
AEM as a Cloud Service
Clique aqui
AEM 6.5
Este artigo

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.

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 oferece suporte a CAPTCHA em formulários adaptáveis. Você pode usar o serviço reCAPTCHA pelo Google para implementar o CAPTCHA.

NOTE
  • O AEM Forms oferece suporte ao reCAPTCHA v2 e Enterprise. Nenhuma outra versão é compatível.
  • CAPTCHA em formulários adaptáveis não é compatível no modo offline no aplicativo AEM Forms.

Configurar o serviço reCAPTCHA pelo Google para o Adaptive Forms google-reCAPTCHA

Os usuários do AEM Forms podem usar o serviço reCAPTCHA pelo Google para implementar o CAPTCHA em formulários adaptáveis. 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, incluindo o reCAPTCHA v2 e o reCAPTCHA Enterprise, está integrado ao 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 um Projeto reCAPTCHA Enterprise habilitado com API corporativa do reCAPTCHA.

  2. Obter a ID do projeto.

  3. Criar um Chave de API e uma chave do site para sites.

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

    1. Ir para Ferramentas > Geral > Navegador de configuração. Consulte a Navegador de configuração para obter mais informações.

    2. Faça o seguinte para habilitar a pasta global para configurações de nuvem ou ignore esta etapa para criar e configurar outra pasta para configurações de serviço de nuvem.

      1. No Navegador de configuração, selecione a variável global 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. No Navegador de configuração, selecione Criar.

    4. Na caixa de diálogo Criar configuração, especifique um título para a pasta e habilite Configurações da nuvem.

    5. Selecionar Criar para criar a pasta habilitada para configurações do cloud service.

  5. Configure o serviço de nuvem para o 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 container de configuração criado na etapa anterior e selecione Criar.

    3. Selecione a versão como reCAPTCHA Enterprise e especifique o Nome; ID do Projeto, Chave do Site e Chave de API (Obtido nas Etapas 2 e 3) 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 configurada no projeto na nuvem do Google, 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 (Clique para saber mais sobre pontuação). 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.

      Observação:

      • Os autores do formulário podem especificar uma pontuação no intervalo adequado para o envio ininterrupto do formulário.

    6. Selecionar Criar para criar a configuração do cloud service.

    7. Na caixa de diálogo Editar componente, especifique o nome, a ID do projeto, a chave do site, a chave de API (obtida nas etapas 2 e 3), selecione o tipo de chave e insira a pontuação de limite. Selecionar Salvar configurações  e selecione  OK  para concluir a configuração.

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.

reCAPTCHA Enterprise

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. Consulte a Navegador de configuração para obter mais informações.

    2. Faça o seguinte para habilitar a pasta global para configurações de nuvem ou ignore esta etapa para criar e configurar outra pasta para configurações de serviço de nuvem.

      1. No Navegador de configuração, selecione a variável global 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. No Navegador de configuração, selecione Criar.

    4. Na caixa de diálogo Criar configuração, especifique um título para a pasta e habilite Configurações da nuvem.

    5. Selecionar Criar para criar a pasta habilitada para configurações do cloud service.

  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 container de configuração criado na etapa anterior e selecione Criar.
    3. Selecione 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.

reCAPTCHA v2

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.
    note note
    NOTE
    O Captcha é sensível ao tempo e expira em cerca de um minuto. 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.

  7. Se a configuração selecionada tiver a versão reCAPTCHA Enterprise:

    1. Você pode selecionar a configuração de nuvem do reCAPTCHA com tipo de chave as caixa de seleção. Na chave da caixa de seleção, digite a mensagem de erro personalizada que será exibida como uma mensagem em linha se a validação de captcha falhar. Você pode selecionar o tamanho como Normal e Compacto.

    2. Você pode selecionar a configuração de nuvem do reCAPTCHA com tipo de chave as baseado em pontuação. Na chave baseada em pontuação, digite a mensagem de erro personalizada que será exibida como uma mensagem pop-up se a validação de captcha falhar.

    3. Quando você seleciona um 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 a configuração selecionada tiver a versão reCAPTCHA v2:

    1. Selecione o tamanho como Normal ou Compacto para o widget reCAPTCHA. Você também pode selecionar a variável Invisível opção para mostrar o desafio de CAPTCHA somente em caso de atividade suspeita. A variável protegido pelo reCAPTCHA exibido abaixo, é exibido nos formulários protegidos.

      Google protegido pelo selo reCAPTCHA

    O serviço reCAPTCHA é ativado no formulário adaptável. Você pode visualizar o formulário e ver o CAPTCHA funcionando.

  8. 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
  • Se você selecionar a configuração reCAPTCHA v2 com tamanho como Invisível ou reCAPTCHA Enterprise score based keys, então a opção mostrar/ocultar não é aplicável.

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.

    note note
    NOTE
    Se você selecionar a configuração reCAPTCHA v2 com tamanho como Invisível ou reCAPTCHA Enterprise score based keys, então o Captcha Válido em uma ação do usuário não é aplicável.

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.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2