En este artículo, vamos a discutir cómo integrar Google reCAPTCHA v2 en PHP.
Acercarse:
- Registra tu sitio en Google reCAPTCHA
- Enviar formulario HTML
- Obtener clave de respuesta en el lado del servidor
- Vuelva a verificar la clave y dé respuesta al final del usuario.
Paso 1: Registre su sitio en Google reCAPTCHA: registre su sitio web en la plataforma Google reCAPTCHA para obtener las claves, es decir, la clave del sitio y la clave secreta necesarias para codificar el formulario HTML.
Haga clic aquí para ir al sitio web de Google reCAPTCHA.
Demostración para registrar el sitio en Google reCAPTCHA
Paso 2: crear un formulario de Google reCAPTCHA en HTML: aquí vamos a crear un formulario HTML simple con acción como action.php, un campo de entrada y un botón. Mientras tanto, debemos agregar el enlace CDN de Google reCAPTCHA en nuestro documento HTML y una etiqueta div en el formulario para obtener reCAPTCHA en el documento HTML.
Enlace de CDN: <script src=”https://www.google.com/recaptcha/api.js” async defer></script>
Etiqueta div: <div class=”g-recaptcha” data-sitekey=”your_site_key”></div>
Nota: debe reemplazar «your_site_key» con su clave de sitio.
Ejemplo:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <!-- CSS file --> <link rel="stylesheet" href="style.css"> <!-- Google reCAPTCHA CDN --> <script src= "https://www.google.com/recaptcha/api.js" async defer> </script> </head> <body> <div class="container"> <h1>Google reCAPTCHA</h1> <!-- HTML Form --> <form action="action.php" method="post"> <input type="text" name="name" id="name" placeholder="Enter Name" required> <br> <!-- div to show reCAPTCHA --> <div class="g-recaptcha" data-sitekey="your_site_key"> </div> <br> <button type="submit" name="submit_btn"> Submit </button> </form> </div> </body> </html>
style.css
.container {
border: 1px solid rgb(73, 72, 72);
border-radius: 10px;
margin: auto;
padding: 10px;
text-align: center;
}
h1 {
margin-top: 10px;
}
input[type="text"] {
padding: 10px;
border-radius: 5px;
margin: 10px;
font-family: "Times New Roman", Times, serif;
font-size: larger;
}
button {
border-radius: 5px;
padding: 10px;
color: #fff;
background-color: #167deb;
border-color: #0062cc;
font-weight: bolder;
cursor: pointer;
}
button:hover {
text-decoration: none;
background-color: #0069d9;
border-color: #0062cc;
}
.g-recaptcha {
margin-left: 513px;
}
Paso 3: back-end de PHP: hemos enviado con éxito el formulario HTML, ahora es el momento de codificar el back-end de PHP. Después del envío del formulario, en el lado del servidor, verificamos que el formulario válido se envíe o no mediante la función «isset()». Después de la validación, buscamos el nombre en la variable $name y la respuesta de Google recaptcha en la variable $recaptcha.
Fragmento de código:
PHP
<?php
// Checking valid form is submit or not
if (isset($_POST['submit_btn'])) {
// Storing name in $name variable
$name = $_POST['name'];
// Storing google recaptcha response
// in $recaptcha variable
$recaptcha = $_POST['g-recaptcha-response'];
}
?>
Paso 4: Verificar el captcha: para verificar el captcha, debemos realizar una solicitud de publicación a la siguiente URL.
- URL: https://www.google.com/recaptcha/api/siteverify?secret=<clave_secreta>&response=<clave_respuesta>
- secret_key: esta clave la obtendrá de la consola de Google, es decir, clave secreta.
- response_key: esta clave proviene del lado del cliente cuando un usuario envía el formulario.
- g-recaptcha-response es el nombre de la clave de respuesta que generará el navegador al enviar el formulario. Si está en blanco o es nulo, significa que el usuario no ha seleccionado el captcha, por lo que devuelve el error.
- Su necesidad de reemplazar «su_clave_secreta» con su clave secreta.
action.php
<?php
// Checking valid form is submitted or not
if (isset($_POST['submit_btn'])) {
// Storing name in $name variable
$name = $_POST['name'];
// Storing google recaptcha response
// in $recaptcha variable
$recaptcha = $_POST['g-recaptcha-response'];
// Put secret key here, which we get
// from google console
$secret_key = 'your_secret_key';
// Hitting request to the URL, Google will
// respond with success or error scenario
$url = 'https://www.google.com/recaptcha/api/siteverify?secret='
. $secret_key . '&response=' . $recaptcha;
// Making request to verify captcha
$response = file_get_contents($url);
// Response return by google is in
// JSON format, so we have to parse
// that json
$response = json_decode($response);
// Checking, if response is true or not
if ($response->success == true) {
echo '<script>alert("Google reCAPTACHA verified")</script>';
} else {
echo '<script>alert("Error in Google reCAPTACHA")</script>';
}
}
?>
Producción:
Publicación traducida automáticamente
Artículo escrito por asmitsirohi y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA