Angular响应式表单集成reCAPTCHA v3提交带令牌表单的方案咨询

reCAPTCHA v3 完全可以和 Angular 响应式表单结合使用，你的基础思路方向是对的，问题出在异步操作的时序处理上。

你当前实现的核心问题 #

• 触发逻辑并行：你现在点击按钮会同时触发executeRecaptcha的异步token请求、以及表单submit事件触发的submitForm逻辑，后者执行时token请求还未返回，自然拿不到captcha值
• token生成时机不合理：提前生成token可能会出现提交时token已过期（reCAPTCHA v3 token有效期仅2分钟，且只能使用一次）

正确改造方案 #

1. 调整模板逻辑 #

移除按钮上的executeRecaptcha绑定，改为表单绑定ngSubmit触发提交逻辑，新增loading状态防重复提交：

<form [formGroup]="form" (ngSubmit)="submitForm()">
  <!-- 其他表单字段省略 -->
  <div class="d-flex justify-content-center form-buttons">
    <button class="btn btn-primary" type="submit" [disabled]="loading">{{ 'REGISTER' }}</button>
  </div>
</form>

2. 重构TS提交逻辑 #

调整为先校验表单->再获取token->最后提交接口的串行逻辑，彻底解决异步时序问题：

loading = false; // 新增loading状态防重复提交

buildForm() {
  this.form = this.fb.group({
    email: [null, Validators.required],
    firstName: [null, Validators.required],
    lastName: [null, Validators.required],
    company: [null]
    // captcha不需要提前声明在表单里，保留原有声明也可正常使用
  });
}

submitForm() {
  super.submitForm();
  // 先做表单合法性校验，不通过直接返回
  if (this.form.invalid) {
    this.onValueChanged(this.form.getRawValue());
    return;
  }

  // 校验通过后再获取recaptcha token
  this.loading = true;
  this.recaptchaV3Service.execute('submitForm').subscribe({
    next: (token) => {
      console.log('Recaptcha v3 token', token);
      // 组装提交参数，把token拼入表单数据
      const formValue = this.form.getRawValue();
      const data = getFormDataWithCaptcha<MyType>({...formValue, captcha: token});
      // 调用提交接口
      this.registerService.registerUser(data).subscribe({
        next: () => {
          this.messages.show('REGISTERED', 'success');
          this.loading = false;
        },
        error: (err) => {
          console.error('提交失败', err);
          this.loading = false;
        }
      })
    },
    error: (err) => {
      console.log(`Recaptcha v3 error:`, err);
      this.messages.show('人机验证失败，请重试', 'error');
      this.loading = false;
    }
  })
}

补充说明 #

• 如果你希望保留captcha字段在响应式表单中，也可以在拿到token后先执行this.form.patchValue({captcha: token})赋值，再调用getRawValue拿数据，效果完全一致
• reCAPTCHA v3的token仅支持单次使用，每次提交都需要重新调用execute生成新的token
• 后端拿到token后必须主动调用reCAPTCHA校验接口验证token有效性，不能仅依赖前端逻辑做安全校验

内容的提问来源于stack exchange，提问作者MrOwl