Configuración de formulario: agregar CAPTCHA 2.0

¿Sabías que "CAPTCHA" es el acrónimo de Completely Automated Public Turing test to tell Computer an Humans Apart? Generalmente, el CAPTCHA es una casilla que debe ser marcada antes de que un formulario pueda ser enviado para prevenir que no-humanos puedan hacerlo.

Puedes usar el producto gratuito de Google reCAPTCHA para añadir funcionalidad CAPTCHA a tus experiencias ion. 

Primero, necesitarás tener una llave secreta y una llave de sitio al visitar el link que te dejamos abajo para iniciar sesión en Google reCAPTCHA. Puedes hacerlo usando una cuenta Google que ya poseas o creando una nueva:

https://www.google.com/recaptcha/admin/create

Los scripts de servidores y muestras de javascript están incluidas en este post de ayuda que puedes integrar en tu servidor scriptlet de tu ion console y en las librerías de script, respectivamente.

Usarás estas inclusiones y siguiendo estos pasos a continuación, podrás añadir reCAPTCHA a tus formularios en ion.

Servidor Scriptlet

Vamos a añadir el servidor scriptlet a tu ion console primero y realizar algunos ajustes breves a la muestra del servidor scriptlet adjunto.

1. Abre el archivo adjunto “reCAPTCHA Server Scriptlet” y copia el código.

2. Haz clic en el menú Libraries en tu barra de navegación lateral de ion console y selecciona “Server Scriptlets”.

3. Añade una categoría de scriptlet o navega dentro de una existente.

4. Haz clic en el botón verde “New scriptlet” y añade un nuevo servidor scriptlet reCAPTCHA a la categoría seleccionada.

5. Dale un título a tu scriptlet y pega el código "reCAPTCHA Server Scriptlet" dentro del editor.

6. Reemplaza valor de ejemplo de secretKey de “XXXXXX” con tu llave secreta. Por favor toma en cuenta que las doble comillas deben seguir conteniendo el valor.

7. Guarda.

8. Haz clic en el título del scriptlet para navegar hacia atrás al scriptlet y ver el URL en tu ventana de navegador. Toma en cuenta del valor sscID en el URL en tu barra de direcciones. Este valor se necesitará en la configuración del javascript de la próxima sección.

rtaImage (12)

Javascript

Luego, vamos a añadir algunos javascript a tu ion console que puedan ejecutar el servidor scriptlet y mostrar la validación CAPTCHA en el envío del formulario.

1. Abre el archivo adjunto "reCAPTCHA Page Script" y copia el código.

2. Haz clic en el menú Libraries en tu barra de navegación lateral de tu ion console y selecciona “Scripts”.

3. Añade una categoría de script o navega dentro de alguna existente.

4. Haz clic en el botón verde “New script” para añadir un nuevo script a la categoría seleccionada.

5. Dale un nombre a tu script y copia el código "reCAPTCHA page script” dentro del editor.

6. Reemplaza el valor de scriptletID de X con un valor sscID desde el servidor scriptlet como lo viste en el paso 8 de la sección anterior.

7. Guarda.

rtaImage (13)

Widget

Ahora vamos a crear un "Widget" que será llevado dentro de tu(s) página(s) ion para añadir el CAPTCHA a tu formulario.

1. 1. Abre el archivo adjunto "reCAPTCHA Widget" y copia el código.

2. Haz clic en el menú Libraries en tu barra de navegación lateral de tu consola y selecciona “Widgets”.

3. Haz clic en el botón verde “New widget” para añadir un nuevo script a la categoría seleccionada.

4. Dale a tu Widget un nombre y selecciona la categoría o crea una nueva.

5. Pega el código "reCAPTCHA Widget".

6. Reemplaza el ejemplo de valor de sitekey de “XXXXXXX” con tu llave secreta. Por favor toma en cuenta que las doble comillas deben seguir conteniendo el valor.

7. Guarda.

rtaImage (14)

Configuraciones de página

Con el "scriptlet", script de página y el "widget" listos, es momento de llevarlos todos juntos hacia tu página.

1. Navega dentro de tu página de formulario.

2. Abre el editor de script y añade el script de página del reCAPTCHA a <head>.

3. Clic en OK.

4. Pon el cursor sobre la categoría Basic en tu Creative studio y arrastra el ícono de Widget dentro de tu formulario justo debajo del botón enviar.

5. Selecciona el Widget de reCAPTCHA.

Ahora tendrás todo listo para usar el CAPTCHA y verificar que un humano está enviando tu formulario y no un robot.