为什么 recaptcha 会在 Angular 4 应用程序中自动发出 GET 请求？答案

【问题标题】：Why does recaptcha make a GET request automatically in Angular 4 app?为什么 recaptcha 会在 Angular 4 应用程序中自动发出 GET 请求？
【发布时间】：2017-05-30 10:31:28
【问题描述】：

我正在尝试将 Google 的 Recaptcha 集成到我的 Angular 4 应用程序中，以保护我的登录免受暴力攻击。为此，我安装了 angular2-recaptcha 插件 (https://www.npmjs.com/package/angular2-recaptcha) 并修改了我的登录表单，如下所示：

<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
  <h2>Login</h2>
  <label for="inputEmail">Email</label>
  <input type="email" id="inputEmail" required ngModel name="username">
  <label for="inputPassword">Password</label>
  <input type="password" id="inputPassword" required ngModel name="password">
  <re-captcha *ngIf="tooManyRequests" site_key="[my site key]" (captchaResponse)="handleCorrectCaptcha($event)"></re-captcha>
  <button type="submit">Login</button>
</form>

然后在 login-component.ts 中，我有以下方法来处理 recaptcha 回调：

handleCorrectCaptcha(event) {
    this.recaptchaResponse = event;
}

以及登录表单的提交：

onSubmit(user: any) {
    this.authService.authenticateUser(<UserDetail>user, this.recaptchaResponse).subscribe((result) => {
      if (!result) {
          this.invalidCredentials = true;
      }
      this.tooManyRequests = false;
      this.recaptchaResponse = null;
   }, (error) => {
      if (error instanceof TooManyRequestsError) {
        this.tooManyRequests = true;
      } 
   });
 }

如果我添加一些断点，我看到当我在勾选“我不是机器人”框后提交表单时，使用正确的参数和所有内容正确调用了 onSubmit，但随后所有内容都被 GET 请求中断在login?username=something&password=somethingelse&g-recaptcha-response=token 上，我不知道这个请求来自哪里。我希望能够自己将 recaptcha 令牌发送到我的 API，然后在服务器端对其进行验证。

有人知道我错过了什么吗？

【问题讨论】：

标签： angular recaptcha

【解决方案1】：

我想通了。有点。表单没有动作或方法，这不是问题。但是其中有 recaptcha 字段，它似乎绕过了 ngSubmit 偶数处理程序。我在表单中添加了onsubmit="return false;"，现在它不再发出这个 GET 请求了。

【讨论】：