Inicia sesión




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.

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 Como poner reCAPTCHA en HTML...
Tutoriales en linea


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!






Que es marketing de eventos

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-04-07
  • Categorias: Post Patrocinados Coobis Marketing Noticias Tutorial

Cómo analizar el rendimiento del sitio web con Lighthouse

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-04-05
  • Categorias: Diseño Web WebSite webmasters Optimizacion Noticias Tutorial

Como descargar videos de YouTube, Instagram, Facebook y Twitter

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-03-30
  • Categorias: YouTube Audio Video Redes Sociales Facebook Twitter Instagram WebSite Noticias Tutorial

Curso de CSS avanzado

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 html5 Html Cursos Noticias Tutorial

Curso de Introducción a CSS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 WebSite webmasters Cursos Noticias Tutorial

Curso básico de Javascript

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