angular - 如何在 Angular 2 应用程序中添加 reCAPTCHA？

Question

如何将 reCAPTCHA 集成到 Angular 2 应用程序中？

Answer 1

假设您有 reCAPTCHA 提供的站点 key 和客户端 key 。将以下代码放入组件中。

@ViewChild('captchaRef2') captchaRef2: ElementRef;
private _reCaptchaId: number;
private SITE_ID = [YourSiteKey];

ngAfterViewInit() {
    const grecaptcha = (window as any).grecaptcha;
    if (grecaptcha) {
      this._reCaptchaId = grecaptcha.render(this.captchaRef2.nativeElement, {
        'sitekey': this.SITE_ID,
        'callback': (resonse) => this.reCapchaSuccess(resonse),
        'expired-callback': () => this.reCapchaExpired()
      });
    }
}

下面是成功回调函数。如果响应数据有值(value)，则 reCAPTCHA 验证成功。

reCapchaSuccess(data:any){
    if(data){
      alert("Congratulation! reCAPTCHA verified.")
      // Some logic goes here
    }
  }

当 reCAPTCHA 过期时，将调用以下函数。

reCapchaExpired(){
    alert("Oops! reCAPTCHA expired.")
    // Some logic goes here
  }

将下面的 div 放入 HTML 文件中。

<div #captchaRef2></div>

将下面的JS脚本放入index.html文件中。

<script src='https://www.google.com/recaptcha/api.js?render=explicit" async defer'></script>