¿Qué es reCAPTCHA? 1q2u1j
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 s válidos pasen con facilidad. Accede a la página de reCAPTCHA usando tu cuenta de Google.
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 .
Códigos 2l233k
Ahora tenemos los ingredientes iniciales, es tiempo de ponerlos en un entorno funcional.
Paso 1 HTML 4c2g6v
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 3i5n46
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' );
}
})