如何在控制台调用Angular项目中ng-recaptcha的回调函数？

• ___grecaptcha_cfg.clients 路径下的两层属性（示例代码里写的两个X）是reCAPTCHA渲染时随机生成的键名，并非固定值，页面刷新、组件重绘后路径都会变化，硬编码写死路径大概率拿到过期闭包或者空引用。
• ng-recaptcha 封装的回调默认运行在Angular NgZone上下文中，直接在控制台全局作用域、Selenium execute_script() 的沙箱环境里调用，会脱离Zone的变更检测跟踪，就算函数本身执行了，Angular组件也收不到返回的验证码token，表现为回调无响应。
• Invisible reCAPTCHA 的回调要求必须传入字符串格式的token作为入参，空参调用会被ng-recaptcha的内部参数校验直接拦截，不会执行后续业务逻辑。

方案1：控制台调试/Selenium自动化场景（无需修改前端代码） #

不要硬编码属性路径，先遍历查找当前激活的reCAPTCHA实例，再在对应的Angular Zone上下文中触发回调，代码可以直接放到execute_script()中执行：

function getActiveRecaptchaNode() {
  const clients = window.___grecaptcha_cfg.clients;
  for (const clientKey of Object.keys(clients)) {
    const client = clients[clientKey];
    for (const k1 of Object.keys(client)) {
      const level1 = client[k1];
      if (!level1 || typeof level1 !== 'object') continue;
      for (const k2 of Object.keys(level1)) {
        const node = level1[k2];
        if (node && typeof node.callback === 'function' && node.sitekey) {
          return node;
        }
      }
    }
  }
  return null;
}

const activeNode = getActiveRecaptchaNode();
if (activeNode) {
  let ngZone = null;
  const rootEls = window.getAllAngularRootElements?.();
  if (rootEls?.[0]) {
    const injector = rootEls[0].getInjector?.();
    ngZone = injector?.get?.(window.ng.coreTokens.NgZone);
  }
  // 本地调试可传模拟token，真实自动化场景需替换为合法返回值
  const testToken = Array(40).fill(0).map(() => Math.random().toString(36).slice(2,3)).join('');
  const runCb = () => activeNode.callback(testToken);
  ngZone ? ngZone.run(runCb) : runCb();
}

方案2：可修改前端代码场景（官方推荐用法） #

如果是自己维护的Angular项目，不要直接调用reCAPTCHA的内部私有回调，通过模板引用获取ng-recaptcha组件实例，调用官方暴露的execute()方法即可，会自动走Angular上下文，不存在触发失败问题：

<!-- 组件模板 -->
<re-captcha2
  #captchaRef="reCaptcha"
  size="invisible"
  siteKey="你的站点公钥"
  (resolved)="onCaptchaResolved($event)"
></re-captcha2>

// 组件逻辑文件
import { ViewChild } from '@angular/core';
import { RecaptchaComponent } from 'ng-recaptcha';

export class YourComponent {
  @ViewChild('captchaRef') captchaRef!: RecaptchaComponent;

  triggerCaptcha() {
    // 需要触发验证码时直接调用即可
    this.captchaRef.execute();
  }

  onCaptchaResolved(token: string) {
    // 处理验证码返回逻辑
  }
}

方案3：本地快速调试场景 #

Angular Ivy渲染模式下（Angular 9+默认开启），可以直接通过DOM节点获取验证码组件实例，手动触发resolved事件，比找内部回调路径更稳定：

// 找到验证码组件对应的DOM节点
const captchaDom = document.querySelector('re-captcha2, [ng-reflect-size="invisible"]');
if (captchaDom && window.ng) {
  const captchaComp = window.ng.getComponent(captchaDom);
  // 传入测试token触发绑定的resolved事件
  captchaComp.resolved.emit('debug-test-token');
  // 触发变更检测更新视图
  window.ng.applyChanges(captchaDom);
}

• 模拟生成的token仅能用于本地调试流程验证，无法通过后端的reCAPTCHA合法性校验，生产环境自动化流程仍需完成真实验证码交互。
• 页面存在多个reCAPTCHA实例时，遍历查找节点的逻辑需要补充对应sitekey、容器id的匹配规则，避免触发错误实例的回调。

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