这样做我的 Recaptcha V3 代码是否有效？

如何解决这样做我的 Recaptcha V3 代码是否有效？

第一次使用Recaptcha v3，想知道是否执行成功。

      $(document).ready(function() {
        var element = document.getElementById('send-it');
        element.onclick = validate;
      }
    );


  function onSubmit(token) {
    var email = $('#getEmail').val();
    $.ajax({
      type: "POST",url: "URL",data: {
        getEmail: email,stage: "staging"
      },success: function(data) {
        loadingButton();
      },error: function(e) {}
    });
    }

    function validate(event) {
      event.preventDefault();
      var IsValid = $("#form").valid();
      if (IsValid) {
        grecaptcha.execute();
      }
    }

然后我使用Recaptcha div来回调代码。

<div id='recaptcha' class="g-recaptcha"
                data-sitekey="my key"
                data-callback="onSubmit"
                data-size="invisible"></div>
                <input type="email" name="getEmail" value="" class="get-email" id="getEmail" name="getEmail" placeholder="Email Address">
                <button class="notify" id="send-it"></button>
        <div id="errors"></div>

问题是现在我没有在后端验证分数。它只是运行 Recaptcha，然后无论分数如何都发送表单。

这里有我遗漏的东西吗？

感谢您提前回答

解决方法

建议在调用grecaptcha之前进行输入验证。您可以通过简单地监控浏览器控制台和后端服务器日志来简单地知道 recaptcha 是否成功执行。

更新：执行此操作的方法因您使用的后端类型而异。就我而言，我使用了 firebase 函数来处理数据。这将是我的代码。

Javascript/jQuery：

const apiKey = "Unique Key for Recaptcha V3";
const apiString = "Your backend server API Link to call";
$("#submit").click(function(e) {
    e.preventDefault();
    //Get values
    var email = document.getElementById('email').value;
    var phone = document.getElementById('phone').value;
    //Do data validation
    if (document.getElementById('phone').value.length <= 7) {
        confirm('Please enter a valid phone number');
        return;
    } else if (document.getElementById('email').value.length <= 6) {
        confirm('Please enter an valid email');
        return;
    } else { //Process recaptcha only if the data is all valid
        grecaptcha.execute(apiKey,{ action: 'form' })
            .then(function(token) {
                axios.get(`${apiString}?token=${token}`)
                    .then(function(response) {
                        const score = response.data.score;
                        //Take action here based on score.
                        if (score > 0.5) {
                            $("form").submit(e);
                            e.preventDefault();
                            $("form").unbind('submit').submit();
                            try {
                                //save data to your server database
                            } catch (err) {
                                console.log('Error Code: ' + err);
                                return;
                            }
                        }
                    })
                    .catch(function(error) {
                        console.log("error: ",error);
                    });
            });
    }
});

基本上，正如您从谷歌提供的文档中看到的那样Recaptcha V3 Score。

reCAPTCHA v3 在没有用户摩擦的情况下为每个请求返回一个分数。该分数基于与您网站的互动情况，可让您为自己的网站采取适当的措施。

在您将 API 调用到您的后端以进行重新验证后，它会用分数响应您。从那里，您可以自行控制以确定有效用户的及格分数。对于我的情况，选择了 50%，即 0.5。当分数高于 0.5 时，则数据只会保存到您的数据库中。

至于服务器端处理浏览器API调用的代码，非常简单直接，你只需要提供你的秘钥，然后触发另一个请求到谷歌提供的验证链接。 Google 会用分数回复您，然后您的 API 会用分数回复您的浏览器。

Server Side Validation

这是我的 node.js 后端处理示例。

exports.recaptchaChallenge = functions.https.onRequest(async(req,res) => {
const origin = req.headers.origin;
res.setHeader("Access-Control-Allow-Origin",req.headers.origin);
const secret = "Your Secret Key";
const token = req.query.token;
const response = await axios.get(`https://recaptcha.google.com/recaptcha/api/siteverify?secret=${secret}&response=${token}`);
const data = response.data;
if (data.success) { //send the response back to your browser
    return res.status(200).send({ score: data.score })
}});

祝你尝试成功！希望我的解释清楚哈哈哈哈。