Question

我试图将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;
      } 
   });
 }

如果我添加一些断点，我看到当我在勾选方框后提交表单时＃34;我不是机器人＆＃34;，onSubmit正确调用正确的参数和所有内容，但是一切都是被login?username=something&password=somethingelse&g-recaptcha-response=token上的GET请求中断，我不知道此请求的来源。我本来希望能够将recaptcha令牌自己发送到我的API，然后在服务器端验证它。

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

Answer 1

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

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

1 个答案: