带有 reCAPTCHA v3 的角反应形式

Posted 2023-02-18

【中文标题】带有 reCAPTCHA v3 的角反应形式

【英文标题】：Angular reactive forms with reCAPTCHA v3

【发布时间】：2021-11-04 02:31:59

【问题描述】：

我想将表单与验证码令牌一起发送到后端。 在我的 .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>

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

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

我多次阅读文档：https://developers.google.com/recaptcha/docs/v3 但对我来说很模糊。我也在关注这个指南：https://nicedoc.io/DethAriel/ng-recaptcha#installation 并在整个互联网上搜索但无法掌握。

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

【参考方案1】：

提交按钮不需要点击监听，只需在registerUser 请求之前请求验证码即可。

我没有得到您提交表单的条件，但是可以使用 RxJS switchMap 运算符轻松地将令牌添加到表单数据中，如下所示：

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

【讨论】：

我实际上很困惑验证码是如何工作的。我要找的是这个 --> (...) this.loader = this.recaptchaV3Service.execute('submitForm').pipe( switchMap(token => this.registerService.registerUser(...data, captcha: token)), ).subscribe(() => (...) 谢谢你的帮助！

顺便说一句，this.loader 这个变量的名字不好，因为你在这里保存了一个订阅，当组件销毁时你应该调用this.loader.unsubscribe()，以避免内存泄漏。如果您需要为此请求序列启动/停止加载程序，您的组件中应该有boolean 属性，您应该在调用recaptchaV3Service.execute 之前将其设置为true，并在subscribe 处理程序中设置为false