reCAPTCHA es un servicio de Google, que permite la verificación de los usuarios que usan un formulario en una página, simplemente marcando una casilla.
Accede a la página de reCAPTCHA usando tu cuenta de Google.
Indica la dirección URL del sitio donde se va a insertar el sistema de verificación, para validar el dominio o subdominios y copia las dos claves personales:
Clave del sitio. Se usa en el HTML de la página para cargar la API de reCAPTCHA.
Clave secreta. Se usa para autenticar la petición y respuesta entre el sitio y Google.
Inserta dentro del área del HEAD de la página específica, la siguiente instrucción:
<script async src="https://www.google.com/recaptcha/api.js"></script>
Agregamos la propiedad ASYNC para impedir el bloqueo de la página, en caso que por alguna razón el script de Google no esté disponible.
Puedes también definir cuáles 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.
<script async src='https://www.google.com/recaptcha/api.js?hl=es'></script>
Inserta en el lugar del formulario, donde deseas que se muestre el cuadro de verificación, entre las etiquetas <form></form>, el siguiente código.
<span class="msg-error error"></span>
<div id="recaptcha" class="g-recaptcha" data-sitekey="Clave del sitio"></div>
Sustituye "Clave del sitio" por la correspondiente.
Nota: el atributo data-sitekey mantendrá el valor de tu clave.
Hay otros atributos los cuales puedes agregar para personalizar la vista y funcionalidad de tu reCAPTCHA
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.
Armándolo
Ahora tenemos los ingredientes iniciales, es tiempo de ponerlos en un entorno funcional.
Paso 1 HTML
Vamos a poner nuestra etiqueta script y el placeholder en un simple formulario:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Como integrar “No CAPTCHA reCAPTCHA”</title>
</head>
<body>
<form action="" method="post">
<label for="name">Nombre:</label>
<input name="name" required><br />
<label for="email">Email:</label>
<input name="email" type="email" required><br />
<span class="msg-error error"></span>
<div id="recaptcha" class="g-recaptcha" data-sitekey="6Ld4Jh8TAAAAAD2tURa21kTFwMkKoyJCqaXb0uoK"></div>
<input type="submit" value="Submit" />
</form>
<!--js-->
<script src='https://www.google.com/recaptcha/api.js'></script>
</body>
</html>
Paso 2 CSS
msg-error {
color: #c65848;
}
.g-recaptcha.error {
border: solid 2px #c64848;
padding: .2em;
width: 19em;
}
Paso 3 JS
$( '#btn-validate' ).click(function(){
var $captcha = $( '#recaptcha' ),
response = grecaptcha.getResponse();
if (response.length === 0) {
$( '.msg-error').text( "reCAPTCHA is mandatory" );
if( !$captcha.hasClass( "error" ) ){
$captcha.addClass( "error" );
}
} else {
$( '.msg-error' ).text('');
$captcha.removeClass( "error" );
alert( 'reCAPTCHA marked' );
}
})
esta el form pero igual se puede enviar el form sin llenar el captcha
ResponderEliminarsolo tienes que retornar falso cuando hace la verificacion
Eliminarvar $captcha = $( '#recaptcha' ),
response = grecaptcha.getResponse();
if (response.length === 0) {
$( '.msg-error').text( "reCAPTCHA is mandatory" );
if( !$captcha.hasClass( "error" ) ){
$captcha.addClass( "error" );
}
return false;
} else {
$( '.msg-error' ).text('');
$captcha.removeClass( "error" );
alert( 'reCAPTCHA marked' );
}
Buenas noches, el código ".js" con qué se guarda?
ResponderEliminarScript
ResponderEliminardxghjklm,
ResponderEliminarHola buenas tardes. con qué nombre debo guardar el script???
ResponderEliminarNo me andubo, dice que la clave publica no es correcta para mi sitio
ResponderEliminar