Como poner reCAPTCHA en HTML

Como poner o integrar reCAPTCHA en HTMLEn 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...
Como poner o integrar reCAPTCHA en HTMLIndica 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:
<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.

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;
}
Paso 3 jаvascript

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' );
  }
})
Ver resultados de este Tutoriales En Linea.


<a onclick=Tutoriales En Linea" class='avatar avatar-64 photo' height='64' width='64'>
  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-05-28
  • Categorias: Google Diseño Web WebSite Noticias Tutorial



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!