javascript - 在 Angular 6 中使用脚本-recaptcha
问题描述
我正在尝试在我的项目中实现 recaptcha,但我不确定如何使用它。
我以这种方式导入脚本:
public loadScript() {
let body = <HTMLDivElement>document.body;
let script = document.createElement('script');
script.innerHTML = '';
script.src = 'https://www.google.com/recaptcha/api.js';
script.async = true;
script.defer = true;
body.appendChild(script);
}
然后我在组件构造函数中调用这个函数,它可以工作——recaptcha 被正确渲染和工作,但是如何从它获得我的后端的响应?
我试过了grecaptcha.getResponse()
,但我得到ReferenceError: "grecaptcha is not defined"
了——有趣的东西并不总是如此。那么如何让 Typescript 知道 grecaptcha 是什么?
解决方案
要在 Angular 4、5、6 中使用 Google reCAPTCHA v3,请执行以下简单步骤
现在在您的角度项目index.html中添加以下脚本文件
<script src='https://www.google.com/recaptcha/api.js'></script>
然后在要使用 Captcha的组件文件中添加以下标签
<div class="form-group">
<div id="captcha_element" class="g-recaptcha"
[attr.data-sitekey]="siteKeyCaptcha"></div>
</div>
现在使用以下代码更新您的Typescript 文件。
declare var grecaptcha: any;
//declare Varible with public key given by Google
siteKeyCaptcha: string = "6LdF6xxxxxxxxxxxxxxxxxxxxxxxxxxxWVT";
//when we route back from the page we have to render captcha again
grecaptcha.render('capcha_element', {
'sitekey': this.siteKeyCaptcha
});
要在单击添加回调事件时从 Captcha 获得响应,如下在HTML中
**HTML**
<div class="form-group">
<div id="capcha_element" class="g-recaptcha"
data-callback="getResponceCapcha" [attr.data-sitekey]="siteKeyCaptcha"></div>
</div>
**Typescript**
ngOnInit() {
//....rest of code....
window['getResponceCapcha'] = this.getResponceCapcha.bind(this);
}
getResponceCapcha(captchaResponse: string) {
this.verifyCaptcha(captchaResponse);
}
verifyCaptcha(captchaResponse: string) {
//you can do HTTP call from here
}