网站登录页集成Invisible reCAPTCHA遇报错：未验证解决方案求助

Hey there, let's break down why you're hitting this error and fix it—this almost always boils down to missing the critical backend verification step (Google’s API requires you to validate the user’s reCAPTCHA response server-side, not just client-side). Let's walk through the fixes step by step:

1. First, Double-Check Your Frontend Setup #

Your button has the g-recaptcha class, but you’re probably missing two required attributes to tie everything together:

• data-sitekey: Your public site key from the Google reCAPTCHA console
• data-callback: A function that submits your form only after reCAPTCHA verifies the user is human

Update your button code to look like this:

<button type="submit" class="g-recaptcha btn..." data-sitekey="YOUR_PUBLIC_SITE_KEY" data-callback="handleCaptchaSuccess">
  Log In
</button>

Then add this callback function to your login.js file—it triggers form submission once reCAPTCHA passes:

function handleCaptchaSuccess(token) {
  // Replace with your form's actual ID
  const loginForm = document.getElementById("login-form");
  // Submit the form now that reCAPTCHA is verified
  loginForm.submit();
  // Optional: Reset reCAPTCHA to prevent duplicate submissions if needed
  grecaptcha.reset();
}

2. The Critical Fix: Add Backend Verification #

This is the root cause of your error—Google actively checks that your backend validates the reCAPTCHA response token. Here’s how to implement it (example using PHP, but the logic applies to any backend language):

Step 1: Capture the reCAPTCHA Response Token #

When the form submits, a hidden g-recaptcha-response field is automatically added to your form payload. Your backend needs to grab this token.

Step 2: Send a Verification Request to Google #

Call Google’s siteverify API with your private secret key (keep this locked away—never expose it in frontend code!) and the user’s token.

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    // Grab the reCAPTCHA token from the form submission
    $recaptchaToken = $_POST["g-recaptcha-response"];
    // Your private secret key from the Google reCAPTCHA console
    $secretKey = "YOUR_PRIVATE_SECRET_KEY";

    // Build the verification request payload
    $verifyUrl = "https://www.google.com/recaptcha/api/siteverify";
    $postData = http_build_query([
        "secret" => $secretKey,
        "response" => $recaptchaToken,
        "remoteip" => $_SERVER["REMOTE_ADDR"] // Optional but recommended for extra security
    ]);

    // Send the request to Google's verification API
    $options = [
        "http" => [
            "method" => "POST",
            "header" => "Content-Type: application/x-www-form-urlencoded",
            "content" => $postData
        ]
    ];
    $context = stream_context_create($options);
    $verifyResponse = file_get_contents($verifyUrl, false, $context);
    $result = json_decode($verifyResponse);

    // Check if the verification succeeded
    if ($result->success) {
        // Proceed with your normal login logic (e.g., validate username/password)
        echo "Login verification successful!";
    } else {
        // Handle verification failure
        $errorCodes = implode(", ", $result->{"error-codes"});
        echo "reCAPTCHA verification failed: " . $errorCodes;
    }
}
?>

3. Common Pitfalls to Avoid #

• Don’t mix up keys: Your frontend uses the public sitekey, backend uses the private secret key—they must be paired from the same reCAPTCHA site entry in the console.
• Never skip backend validation: Client-side checks can be easily bypassed; Google explicitly requires server-side verification to flag this error.
• Check for token expiration: The g-recaptcha-response token expires after 2 minutes—if the user takes too long to submit, you’ll need to reset reCAPTCHA.
• Ensure server connectivity: If your backend is behind a firewall, make sure it can send requests to https://www.google.com/recaptcha/api/siteverify.

Once you implement the backend verification, the error should disappear immediately.

内容的提问来源于stack exchange，提问作者MrDjToto