javascript - 带有vue-recaptcha-v3(v1.8.0)的reCAPTCHA v3始终无法通过获取API进行验证

在我的带有节点模块vue-recaptcha-v3的VueJS应用中，reCAPTCHA v3在验证步骤中始终失败。网页上应显示“ reCAPTCHA保护”横幅，并且在验证步骤之前收到的回复很好。当我尝试通过POST将令牌代入https://www.google.com/recaptcha/api/siteverify时：

// Execute reCAPTCHA with action "login".
const response = await this.$recaptcha('contact');
const data = {
    secret: secretKey,
    response,
};

try {
    const validationResponse = await fetch(validationUrl, {
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    });
[...]

我只是得到错误fetch

所以我改用

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.google.com/recaptcha/api/siteverify. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

：

[...]
const validationResponse = await fetch(validationUrl, {
    method: 'POST',
    mode: 'no-cors',
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
});
[...]

然后导致此响应：

{
  "success": false,
  "error-codes": [
    "missing-input-response",
    "missing-input-secret"
  ]
}

我想您不能在mode: 'no-cors'模式（https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Supplying_request_options）下发送json的内容类型，所以我改用no-cors作为内容类型：

const response = await this.$recaptcha('contact');
const formData = new FormData();
formData.append('secret', secret_key);
formData.append('response', response);

try {
    const validationResponse = await fetch(validationUrl, {
        method: 'POST',
        mode: 'no-cors',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'multipart/form-data',
        },
        body: formData,
    });
[...]

但这只会导致Google做出以下回应：

<HTML>
<HEAD>
<TITLE>Bad Request</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<H1>Bad Request</H1>
<H2>Error 400</H2>
</BODY>
</HTML>

我真的不知道该怎么办-我想念什么？

最佳答案

好的，我终于在StackOverflow上找到了答案：reCAPTCHA - error-codes: 'missing-input-response', 'missing-input-secret' when verifying user's response (missing details on POST)-长话短说：Google的reCAPTCHA验证服务器似乎只接受"Content-Type": "application/x-www-form-urlencoded"，因此在我的情况下发送的数据必须是

body: 'secret=' + secretKey + '&response=' + response。

使用这些设置，不会发生错误（请注意：以这种方式发送的数据需要通过URLencode进行清理！在本示例中，我将其省略了。）
但是仍然令人困惑，例如Firefox显示来自Google的正确响应，但是Vue应用程序根本无法读取它-response.ok euqals为假！

原因：浏览器/客户端本身无法处理no-cors响应。服务器必须这样做！因此，必须将reCAPTCHA响应发送到您的服务器，并且服务器（例如PHP）必须将数据发送到Google的验证脚本。别无选择。 Google reCAPTCHA的文档缺少所有这些重要点。

而且-我自己感到羞耻，我现在才意识到这一点-完全有道理，因为对于reCAPTCHA验证，您需要您的秘密reCAPTCHA密钥，并且绝对不要将其存储在发送给客户端的JS应用程序中。你永远不会泄露你的秘密。

关于javascript - 带有vue-recaptcha-v3(v1.8.0)的reCAPTCHA v3始终无法通过获取API进行验证，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60703406/