Uso de CAPTCHA em formulários adaptáveis

O CAPTCHA (Completamente Automated Public Turing test to tell Computers and Humans Além) é um programa comumente usado em transações online para distinguir entre humanos e programas ou bots automatizados. Ele coloca um desafio e avalia a resposta do usuário para determinar se é um humano ou um bot interagindo com o site. Impede que o usuário continue se o teste falhar e ajuda a tornar as transações online seguras, impedindo que bots postem spam ou fins mal-intencionados.

O AEM Forms suporta CAPTCHA em formulários adaptáveis. Você pode usar o serviço reCAPTCHA do Google para implementar CAPTCHA.

Configurar o serviço ReCAPTCHA pelo Google

Os autores de formulários podem usar o serviço reCAPTCHA do Google para implementar CAPTCHA em formulários adaptáveis. Ele oferece recursos CAPTCHA avançados para proteger seu site. Para obter mais informações sobre como o reCAPTCHA funciona, consulte Google reCAPTCHA.

Para implementar o serviço reCAPTCHA no AEM Forms:

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

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

   1. Vá para Tools > General > Configuration Browser.

      • Consulte a documentação do 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 do serviço de nuvem.

      1. No Navegador de configuração, selecione a pasta global e toque em Propriedades.

      2. Na caixa de diálogo Propriedades de configuração, ative Configurações da nuvem.

      3. Toque em Salvar e fechar para salvar a configuração e sair da caixa de diálogo.

   3. No Navegador de configuração, toque em Criar.

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

   5. Toque em Criar para criar a pasta ativada para as configurações do serviço de nuvem.

3. Configure o serviço de nuvem para reCAPTCHA.

   1. Na instância do autor do AEM, vá para > Cloud Services.
   2. Toque em reCAPTCHA. A página Configurações é aberta. Selecione o contêiner de configuração criado na etapa anterior e toque em Create.
   3. Especifique Nome, Chave do site e Chave secreta para o serviço reCAPTCHA e toque em 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. Toque em Salvar configurações e toque em OK para concluir a configuração.

   Quando o serviço reCAPTCHA é configurado, ele está disponível para uso em formulários adaptáveis. Para obter mais informações, consulte Usando CAPTCHA em formulários adaptáveis.

Use CAPTCHA em formulários adaptáveis

Para usar CAPTCHA em formulários adaptáveis:

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

   OBSERVAÇÃO

   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 as propriedades adaptáveis do formulário 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.

   OBSERVAÇÃO

   Não é possível usar mais de um componente Captcha em um formulário adaptável. Além disso, não é recomendado usar CAPTCHA em um painel marcado para carregamento lento ou em um fragmento.

   OBSERVAÇÃO

   O Captcha diferencia tempo e expira em cerca de um minuto. Portanto, é recomendável colocar o componente Captcha logo antes do botão Enviar no formulário adaptável.

3. Selecione o componente Captcha adicionado e toque em 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 apareça.

5. No menu suspenso Captcha service, selecione reCaptcha para habilitar o serviço reCAPTCHA se você o tiver configurado conforme descrito em ReCAPTCHA service by Google. Selecione uma configuração no menu suspenso Configurações . Além disso, selecione o tamanho como Normal ou Compacto para o widget reCAPTCHA.

   OBSERVAÇÃO

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

6. Salve as propriedades.

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

Mostrar ou ocultar o componente CAPTCHA com base nas regras

Você pode optar por mostrar ou ocultar o componente CAPTCHA com base nas regras aplicadas em um componente em um formulário adaptável. Toque no componente, selecione e toque em 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 superior a 25000.

Toque no campo Valor da moeda no formulário e crie as seguintes regras:

Validar CAPTCHA

Você pode 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

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

1. Toque no componente CAPTCHA e selecione para exibir as propriedades do componente.
2. Na seção Validate CAPTCHA, selecione Validate CAPTCHA no envio do formulário.
3. Toque em para salvar as propriedades do componente.

Validar CAPTCHA em ações e condições do usuário

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

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

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

Veja a seguir 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 Experience Manager Forms ValidateCAPTCHA 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 à Ação de envio personalizada. Para obter mais informações sobre ações de envio personalizadas, consulte Criar uma ação de envio personalizada para o Adaptive Forms.
2. Selecione o nome da Ação de envio personalizada na lista suspensa Enviar ação nas propriedades Enviar de um formulário adaptável.
3. Toque em Enviar. O CAPTCHA é validado com base nas condições definidas na API ValidateCAPTCHA da Ação de envio personalizada.

Opção 2: Use Experience Manager Forms ValidateCAPTCHA API 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 invocar um serviço ao clicar em um botão.

A figura a seguir ilustra como chamar um serviço ao clicar em um botão Validar CAPTCHA:

Você pode chamar o servlet personalizado que inclui a API ValidateCAPTCHA 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, é possível usar o editor de regras para incluir um método personalizado para validar CAPTCHA em um formulário adaptável.

Adicionar serviços CAPTCHA personalizados

Experience Manager Forms O fornece reCAPTCHA como o serviço CAPTCHA. No entanto, você pode adicionar um serviço personalizado para exibir na lista suspensa CAPTCHA Service.

Veja a seguir uma amostra da implementação da interface para adicionar um serviço CAPTCHA adicional ao Formulário adaptável:

package com.adobe.aemds.guide.service;

import org.osgi.annotation.versioning.ConsumerType;

/**
 * An interface to provide captcha validation at server side in Adaptive Form
 * This interface can be used to provide custom implementation for different captcha services.
 */
@ConsumerType
public interface GuideCaptchaValidator {
    /**
     * This method should define the actual validation logic of the captcha
     * @param captchaPropertyNodePath path to the node with CAPTCHA configurations inside form container
     * @param userResponseToken  The user response token provided by the CAPTCHA from client-side
     *
     * @return  {@link GuideCaptchaValidationResult} validation result of the captcha
     */
     GuideCaptchaValidationResult validateCaptcha(String captchaPropertyNodePath, String userResponseToken);

    /**
     * Returns the name of the captcha validator. This should be unique among the different implementations
     * @return  name of the captcha validator
     */
     String getCaptchaValidatorName();
}

captchaPropertyNodePath refere-se ao caminho do recurso do componente CAPTCHA no repositório Sling. Use essa propriedade para incluir detalhes específicos do componente CAPTCHA. Por exemplo, captchaPropertyNodePath inclui informações para a configuração da nuvem reCAPTCHA configurada no componente CAPTCHA. As informações de configuração da nuvem fornecem Chave do Site e Chave Secreta definições para implementar o serviço reCAPTCHA.

userResponseToken refere-se ao g_recaptcha_response que é gerado após solucionar um CAPTCHA em um formulário.