<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> function fnsubmit() { var response = grecaptcha.getResponse(); if (response.length == 0) alert('captcha') } </script> <script src="https://www.google.com/recaptcha/api.js" async defer></script> </head> <body> <form action="" method="post"> <label for="name">Name:</label> <input name="name" required><br /> <label for="email">Email:</label> <input name="email" type="email" required><br /> <div class="g-recaptcha" data-sitekey="TU API KEY AQUI"></div> </form> <input type="submit" value="Submit" onclick="fnsubmit()" /> </body> <html>
Paso 1
Primero, necesitamos una clave API, así que ve a https://www.google.com/recaptcha/admin. Para ganar acceso a esta página necesitarás haber iniciado sesión en tu cuenta de Google. Se te preguntará que registres tu sitio web, así que dale un nombre adecuado, entones lista los dominios (por ejemplo tutsplus.com) donde este particular reCAPTCHA será usado. Subdominios (tales como webdesign.tutsplus.com y code.tutsplus.com) son automaticamente tomados en cuenta.
Paso 2
Con eso hecho se te dará una clave de sitio y la clave secreta de partner:
Paso 3
Debajo de las claves verás algunos fragmentos para incluir reCAPTCHA en tu sitio web. Primero está el JavaScript:
1
|
Puedes también definir cuales de los 40 idiomas soportados estás usando agregando un parámetro a la cadena. Aquí estamos agregando
es el cual nos dará el reCAPTCHA para el lenguaje Español.
1
|
Pon esta etiqueta script en el pie de tu página (o justo debajo del formulario donde reCAPTCHA aparecerá, dependiendo de como prioritizes tu carga de recursos).
Paso 4
Enseguida el placeholder que necesitarás agregar a marcado de tu formulario cuando sea que reCAPTCHA aparezca:
1
| <div class="g-recaptcha" data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div> |
Nota: el atributo
data-sitekey mantendrá el valor de tu clave, no como este ejemplo.
Hay otros atributos los cuales puedes agregar para personalizar la vista y funcionalidad de tu reCAPTCHA en este punto. Por ejemplo, agregar
data-theme="dark" a este div te dará una versión oscura, la cual podría encajar mejor en tu interfaz de usuario:
Para mas detalles sobre la configuración de tu reCAPTCHA hecha un vistazo a developers.google.com.
No hay comentarios:
Publicar un comentario