Question

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

Answer 1

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

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

以下是Success回调函数。如果响应数据有值，则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>

Answer 2

通过放置js脚本，有时我会遇到以下错误： “ grecaptcha.render不是函数” 因此，万一遇到此错误，只需使用以下js脚本而不是上面的

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

欢呼！

Answer 3

如果存在ng-recaptcha，为什么要花这么多钱呢？

yarn add ng-recaptcha或npm i ng-recaptcha --save
在您的一个模块中（例如app.module.ts，shared.module.ts等）

（如解释的here）

import { RecaptchaModule, RECAPTCHA_SETTINGS, RecaptchaSettings } from 'ng-recaptcha';

@NgModule({
  imports: [RecaptchaModule],
  providers: [
    {
      provide: RECAPTCHA_SETTINGS,
      useValue: { siteKey: '<YOUR_KEY>' } as RecaptchaSettings,
    },
  ],
}) export class MyModule { }

在您的html中将其用作<re-captcha>

如何在角度2应用程序中添加reCAPTCHA？

3 个答案: