angular - 使用 ng-recaptcha 将 Google reCaptcha v3 集成到 Angular 应用程序中

Question

我想保护注册页面免受自动提交，所以我决定尝试 reCaptcha v3。这是一个 Angular 应用程序，我正在使用 ng-recaptcha模块更容易集成。我在 Stackblitz 上设置了一个基本示例，因此您可以在线对其进行测试:

https://stackblitz.com/edit/angular-qk3jhr

我有几个疑问/问题:

如果我将有效的 Google key 写入 app.module.ts文件，当我按下提交按钮时，this.recaptchaV3Service.execute call 什么都不做。是不是因为该应用不在我生成 reCaptcha V3 key 时声明的域中？此外，如果我写错了 key ，Google 会报错:

Error: Invalid site key or not loaded in api.js:

一旦我得到 token ，我该怎么办？我已经阅读了 ng-recaptcha 文档，但我没有看到任何关于它的信息。我的意思是，当我拥有 token 时，我需要做什么来检查它是否有效并发送表格？

提前致谢，

Answer 1

最后，我有时间尝试一些事情，并设法让它发挥作用。基本上，我所做的是:

1 生成一对用于测试的 key (在域中设置“localhost”)。

2 在客户端应用程序中，我设置了 ng-recaptcha模块，如其页面 (https://www.npmjs.com/package/ng-recaptcha#recaptcha-v3-usage-see-in-action) 中所述。然后，从用户注册组件(我想保护它)中，我在按下“提交”按钮时运行以下代码:

public beforeSubmittingForm(): void {
    this.recaptchaV3Service.execute('registerSubmit').subscribe(
        (token) => {
            // 'this.user' contains the data of the user we want to create. Add the received token
            this.user.recaptchav3_token = token;    

            this.submitForm();  // This sends the user data to the backend
        },
        (error) => {
            this.errors = [ 'Error trying to verify request (reCaptcha v3)' ];
        });
}

3 在后端，在用户注册路由中，我使用 axios库 ( https://www.npmjs.com/package/axios ) 使用收到的 token 向 Google 验证服务发出 POST 请求:

try {
    var result = await axios.post("https://www.google.com/recaptcha/api/siteverify", {}, {
        params: {
            secret: recaptcha_api_key,  // Secret API key
            response: req.body.recaptchav3_token    // Received token from the frontend
        }
    });

    if(result.score < 0.5) {
        return res.status(403).json({ msg: 'Google Recaptcha error' });
    }
} catch(e) {
    return res.status(403).json({ msg: 'Error trying to verify the request' });
}
// Continue with the registration process...

希望有帮助，加油!