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

Posted 2023-02-18

【中文标题】使用 ng-recaptcha 将 Google reCaptcha v3 集成到 Angular 应用程序中

【英文标题】：Integrating Google reCaptcha v3 into Angular app with ng-recaptcha

【发布时间】：2020-04-16 00:31:12

【问题描述】：

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

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

我有几个疑问/问题：

如果我将有效的 Google 密钥写入 app.module.ts 文件，当我按下提交按钮时，this.recaptchaV3Service.execute 调用什么也不做。是不是因为该应用不在我生成 reCaptcha V3 密钥时声明的域中？此外，如果我写错了密钥，Google 会抱怨以下错误：

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

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

提前致谢，

【参考方案1】：

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

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

看看Google's reCaptcha documentation 的服务器端验证。

【讨论】：

嗨！第一个问题我想说的是，当我使用正确的密钥时，我没有从服务器得到任何响应（既没有成功也没有错误），但是如果我使用了错误的密钥，我确实会收到错误消息。无论如何，我不得不推进应用程序的其他功能，我没有时间做更多的测试。在接下来的几天里，我会花一些时间，我会发布我的发现。谢谢！

【参考方案2】：

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

1 生成一对用于测试的密钥（在域中设置'localhost'）。

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

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...

希望对你有帮助，干杯！