Añadir Google reCAPTCHA a formularios en el editor universal
Google reCAPTCHA ayuda a proteger los formularios al distinguir entre usuarios que son humanos y los bots automatizados. Edge Delivery Services Forms solo admite reCAPTCHA Enterprise con claves de sitio basadas en puntuación. Esta guía explica cómo configurar esta protección para formularios en el Editor universal.
Objetivos:
- Configurar reCAPTCHA Enterprise con una clave de sitio basada en puntuación
- Añadir reCAPTCHA a los formularios
- Validar y probar la implementación
- Monitorizar y optimizar el rendimiento
Requisitos previos
Antes de empezar, asegúrese de que dispone de lo siguiente:
Requisitos de acceso
- Acceso de creación a AEM as a Cloud Service
- Acceso al editor universal con permisos de edición de formularios
Requisitos técnicos
- Cuenta activa de Google
- Proyecto de Google Cloud Platform con facturación habilitada
- Propiedad de dominio verificada para sus formularios
Requisitos de conocimientos
- Comprensión básica de AEM Forms y el editor universal
- Familiaridad con las configuraciones de servicios en la nube
- Comprensión de los conceptos de seguridad del formulario
¿Por qué debería usar reCAPTCHA en sus formularios?
reCAPTCHA Enterprise evalúa las interacciones del usuario para ayudar a proteger los formularios del correo no deseado y del uso indebido automatizado. Google documenta las siguientes funcionalidades:
Precios, cuotas y asistencia: Los costos dependen del nivel de servicio y del volumen de evaluación de Google. El uso está sujeto a las cuotas de Google, no es ilimitado. Para ver los precios actuales, los requisitos de suscripción y las opciones de soporte, consulte Detalles de nivel de Google. Google enumera la asistencia al cliente en todos sus niveles y la administración de cuentas dedicada para su nivel empresarial.
Configuración de reCAPTCHA Enterprise
Requisitos:
- Proyecto de Google Cloud con facturación habilitada
- ID de proyecto (del panel de GCP)
- Verificación de dominios para sus formularios
- Acceso de administrador a GCP y AEM
Configuración:
-
Cree o seleccione un proyecto de Google Cloud
- Vaya a la Consola de Google Cloud
- Cree un nuevo proyecto o seleccione uno existente
- Tenga en cuenta su ID de proyecto
-
Habilite la API de reCAPTCHA Enterprise
- Vaya a API y servicios > Biblioteca
- Busque “API de reCAPTCHA Enterprise”
- Haga clic en Habilitar
-
Crear credenciales de la API
- Vaya a API y servicios > Credenciales
- Haga clic en Crear credenciales > Clave de la API
- Copie y guarde la clave de la API
-
Cree clave del sitio
- Vaya a Seguridad > Defensa contra el fraude > Claves
- Haga clic en Crear clave y seleccione Web como tipo de aplicación
- Añadir sus dominios
- Haga clic en Siguiente paso (opcional) para abrir los ajustes adicionales
- Keep ¿Utilizará los desafíos? desactivado para crear una clave de sitio basada en puntuación
- Haga clic en Crear clave y copie la clave del sitio
Punto de comprobación de validación: asegúrese de que dispone de:
- ID del proyecto
- Clave API
- Clave del sitio
- Dominio verificado en Google Cloud
Imagen: habilitando configuraciones de nube para el contenedor de formularios
Configuración:
-
Acceda al explorador de configuración
- Inicie sesión en la instancia de autor de AEM
- Vaya a Herramientas > General > Explorador de configuración
-
Habilite configuraciones de la nube
- Busque el contenedor de configuración del formulario
- Seleccione Propiedades
- Compruebe configuraciones de la nube
- Haga clic en Guardar y cerrar
-
Verificar la configuración
- Confirme que “Configuraciones de nube” aparece en las propiedades del contenedor
Punto de comprobación de validación:
- Configuraciones de nube habilitadas para el contenedor
- El contenedor aparece en el explorador de configuración
- Las propiedades muestran “Configuraciones en la nube” como habilitadas
Figura: interfaz de configuración empresarial de reCAPTCHA en AEM
Configuración:
-
Acceso a la configuración de reCAPTCHA
- Vaya a Herramientas > Servicios de nube > reCAPTCHA
- Seleccione el contenedor de configuración del formulario
- Haga clic en Crear
-
Establezca la configuración de empresa
- Título: Nombre descriptivo (por ejemplo, “Production reCAPTCHA”)
- Nombre: Nombre del sistema (generado automáticamente o personalizado)
- Versión: seleccione ReCAPTCHA Enterprise
- ID del proyecto: introduzca su ID de proyecto de Google Cloud
- Clave del sitio: introduzca la clave del sitio desde Google Cloud
- Clave de API: Introduzca la clave de API de Google Cloud
- Tipo de clave: seleccione clave de sitio basada en la puntuación
-
Establezca umbral de seguridad
-
Puntuación de umbral: establezca entre 0,0 y 1,0
-
Valores recomendados:
- 0,7-0,9: Alta seguridad (puede bloquear a algunos usuarios legítimos)
- 0,5-0,7: seguridad equilibrada (recomendado)
- 0,1-0,5: menor seguridad (permite más usuarios)
-
-
Guardar y publicar
- Haga clic en Crear para guardar la configuración
- Haga clic en Publicar para que esté disponible
Punto de comprobación de validación:
- Configuración guardada correctamente
- Todos los campos obligatorios completados
- Configuración publicada y visible
- No hay mensajes de error
Añadir reCAPTCHA al formulario
Después de configurar el servicio reCAPTCHA, agregue la protección al formulario de la siguiente manera:
Figura: Agregar el componente Captcha invisible al formulario
Vaya al formulario en AEM Sites y haga clic en Editar para abrirlo en el editor universal. Espere a que se cargue el editor.
- Vaya al formulario en AEM Sites
- Haga clic en Editar para abrir en el editor universal
- Espere a que se cargue el editor
En el árbol de contenido (panel izquierdo), busque la sección Formulario adaptable y expanda la estructura del formulario para ver los puntos de inserción.
- En el árbol de contenido (panel izquierdo), busque la sección Formulario adaptable
- Expanda la estructura del formulario para ver los puntos de inserción
Añada el componente Captcha (invisible) a al formulario.
- Haga clic en el icono Añadir (+) de la sección del formulario
- En la lista de componentes, seleccione Captcha (invisible)
- También puede arrastrar y soltar el componente desde el panel Componentes
Seleccione el componente captcha recién añadido y verifique que utiliza su configuración reCAPTCHA.
- Seleccione el componente captcha recién agregado
- En el panel Propiedades, compruebe que utiliza la configuración de reCAPTCHA
- No se necesita ninguna configuración adicional para la configuración básica
Publique los cambios y compruebe que no hay errores.
- Haga clic en Publicar en el editor universal
- Espere la confirmación
- Verifique que no aparezcan errores
Verifique la implementación
Su formulario protegido está ahora disponible en:
https://<branch>--<repo>--<owner>.aem.live/content/forms/af/
<form-name>
URL de ejemplo:
https://main--my-forms--company.aem.live/content/forms/af/
contact-us-form