React非生产环境自动化测试：如何绕过Firebase电话验证的reCAPTCHA

核心思路 #

Firebase官方提供了测试环境专用的TestPhoneAuthProvider，可直接替代reCAPTCHA完成验证流程，无需前端渲染reCAPTCHA组件。只需根据运行环境（生产/测试）切换对应的验证器即可。

代码修改步骤 #

1. 环境判断逻辑

先通过环境变量区分当前运行环境：

const isTestEnvironment = process.env.NODE_ENV === 'test' || process.env.REACT_APP_TEST_MODE === 'true';

2. 重构Firebase类的认证方法

修改Firebase类，根据环境选择验证器：

import { getAuth, signInWithPhoneNumber, RecaptchaVerifier, TestPhoneAuthProvider } from "firebase/auth";

class Firebase {
  constructor() {
    const app = initializeApp(firebaseConfig);
    this.auth = getAuth(app); // 修正命名，避免和getAuth方法混淆
  }

  login(phoneNumber) {
    let appVerifier;
    if (isTestEnvironment) {
      // 测试环境：使用TestPhoneAuthProvider绕过reCAPTCHA
      appVerifier = new TestPhoneAuthProvider(this.auth);
    } else {
      // 生产环境：使用正常的reCAPTCHA验证器
      appVerifier = new RecaptchaVerifier("recaptcha-container", {
        size: "invisible",
      }, this.auth);
    }
    return signInWithPhoneNumber(this.auth, phoneNumber, appVerifier);
  }
}

3. 调整登录组件逻辑

移除全局挂载的reCAPTCHA实例，改用Firebase类封装的逻辑：

// 登录按钮点击事件（获取OTP前）
const login = async () => {
  try {
    const confirmationResult = await firebase.login("+91" + phoneNumber);
    setCaptchaVerifier(confirmationResult);
  } catch (error) {
    console.error(error);
  }
};

4. 测试环境OTP验证

测试环境可直接使用Firebase预设的测试号码和OTP（比如+16505550101对应OTP123456），验证逻辑保持不变：

// OTP验证逻辑
const verifyCode = () => {
  if (!isValidVerificationCode()) {
    setShowInvalidVerificationCode("show");
    return;
  }

  captchaVerifier
    .confirm(code)
    .catch(function (error) {
      console.error(error);
    });
};

5. 清理全局变量

删除之前直接挂载到window的recaptchaVerifier初始化代码，避免全局变量污染。

注意事项 #

• 确保测试环境的环境变量配置正确，禁止在生产环境启用测试模式
• 测试号码和OTP可参考Firebase官方预设值，也能在Firebase控制台自定义
• 自动化测试时，直接调用登录接口并传入预设测试OTP即可完成认证

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