Angular 使用 reCAPTCHA v3 的反应形式

Question

我想将表单连同验证码令牌一起发送到后端。 在我的 .ts 文件中，我有：

buildForm() {
    this.form = this.fb.group({
      email: [null, Validators.required],
      firstName: [null, Validators.required],
      lastName: [null, Validators.required],
      company: [null],
      captcha: [null]
    });
  }

executeRecaptcha() {
    this.recaptchaV3Service.execute('submitForm').subscribe(
      token => {
        console.log('Recaptcha v3 token', token);
        this.form.patchValue({captcha: token});
      },
      error => {
        console.log(`Recaptcha v3 error: see console`);
        console.log(`Recaptcha v3 error:`, error);
      }
    );
  }

submitForm() {
    super.submitForm();
    const data = getFormDataWithCaptcha<MyType>(this.form.getRawValue());
    console.log(data.captcha);
    if (this.form.invalid) {
      this.onValueChanged(data);
    } else {
      this.loader = this.registerService.registerUser(data).subscribe(
        () => {
          this.messages.show('REGISTERED', 'success');
        }
      );
    }
  }

我的模板：

<div class="d-flex justify-content-center form-buttons">
      <button class="btn  btn-primary" (click)="executeRecaptcha()"
              type="submit">{{ 'REGISTER' }}</button>
</div>

我知道我无法通过订阅将令牌分配给验证码，因为它是异步操作。 实施它的最佳方式是什么？

我想使用 recaptcha v3，这样用户就不必点击任何东西。

我看了好几遍文档：https://developers.google.com/recaptcha/docs/v3 but it's vague to me. I was also following this guide: https://nicedoc.io/DethAriel/ng-recaptcha#installation 并在互联网上搜索但无法掌握。

那么我可以将 recaptcha v3 与反应形式一起使用吗？我是否朝着正确的方向前进，如果不是，正确的方法是什么？另外，如果有任何解释并指出我的思维过程错误，我将不胜感激。

Answer 1

您不需要在提交按钮上点击监听器，您只需要在 registerUser 请求之前请求验证码令牌。

我没有得到你的表单提交条件，但是可以使用 RxJS switchMap 运算符轻松地将令牌添加到表单数据中，看起来像：

onSubmit(): void {
   this.recaptchaV3Service.execute('submitForm').pipe(
      map((token) => ({...this.form.getRawValue(), captcha: token})),
      switchMap((formData) => this.registerService.registerUser(formData))
   )
}