En esta ocasión en tutoriales en linea mostraremos como utilizar el servicio de Google llamado reCAPTCHA en HTML. 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.¿Qué es reCAPTCHA?
reCAPTCHA es un servicio gratuito que protege su sitio web del spam y el abuso. reCAPTCHA utiliza un avanzado motor de análisis de riesgos y desafíos adaptativos para evitar que el software automatizado participe en actividades abusivas en su sitio. Lo hace a la vez que permite que sus usuarios válidos pasen con facilidad. Accede a la página de reCAPTCHA usando tu cuenta de Google. Leer Mas...
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, el siguiente script:Clave secreta. Se usa para autenticar la petición y respuesta entre el sitio y Google.
<script async src="https://www.google.com/recaptcha/api.js"></script>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><span class="msg-error error"></span>
<div id="recaptcha" class="g-recaptcha" data-sitekey="Clave del sitio"></div>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.
Códigos
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 (marcador de posición) en un simple formulario:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Como poner o integrar reCAPTCHA en HTML</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="6LfI6gUTAAAAAFB6JLcrwFEzROwcglIBqYrbyU14"></div>
<input type="submit" value="Submit" />
</form>
<!--js-->
<script src='https://www.google.com/recaptcha/api.js'></script>
</body>
</html>Paso 2 CSS
Vamos a poner nuestro estilo CSS personalizado en nuestro formulario:
msg-error {
color: #c65848;
}
.g-recaptcha.error {
border: solid 2px #c64848;
padding: .2em;
width: 19em;
}Ahora toca el turno del jаvascript:
$( '#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' );
}
})
Comentarios