Inicia sesión


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.

Te sugiero seguir leyendo...

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-02-18
  • Categorias: Google Diseño Web WebSite Noticias Tutorial

Como poner reCAPTCHA en HTML Como poner reCAPTCHA en HTML...
Tutoriales en linea
¿Te gusta el tutorial?


Comentarios 1
    image
    administrador 2020-02-21
    Recuerde que para actualizar a V3...simplemente elije la versión que mejor se adapte a sus necesidades..
    Spam
    ------
    Tutoriales En Linea es un portal web de tutoriales, cursos online y de aprendizaje que pretenden simular al maestro mostrando al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad.


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






Cómo jugar Ajedrez Online TL

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-18
  • Categorias: WebSite Juegos Noticias Tutorial

Cómo encontrar un teléfono Android perdido

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-17
  • Categorias: Android Telefonia Smartphone Tablet Tutorial

Configura tu servidor VPN en Windows

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-15
  • Categorias: Windows Internet Red Wifi Seguridad Noticias Tutorial

Como crear una web con el lenguaje HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-08
  • Categorias: Diseño Web Lenguajes De Programacion CSS3 html5 Html WebSite webmasters Cursos Noticias Tutorial

Introducción Al Lenguaje JS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-08
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial

Curso básico de Javascript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-08
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial