3

我正在尝试将Invisible reCAPTCHA与我的 Angular 4 表单集成。

在组件的 TS 部分，我有这样的功能：

onSubmit(token: string) {
    alert(token);
}

我的 HTML 看起来像这样（仅显示相关部分）：

<form (ngSubmit)="onSubmit()" #myForm="ngForm">
    <button  type="submit" class="btn g-recaptcha" data-sitekey="mykey" data-callback="onSubmit">Submit</button>
</form>

单击该按钮时，我会收到一条提示令牌未定义的警报，或者收到如下错误消息：“无法联系 reCAPTCHA。请检查您的连接并重试。” 不是真正的确定性——有时我会看到一种行为，有时会看到另一种行为。

我认为(ngSubmit)表单中的标签可能会干扰 reCAPTCHA。但是，如果我删除，则根本不会调用(ngSubmit)该函数...onSubmit

整合它的正确方法是什么？

StackOverflow 上的 AngularJS 有一个类似的问题，但我真的不知道如何将该解决方案适应 Angular 4。

4

3 回答 3

1

ReCAPTCHA可以在 Angular 中实现如下。请注意，此示例不包括所需的服务器端代码。

先决条件

包括reCAPTCHA api。

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

声明验证码

ReCAPTCHA 变量可以在 Typescript 中声明如下：

declare var grecaptcha: any;

但是，对于更多类型的支持，ReCAPTCHA可以使用该接口。

declare var grecaptcha: ReCAPTCHA;

ReCAPTCHA 接口 (v2) [recaptcha.ts]

import { ElementRef } from '@angular/core';

/**
 * Interface for Google's reCAPTCHA JavaScript API. 
 * 
 * Display API
 * @see {@link https://developers.google.com/recaptcha/docs/display}
 * 
 * Invisible API
 * @see {@link https://developers.google.com/recaptcha/docs/invisible}
 */
export interface ReCAPTCHA {

  /**
   * Programatically invoke the reCAPTCHA check. Used if the invisible reCAPTCHA is on a div 
   * instead of a button.
   * 
   * @param {string} opt_widget_id Optional widget ID, defaults to the first widget created if 
   *     unspecified.
   */
  execute(opt_widget_id?: string): void;

  /** 
   * Renders the container as a reCAPTCHA widget and returns the ID of the newly created widget.
   * 
   * @param {ElementRef|string} container The HTML element to render the reCAPTCHA widget.  Specify 
   *    either the ID of the container (string) or the DOM element itself. 
   * @param {Object} parameters An object containing parameters as key=value pairs, for example,
   *    {"sitekey": "your_site_key", "theme": "light"}.
   */
  render(container: ElementRef|string, parameters: {[key: string]: string}): void;

  /** 
   * Resets the reCAPTCHA widget.
   * 
   * @param {string} opt_widget_id Optional widget ID, defaults to the first widget created if 
   *     unspecified.
   */
  reset(opt_widget_id?: string): void;

  /** 
   * Gets the response for the reCAPTCHA widget. Returns a null if reCaptcha is not validated. 
   * 
   * @param {string} opt_widget_id Optional widget ID, defaults to the first widget created if 
   *     unspecified.
   */
  getResponse(opt_widget_id?: string): string;
}


ReCAPTCHA Angular 服务 [recaptcha.service.ts]

import { Injectable, OnInit } from '@angular/core'
import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http'
import { Observable } from 'rxjs'
import { map } from 'rxjs/operators'

export interface ReCAPTCHAResponse {
  success: boolean; 
  status_code: number,
  error_codes?: Array<string>;
}

const httpOptions = {
  headers: {'Content-Type': 'application/json'},
  observe: "body",
  responseType: "json",
  withCredentials: true
}


@Injectable()
export class ReCAPTCHAService {
  public constructor(private http: HttpClient) {}

  public verifyUserResponse(userResponseToken: string): Observable<ReCAPTCHAResponse> {
    return this.http.post<ReCAPTCHAResponse>('/auth/captcha', {'g-recaptcha-response': userResponseToken}, httpOptions).
      pipe(map( (resp: HttpResponse) => { ... resp.body }))
  } 
}


角组件

import { Component, OnDestroy, OnInit } from '@angular/core'
import { ReCAPTCHA } from './recaptcha'
import { ReCAPTCHAResponse, ReCAPTCHAService } from './recaptcha.service'


declare var grecaptcha: ReCAPTCHA;
declare var window: any;

@Component ({
  moduleId: module.id,
  selector: 'create-account',
  templateUrl: 'create-account.component.html'
})
export class CreateAccountComponent implements OnDestroy, OnInit {

  public constructor(private recaptcha: ReCAPTCHAService) {}

  public ngOnInit(): void {
    // Export reCAPTCHACallback to global scope.
    window['reCAPTCHACallback'] = this.reCAPTCHACallback.bind(this);

    grecaptcha.render('create-account-captcha', {
      'sitekey': 'your-site-key',
      'size': 'invisible',        // Optional (see docs)
      'callback': 'reCAPTCHACallback'
    });
  }

  /**
   * Verify reCAPTCHA response on server. 
   */
  public reCAPTCHACallback(token: string) {
    if (token == null || token.length === 0) {
      grecaptcha.reset();
      // TODO: report that captcha was invalid
    } else {
      this.recaptcha.verifyUserResponse(token).subscribe(
        (r: ReCAPTCHAResponse) => {
          if (r.success) {
            // TODO: create the new user account
          } else {
            grecaptcha.reset();
            // TODO: report that captcha was invalid
          }
        },
        (error: any) => {
          // TODO: handle server error
        }
      })
  }
}

组件模板

<!-- Invisible reCAPTCHA dynamically rendered. -->
<div id='create-account-captcha' class="g-recaptcha"></div>
于 2019-10-20T13:01:08.120 回答
0

这是我目前与 Angular 10 一起使用的一个很棒的 reCAPTCHA npm 库。

npm i ng-recaptcha
于 2020-07-16T04:03:38.130 回答
0

在 component.html 中：

<re-captcha (resolved)="resolved($event)" siteKey="enter key"></re-captcha>

组件.ts

export class SignupComponent implements OnInit {
  resolved(captchaResponse: string) {
    console.log(`Resolved captcha with response ${captchaResponse}:`);
}

首先将其加载到模块中

import { RecaptchaModule } from 'ng-recaptcha';
imports: [
    BrowserModule,
     RecaptchaModule.forRoot(),  
    // RecaptchaFormsModule,  
]

在 index.html 中加载 

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
于 2018-10-22T09:53:21.227 回答