如何在angular 2应用程序中添加reCAPTCHA? [英] How to add reCAPTCHA in angular 2 application?

问题描述

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

How to Integrate reCAPTCHA in your Angular 2 Application?

推荐答案

假定您具有reCAPTCHA提供的站点密钥和客户端密钥.将以下代码放在组件中.

Assuming that you have Site Key and Client Secret given by reCAPTCHA. Put below code in component.

@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()
      });
    }
}

下面是成功回调函数.如果响应数据有价值，则reCAPTCHA成功验证.

Below is the Success callback function. If the response data has value then reCAPTCHA verified successfully.

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

当reCAPTCHA过期时，将调用以下功能.

Below function will be called when reCAPTCHA expired.

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

在HTML文件中的div下面放置

Put below div in the HTML file.

<div #captchaRef2></div>

将index.html文件中的JS脚本置于下方.

Put below JS script in index.html file.

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

这篇关于如何在angular 2应用程序中添加reCAPTCHA?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！