使用ng-recaptcha将Google reCaptcha v3集成到Angular应用中 [英] Integrating Google reCaptcha v3 into Angular app with ng-recaptcha

问题描述

我想保护注册页面免于自动提交，因此我决定尝试reCaptcha v3.这是一个Angular应用程序，我正在使用 ng-recaptcha 模块，以便更轻松地集成.我已经在Stackblitz上建立了一个基本示例，因此您可以在线对其进行测试:

I'd like to protect a register page from automatic submitions, so I decided to try reCaptcha v3. It's an Angular application, and I'm using ng-recaptcha module for easier integration. I've set up a basic example on Stackblitz so you can test it online:

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

我有几个疑问/问题:

1. 如果我将有效的Google密钥写入 app.module.ts 文件中，则当我按下提交"按钮时， this.recaptchaV3Service.execute 调用不会执行任何操作.是否是因为该应用程序不在生成reCaptcha V3密钥时所述的域中?另外，如果我输入了错误的密钥，Google会报告以下错误:

1. If I write my valid Google key into the app.module.ts file, when I press the submit button, the this.recaptchaV3Service.execute call does nothing. Is it because the app is not in the domain I stated when generating reCaptcha V3 keys? Also, if I write a wrong key, Google complains with the following error:

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

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

1. 一旦获得令牌，我该怎么办?我已经阅读了ng-recaptcha文档，但对此一无所获.我的意思是，当我拥有令牌时，该怎么做才能检查令牌是否有效并发送表格?

预先感谢

推荐答案

最后，我有一些时间尝试一些事情，并且设法使它起作用.基本上，我所做的是:

Finally, I got some time to try some things and I managed to make it work. Basically, what I did is:

1生成一对用于测试的密钥(在域中设置"localhost").

1 Generate a pair of keys for testing (setting 'localhost' in the domain).

2在客户端应用程序中，我已经按照其页面中的说明设置了 ng-recaptcha 模块(

2 In the client app, I've set up the ng-recaptcha module as explained in its page (https://www.npmjs.com/package/ng-recaptcha#recaptcha-v3-usage-see-in-action). Then, from the user registration component (which I want to protect), I run the following code when pressing the 'Submit' button:

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 库(

3 In the backend, in the user registration route, I use the axios library (https://www.npmjs.com/package/axios) to make a POST request to the Google verify service with the received token:

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

希望它会有所帮助，加油！

Hope it helps, cheers!

这篇关于使用ng-recaptcha将Google reCaptcha v3集成到Angular应用中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！