Usar reCAPTCHA en formularios adaptables using-reCAPTCHA-in-adaptive-forms

Adobe recomienda utilizar la captura de datos moderna y ampliable Componentes principalespara crear un nuevo formulario adaptableo añadir formularios adaptables a páginas de AEM Sites. Estos componentes representan un avance significativo en la creación de formularios adaptables, lo que garantiza experiencias de usuario impresionantes. Este artículo describe un enfoque más antiguo para crear Formularios adaptables con componentes de base.

Versión
Vínculo del artículo
AEM 6.5
Haga clic aquí
AEM as a Cloud Service
Este artículo
Se aplica a lo siguiente:
Formulario adaptable basado en componentes de base.
Para los formularios adaptables basados en componentes principales, Haga clic aquí.

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 reCAPTCHA en formularios adaptables. Puede utilizar el servicio reCAPTCHA de Google para implementar el Captcha.

NOTE
  • AEM Forms es compatible con reCAPTCHA v2 y reCAPTCHA Enterprise. No existe compatibilidad con ninguna otra versión.
  • El reCAPTCHA en formularios adaptables no es compatible con el modo sin conexión en la aplicación AEM Forms.

Configuración del servicio reCAPTCHA de Google google-reCAPTCHA

Los creadores de formularios pueden utilizar el servicio reCAPTCHA de Google para implementar el reCAPTCHA en los 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 incluye reCAPTCHA v2 y reCAPTCHA Enterprise que se puede integrar en AEM Forms. Según sus necesidades, puede configurar el servicio reCAPTCHA para habilitar lo siguiente:

reCAPTCHA

Configuración de reCAPTCHA Enterprise steps-to-implement-reCAPTCHA-enterprise-in-forms

  1. Cree o seleccione un Proyecto de Google Cloud y habilite la API de reCAPTCHA Enterprise.

  2. Obtenga el ID de proyecto y cree una clave de API y una clave del sitio para sitios web.

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

    1. Vaya a Herramientas > General > Explorador de configuración.

    2. Seleccione una carpeta o cree una carpeta y habilítela para las configuraciones de nube mediante los siguientes pasos:

      1. En el Explorador de configuración, selecciona la carpeta y selecciona Propiedades.
      2. En el cuadro de diálogo Propiedades de configuración, habilite Configuraciones de nube.
      3. Selecciona Guardar y cerrar para guardar la configuración y salir del cuadro de diálogo.
  4. Configure el servicio en la nube para reCAPTCHA Enterprise.

    1. En la instancia de autor Experience Manager, vaya a herramientas-1 > Cloud Services.
    2. Selecciona reCAPTCHA. Se abre la página de configuración. Selecciona el contenedor de configuración que ha creado y seleccione Crear.
    3. Seleccione versión como reCAPTCHA Enterprise y especifique el nombre, el ID del proyecto, la clave del sitio y la clave de la API (obtenida en el paso 2) para el servicio empresarial de reCAPTCHA.
    4. Seleccione el tipo de clave que debe ser el mismo que la clave de 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. Las puntuaciones superiores o iguales a las puntuaciones de umbral identifican la interacción humana; de lo contrario, se considera interacción de bots.
    6. Selecciona Crear para crear la configuración del servicio en la nube.

Una vez habilitado el servicio empresarial de reCAPTCHA, estará disponible para su uso en formularios adaptables. Ver el uso de CAPTCHA en los formularios adaptables.

Configuración de Google reCAPTCHA v2 steps-to-implement-reCAPTCHA-v2-in-forms

  1. Obtener el par de claves de la API reCAPTCHA de Google. Incluye una 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.

    2. Seleccione una carpeta o cree una carpeta y habilítela para las configuraciones de nube mediante los siguientes pasos:

      1. En el Explorador de configuración, selecciona la carpeta y selecciona Propiedades.
      2. En el cuadro de diálogo Propiedades de configuración, habilite Configuraciones de nube.
      3. Seleccione Guardar y cerrar para guardar la configuración y salir del cuadro de diálogo.
  3. Configure el servicio en la nube para el reCAPTCHA v2.

    1. En la instancia de autor de AEM, vaya a tools-1 > Cloud Services.
    2. Seleccione reCAPTCHA. Se abre la página de configuración. Seleccione el contenedor de configuración que ha creado y seleccione Crear.
    3. Selecciona la versión como reCAPTCHA v2, especifica el nombre, la clave del sitio y la clave secreta para el servicio reCAPTCHA (obtenidas en el Paso
      1. y selecciona 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. Selecciona Guardar configuración y, a continuación, OK 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 el uso de Captcha en los formularios adaptables.

Usar reCAPTCHA en formularios adaptables using-reCAPTCHA

Para usar reCAPTCHA en formularios adaptables haga lo siguiente:

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

    note note
    NOTE
    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.

    note note
    NOTE
    • No se puede usar más de un componente Captcha en un formulario adaptable. Además, no se recomienda utilizar un Captcha en un panel marcado si tiene carga diferida o en un fragmento.
    • El reCAPTCHA tiene un plazo y caduca en unos minutos. Por lo tanto, se recomienda colocar el componente del Captcha justo antes del botón Enviar en el formulario adaptable.
  3. Selecciona el componente Captcha que has añadido y selecciona cmppr 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. En el menú desplegable servicio Captcha, seleccione reCAPTCHA para habilitarlo si lo configuró como se describe en el servicio reCAPTCHA de Google.

  6. Seleccione una configuración en la lista desplegable Configuración para reCAPTCHA empresarial o reCAPTCHA v2

    1. Si selecciona la versión reCAPTCHA empresarial, el tipo de clave puede ser casilla de verificación o basado en puntuación, se compone de la selección realizada al configurar la clave del sitio para sitios web:
    note note
    NOTE
    • En la configuración de nube con tipo de clave como casilla de verificación, el mensaje de error personalizado aparece como un mensaje en línea si falla la validación del captcha.
    • En la configuración en la nube con tipo de clave como basado en puntuación, el mensaje de error personalizado se muestra como un mensaje emergente si falla la validación del captcha.
    1. Puede seleccionar el tamaño como normal y compacto.
    2. Puede seleccionar una Referencia de enlace. En Referencia de enlace los datos enviados son datos enlazados; de lo contrario, no lo son. A continuación se muestran ejemplos XML de datos no enlazados y enlazados (con referencia de enlace como SSN) respectivamente, cuando se envía un formulario.
    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>
    

    Si selecciona la versión reCAPTCHA v2:

    1. Puede seleccionar el tamaño normal o compacto para el widget reCAPTCHA.
    2. También puede seleccionar la opción Invisible para mostrar la comprobación de CAPTCHA solamente en el caso de una actividad sospechosa.

    El servicio reCAPTCHA está habilitado en el formulario adaptable. Puede obtener una vista previa del formulario y ver cómo funciona CAPTCHA. El distintivo protegido por reCAPTCHA, que se muestra a continuación, aparece en los formularios protegidos.
    Distintivo protegido por reCAPTCHA de Google

  7. Guarde las propiedades.

NOTE
No seleccione Predeterminado en el menú desplegable del servicio Captcha, ya que el servicio Captcha de AEM predeterminado es obsoleto.

Mostrar u ocultar el componente CAPTCHA en función de las reglas show-hide-captcha

Puede seleccionar mostrar u ocultar el componente CAPTCHA en función de las reglas que aplique en un componente de un formulario adaptable. Selecciona el componente, editar reglas y 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.

Selecciona Valor de moneda en el formulario y crea las siguientes reglas:

Mostrar u ocultar reglas

NOTE
Cuando selecciona una configuración de reCAPTCHA versión 2 y el tamaño se establece en Invisible, la opción mostrar/ocultar permanece deshabilitada.

Validar CAPTCHA validate-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 validation-form-submission

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

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

Validar el CAPTCHA en las acciones y condiciones del usuario validate-captcha-user-action

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

  1. Seleccione el componente CAPTCHA y cmppr para ver las propiedades del componente.
  2. En la sección Validar CAPTCHA, selecciona Validar el CAPTCHA en una acción del usuario.
  3. Seleccione Listo para guardar las propiedades del componente.

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. Selecciona 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:

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 función del 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.

Editar dominio de servicio reCAPTCHA reCAPTCHA-service-domain

El servicio reCAPTCHA utiliza https://www.recaptcha.net/ como dominio predeterminado. Puede modificar la configuración para establecer https://www.google.com/ o cualquier nombre de dominio personalizado para cargar, procesar y validar el servicio reCAPTCHA.

Establezca la propiedad af.cloudservices.recaptcha.domain de la configuración Configuración del canal web de comunicaciones interactivas y formularios adaptables para especificar https://www.google.com/ o cualquier otro nombre de dominio personalizado. El siguiente archivo JSON muestra un ejemplo:

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

Para establecer los valores de una configuración, Generar configuraciones OSGi mediante el SDK de AEM e implemente la configuración a su instancia de Cloud Service.

Vea también see-also

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