Angular中reCAPTCHA v3二次调用失效问题求助

核心问题排查 #

1. 按钮默认行为触发页面跳转：如果“重发激活码”按钮是表单内的提交按钮（<button>默认type为submit，或<input type="submit">），点击会触发表单提交，导致页面刷新跳转，直接中断reCAPTCHA的execute调用流程，这是“莫名跳转到首页”的关键原因。
2. 订阅管理冗余易出错：validateBot方法中手动创建Observable并管理singleExecutionSubscription的方式，容易导致订阅未正确绑定或释放，进而引发二次调用无响应。

修复步骤 #

1. 阻止按钮默认提交行为 #

在触发validateBot的按钮点击事件中添加默认行为阻止：

<!-- 模板中的按钮 -->
<button (click)="handleResend($event)">重发激活码</button>

// 组件中的处理方法
handleResend(event: Event): void {
  event.preventDefault(); // 阻止默认表单提交行为
  this.recaptchaComponent.validateBot().subscribe(
    token => {
      // 调用后端重发接口，携带token
    },
    error => {
      // 错误处理逻辑
    }
  );
}

2. 简化验证码订阅逻辑 #

重构validateBot方法，移除冗余的自定义Observable，直接返回reCAPTCHA的执行Observable，同时用takeUntil实现组件销毁时自动取消订阅：

import { Subject, takeUntil } from 'rxjs';

export class RecaptchaComponent implements OnInit, OnDestroy {
  public readonly executionLog: Array<OnExecuteData | OnExecuteErrorData> = [];

  private destroy$ = new Subject<void>();
  private allExecutionsSubscription: Subscription;
  private allExecutionErrorsSubscription: Subscription;

  constructor(private recaptchaV3Service: ReCaptchaV3Service) { }

  ngOnInit(): void {
    this.allExecutionsSubscription = this.recaptchaV3Service.onExecute.subscribe(
      (data) => this.executionLog.push(data)
    );
    this.allExecutionErrorsSubscription = this.recaptchaV3Service.onExecuteError.subscribe(
      (data) => this.executionLog.push(data)
    );
  }

  public validateBot(): Observable<string> {
    // 直接返回execute的Observable，无需手动包裹
    return this.recaptchaV3Service.execute("validate").pipe(
      takeUntil(this.destroy$)
    );
  }

  public ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
    
    this.allExecutionsSubscription?.unsubscribe();
    this.allExecutionErrorsSubscription?.unsubscribe();
  }
}

3. 额外检查点 #

• 确认reCAPTCHA v3的siteKey配置正确，且当前域名已在Google后台的reCAPTCHA管理页面添加。
• 检查浏览器控制台是否存在reCAPTCHA相关隐性警告（如调用频率限制），这类警告可能不会抛出明确错误但会阻断执行。

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