Question

I want to integrate invisible recaptcha in angular 2 component.

Here is my code in login.component.html

 <button type="submit" class="g-recaptcha" data-sitekey="<Site-Key>" data-callback='onsubmit'> Log On </button>

And the login.component.ts has onsubmit method as below:

     onsubmit() {
  console.log("In onsubmit method");
}

I am getting the following error when i call onsubmit method from my login.component.ts

ReCAPTCHA couldn't find user-provided function:onsubmit

and how to get the 'g-recaptcha-response' in my login.component.ts.

Answer 1

有一些插件可以帮助您将google recaptcha与angular（例如angular-recaptcha）进行整合（更多细节请https://github.com/VividCortex/angular-recaptcha）

我们正在使用它来验证表单，它运行正常。

Answer 2

reCaptcha回调找不到您的onsubmit函数，因为它在组件中具有方法。

您可以像这样将全局函数附加到窗口对象：

window['onsubmit'] = () => {
    ...
}

您可以在Component的构造函数中完成

Answer 3

您可以使用 ng-recaptcha3 插件来处理它。这是 angular 2+ 的 google reCAPTCHA 3 实现。

初始化

<button id="firstB">first</button>
<button id="secondB">second</button>
<button id="thirdB">third</button>

<div class="container">
  <div class="row">
    <div id="first" class="col-sm-2">
      first column x2
    </div>
    <div id="second" class="col-sm-6">
      second column x6
    </div>
    <div id="third" class="col-sm-4">
      Third column x4
    </div>
  </div>
</div>



.container{
  width:100%;
  height:100px;
  background-color:red;
}
.row div{
  background-color:aqua;
}

$( "#firstB" ).click(function() {
  $( "#first" ).toggle();
});

$( "#secondB" ).click(function() {
  $( "#second" ).toggle();
});

$( "#thirdB" ).click(function() {
  $( "#third" ).toggle();
});

然后在登录前执行recaptcha

export class AppComponent implements OnInit {
  constructor(private recaptcha3: NgRecaptcha3Service) {
  this.recaptcha3.init(YOUR_SITE_KEY)

  }

Demo

Invisible reCAPTCHA integration with angular component

3 个答案: