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

Question

我想保护注册页面免受自动提交，所以我决定尝试 reCaptcha v3。这是一个 Angular 应用程序，我使用ng-recaptcha模块来更轻松地集成。我已经在 Stackblitz 上设置了一个基本示例，因此您可以在线测试它：

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

我有几个疑问/问题：

1. 如果我将有效的 Google 密钥写入app.module.ts文件，当我按下提交按钮时，该this.recaptchaV3Service.execute调用将不执行任何操作。是因为该应用程序不在我在生成 reCaptcha V3 密钥时指定的域中吗？另外，如果我写错了密钥，Google 会抱怨以下错误：

错误：无效的站点密钥或未在 api.js 中加载：

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

提前致谢，

Answer 1

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

1 生成一对用于测试的密钥（在域中设置“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 ) 使用收到的令牌向 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...

希望能帮到你，加油！

Answer 2

我不确定我是否理解第一个问题。如果您使用无效密钥，则预计您会收到该错误。如果您对正确的域使用正确的密钥，则应该生成令牌。

对于第二个问题...在这种情况下确实不需要生成令牌，ngOnInit()因为您在方法中生成了令牌preSubmitForm()，这就足够了。至于如何处理令牌，您需要将其与其余表单数据一起发布到您的服务器。然后，在处理表单提交的服务器端代码中，向 recaptcha API 发出请求，提供令牌和您的密钥。

查看有关服务器端验证的Google reCaptcha 文档。