Usar CAPTCHA en formularios adaptables

Adobe recomienda utilizar la captura de datos moderna y ampliable Componentes principales para crear un nuevo Forms adaptable o adición de Forms adaptable a páginas de AEM Sites. Estos componentes representan un avance significativo en la creación de Forms adaptable, lo que garantiza experiencias de usuario impresionantes. Este artículo describe un enfoque más antiguo para crear Forms adaptable mediante componentes de base.

CAPTCHA (prueba de Turing completamente automática y pública para diferenciar ordenadores de humanos) es un programa que se utiliza comúnmente en transacciones en línea para distinguir entre humanos y programas o bots automatizados. Plantea un desafío y evalúa la respuesta del usuario para determinar si es un humano o un bot que interactúa con el sitio. Evita que el usuario continúe si la prueba falla y ayuda a que las transacciones en línea sean seguras al impedir que los bots publiquen contenido no deseado o con fines malintencionados.

AEM Forms admite CAPTCHA en formularios adaptables. Puede utilizar el servicio reCAPTCHA de Google para implementar CAPTCHA.

Configuración del servicio reCAPTCHA de Google para Forms adaptable

Los usuarios de AEM Forms pueden utilizar el servicio reCAPTCHA de Google para implementar CAPTCHA en formularios adaptables. Ofrece funcionalidades de CAPTCHA avanzadas para proteger su sitio. Para obtener más información sobre cómo funciona reCAPTCHA, consulte Google reCAPTCHA. El servicio reCAPTCHA, incluidos reCAPTCHA v2 y reCAPTCHA Enterprise, está integrado en AEM Forms. Según sus necesidades, puede configurar el servicio reCAPTCHA para habilitar lo siguiente:

• reCAPTCHA Enterprise en AEM Forms
• reCAPTCHA v2 en AEM Forms

Configuración de reCAPTCHA Enterprise

1. Crear un proyecto reCAPTCHA Enterprise habilitado con API de reCAPTCHA Enterprise.

2. Obtener el ID del proyecto.

3. Crear un Clave de API y una clave del sitio para sitios web.

4. Crear un contenedor de configuración para los servicios en la nube.

   1. Vaya a Herramientas > General > Explorador de configuración. Consulte la documentación del Explorador de configuración para obtener más información.

   2. Haga lo siguiente para habilitar la carpeta global para configuraciones de nube u omita este paso para crear y configurar otra carpeta para configuraciones de servicios en la nube.

      1. En el Explorador de configuración, seleccione la carpeta global y pulse Propiedades.
      2. En el cuadro de diálogo Propiedades de configuración, habilite Configuraciones de nube.
      3. Pulse Guardar y cerrar para guardar la configuración y salir del cuadro de diálogo.

   3. En el Explorador de configuración, pulse Crear.

   4. En el cuadro de diálogo Crear configuración, especifique un título para la carpeta y habilite Configuraciones de nube.

   5. Pulse Crear para crear la carpeta habilitada para las configuraciones del servicio en la nube.

5. Configure el servicio en la nube para reCAPTCHA Enterprise.

   1. En la instancia de autor Experience Manager, vaya a > Cloud Services.

   2. Pulse reCAPTCHA. Se abre la página de configuración. Seleccione el contenedor de configuración creado en el paso anterior y pulse Crear.

   3. Seleccione la versión como reCAPTCHA Enterprise y especifique el nombre, el ID de proyecto, la clave del sitio y la clave de API (obtenida en los pasos 2 y 3) para el servicio reCAPTCHA Enterprise.

   4. Seleccione el tipo de clave, el tipo de clave debe ser el mismo que la clave del sitio configurada en el proyecto de Google Cloud, por ejemplo, Clave de sitio de casilla o Clave de sitio basada en puntuación.

   5. Especifique una puntuación de umbral en el rango de 0 a 1 (Haga clic para obtener más información sobre la puntuación). Las puntuaciones buenas o iguales a las puntuaciones de umbral identifican la interacción humana; de lo contrario, se considera interacción de bots.

      Nota:

      • Los autores de formularios pueden especificar una puntuación en el rango adecuado para el envío ininterrumpido de formularios.

   6. Tocar Crear para crear la configuración del servicio en la nube.

   7. En el cuadro de diálogo Editar componente, especifique el nombre, el ID de proyecto, la clave del sitio, la clave de API (obtenida en los pasos 2 y 3), seleccione el tipo de clave e introduzca la puntuación de umbral. Tocar Guardar configuración y luego pulse OK para completar la configuración.

Una vez habilitado el servicio reCAPTCHA Enterprise, estará disponible para su uso en formularios adaptables. Consulte usar CAPTCHA en formularios adaptables.

Configuración de Google reCAPTCHA v2

1. Obtener el par de claves de la API reCAPTCHA de Google. Incluye un clave del sitio y una clave secreta.

2. Crear un contenedor de configuración para los servicios en la nube.

   1. Vaya a Herramientas > General > Explorador de configuración. Consulte la documentación del Explorador de configuración para obtener más información.

   2. Haga lo siguiente para habilitar la carpeta global para configuraciones de nube u omita este paso para crear y configurar otra carpeta para configuraciones de servicios en la nube.

      1. En el Explorador de configuración, seleccione la carpeta global y pulse Propiedades.

      2. En el cuadro de diálogo Propiedades de configuración, habilite Configuraciones de nube.

      3. Pulse Guardar y cerrar para guardar la configuración y salir del cuadro de diálogo.

   3. En el Explorador de configuración, pulse Crear.

   4. En el cuadro de diálogo Crear configuración, especifique un título para la carpeta y habilite Configuraciones de nube.

   5. Pulse Crear para crear la carpeta habilitada para las configuraciones del servicio en la nube.

3. Configure el servicio en la nube para reCAPTCHA v2.

   1. En la instancia de autor de AEM, vaya a > Cloud Services.
   2. Pulse reCAPTCHA. Se abre la página de configuración. Seleccione el contenedor de configuración creado en el paso anterior y pulse Crear.
   3. Seleccione la versión como reCAPTCHA v2, especifique el nombre, la clave del sitio y la clave secreta para el servicio reCAPTCHA (obtenido en el paso 1) y pulse Crear para crear la configuración del servicio en la nube.
   4. En el cuadro de diálogo Editar componente, especifique el sitio y las claves secretas obtenidas en el paso 1. Pulse Guardar configuración y, a continuación, Aceptar para completar la configuración.

   Una vez configurado el servicio reCAPTCHA, estará disponible para su uso en formularios adaptables. Para obtener más información, consulte usar CAPTCHA en formularios adaptables.

Usar reCAPTCHA en formularios adaptables

Para usar reCAPTCHA en formularios adaptables haga lo siguiente:

1. Abra un formulario adaptable en modo Edición.

   NOTA

   Asegúrese de que el contenedor de configuración seleccionado al crear el formulario adaptable contenga el servicio en la nube reCAPTCHA. También puede editar las propiedades del formulario adaptable para cambiar el contenedor de configuración asociado al formulario.

2. Desde el explorador de componentes, arrastre y suelte el componente Captcha en el formulario adaptable.

   NOTA

   No se puede usar más de un componente Captcha en un formulario adaptable. Además, no se recomienda utilizar CAPTCHA en un panel marcado para la carga lenta o en un fragmento.

   NOTA

   Captcha tiene un plazo y caduca en aproximadamente un minuto. Por lo tanto, se recomienda colocar el componente Captcha justo antes del botón Enviar en el formulario adaptable.

3. Seleccione el componente Captcha que ha agregado y pulse para editar sus propiedades.

4. Especifique un título para el widget CAPTCHA. El valor predeterminado es Captcha. Seleccione Ocultar título si no desea que aparezca el título.

5. Desde el Servicio Captcha menú desplegable, seleccione reCAPTCHA para habilitar el servicio reCAPTCHA si se ha configurado como se describe en Servicio reCAPTCHA de Google.

6. Seleccione una configuración en la lista desplegable Configuración.

7. Si la configuración seleccionada tiene la versión reCAPTCHA Enterprise:

   1. Puede seleccionar la configuración de nube reCAPTCHA con tipo de clave as casilla de verificación. En el tipo de clave de casilla de verificación, el mensaje de error personalizado aparece como un mensaje en línea si falla la validación captcha. Puede seleccionar el tamaño como Normal y Compacto.

   2. Puede seleccionar la configuración de nube reCAPTCHA con tipo de clave as basado en puntuación. En el tipo de clave basada en puntuación, el mensaje de error personalizado se muestra como un mensaje emergente si falla la validación captcha.

   3. Al seleccionar un Referencia de enlace los datos enviados son datos enlazados; de lo contrario, son datos no enlazados. A continuación se muestran ejemplos XML de datos independientes y datos enlazados (con referencia de enlace como SSN) respectivamente, cuando se envía un formulario.

          <?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>
      

          <?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>
      

   Si la configuración seleccionada tiene la versión reCAPTCHA v2:

   1. Seleccione el tamaño como Normal o Compacto para el widget reCAPTCHA. También puede seleccionar la opción Invisible para mostrar el desafío CAPTCHA solamente en el caso de una actividad sospechosa. El protegido por reCAPTCHA el distintivo, que se muestra a continuación, aparece en los formularios protegidos.

      

   El servicio reCAPTCHA está habilitado en el formulario adaptable. Puede obtener una vista previa del formulario y ver cómo funciona CAPTCHA.

8. Guarde las propiedades.

Mostrar u ocultar el componente CAPTCHA en base a reglas

Puede seleccionar mostrar u ocultar el componente CAPTCHA en función de las reglas que aplique en un componente de un formulario adaptable. Pulse el componente, seleccione y pulse Crear para crear una regla. Para obtener más información sobre la creación de reglas, consulte Editor de reglas.

Por ejemplo, el componente CAPTCHA debe mostrarse en un formulario adaptable solo si el campo Valor de moneda del formulario tiene un valor superior a 25 000.

Pulse Valor de moneda en el formulario y cree las siguientes reglas:

Validar CAPTCHA

Puede validar el CAPTCHA en un formulario adaptable al enviar el formulario o basar la validación CAPTCHA en las acciones y condiciones del usuario.

Validar el CAPTCHA al enviar el formulario

Para validar un CAPTCHA automáticamente al enviar un formulario adaptable:

1. Pulse el componente CAPTCHA y seleccione para ver las propiedades del componente.
2. En la sección Validar CAPTCHA, seleccione Validar el CAPTCHA al enviar el formulario.
3. Pulse para guardar las propiedades del componente.

Validar el CAPTCHA en base a las acciones y condiciones del usuario

Para validar un CAPTCHA basado en condiciones y acciones del usuario:

1. Pulse el componente CAPTCHA y seleccione para ver las propiedades del componente.

2. En la sección Validar CAPTCHA, seleccione Validar el CAPTCHA en base a una acción del usuario.

3. Pulse para guardar las propiedades del componente.

   NOTA

   Si selecciona la configuración de reCAPTCHA v2 con el tamaño como Invisible o reCAPTCHA Enterprise score based keys, entonces el Captcha válido en una acción del usuario no es aplicable.

Experience Manager Forms ofrece la API ValidateCAPTCHA para validar un CAPTCHA con condiciones predefinidas. Puede invocar la API utilizando una acción de envío personalizada o definiendo reglas sobre los componentes de un formulario adaptable.

El siguiente es un ejemplo de un API ValidateCAPTCHA para validar un CAPTCHA con condiciones 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;
        }
    }

El ejemplo significa que la API ValidateCAPTCHA valida el CAPTCHA en el formulario solo si el número de dígitos en el cuadro numérico especificado por el usuario mientras rellena el formulario es mayor de 5.

Opción 1: Usar la API Experience Manager Forms ValidateCAPTCHA para validar el CAPTCHA mediante una acción de envío personalizada

Siga estos pasos para usar la API ValidateCAPTCHA para validar el CAPTCHA con una acción de envío personalizada:

1. Añada el script que incluya la API ValidateCAPTCHA para la acción de envío personalizada. Para obtener más información acerca de las acciones de envío personalizadas, consulte Crear una acción de envío personalizada para formularios adaptables.
2. Seleccione el nombre de la acción de envío personalizada en la lista desplegable Enviar acción en las propiedades de Envío de un formulario adaptable.
3. Pulse Enviar. El CAPTCHA se valida según las condiciones definidas en la API ValidateCAPTCHA de la acción de envío personalizada.

Opción 2: Usar la API Experience Manager Forms ValidateCAPTCHA para validar el CAPTCHA en una acción del usuario antes de enviar el formulario

También puede invocar la API ValidateCAPTCHA al aplicar reglas en un componente de un formulario adaptable.

Por ejemplo, añade un botón Validar CAPTCHA en un formulario adaptable y crea una regla para invocar un servicio haciendo clic en un botón.

La siguiente imagen ilustra cómo puede invocar un servicio al hacer clic en un botón Validar CAPTCHA:

Puede invocar el servlet personalizado que incluye la API ValidateCAPTCHA mediante el editor de reglas y habilitar o deshabilitar el botón de envío del formulario adaptable en base al resultado de validación.

Del mismo modo, puede utilizar el editor de reglas para incluir un método personalizado para validar el CAPTCHA en un formulario adaptable.

Añadir servicios CAPTCHA personalizados

Experience Manager Forms Ofrece reCAPTCHA como servicio CAPTCHA. Con todo, puede agregar un servicio personalizado para que se muestre en la lista desplegable Servicio CAPTCHA.

A continuación se muestra un ejemplo de implementación de la interfaz para agregar un servicio CAPTCHA adicional al formulario adaptable:

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 Hace referencia a la ruta de recurso del componente CAPTCHA en el repositorio de Sling. Utilice esta propiedad para incluir detalles específicos del componente CAPTCHA. Por ejemplo, captchaPropertyNodePath incluye información para la configuración de nube reCAPTCHA configurada en el componente CAPTCHA. La información de configuración de nube ofrece la configuración Clave del sitio y Clave secreta para implementar el servicio reCAPTCHA.

userResponseToken Se refiere a g_reCAPTCHA_response que se genera después de resolver un CAPTCHA en un formulario.

Recursos de Business.Adobe.com

Multichannel Communication Ecommerce Integrations Targeted Content Responsive Forms Customer Experience Management Digital Rights Management