Expo SDK48电话认证无expo-firebase-recaptcha模块，求替代方案

由于expo-firebase-recaptcha在Expo SDK48中已不再被支持，推荐以下几种替代方案：

1. 使用Firebase Auth原生的RecaptchaVerifier（隐形验证） #

这是官方推荐的替代方式，无需额外Expo模块，直接通过Firebase Auth SDK实现reCAPTCHA验证：

步骤与代码示例： #

• 首先在页面中添加一个隐藏的DOM容器（Firebase需要挂载reCAPTCHA脚本）：

<div id="recaptcha-container" style="display: none;"></div>

• 在React组件中初始化RecaptchaVerifier并发起电话认证：

import { getAuth, signInWithPhoneNumber, RecaptchaVerifier } from "firebase/auth";
import { useEffect, useState } from "react";

export default function PhoneAuthScreen() {
  const [phoneNumber, setPhoneNumber] = useState("");
  const auth = getAuth();

  useEffect(() => {
    // 初始化RecaptchaVerifier
    const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
      size: 'invisible',
      callback: () => {
        // reCAPTCHA验证成功回调
      },
      'expired-callback': () => {
        // 验证过期，可重新触发验证
      }
    }, auth);

    return () => {
      // 组件卸载时清理验证器
      recaptchaVerifier.clear();
    };
  }, [auth]);

  const handlePhoneAuth = async () => {
    try {
      const appVerifier = document.getElementById('recaptcha-container')?.parentNode;
      if (!appVerifier) throw new Error("Recaptcha container not found");

      const confirmationResult = await signInWithPhoneNumber(auth, phoneNumber, appVerifier);
      // 保存confirmationResult，用于后续输入验证码验证
      window.confirmationResult = confirmationResult;
      // 跳转到验证码输入界面或显示输入框
    } catch (error) {
      console.error("Phone auth initiation failed:", error);
      // 处理错误，比如reCAPTCHA验证失败、号码格式错误等
    }
  };

  return (
    <div>
      <input
        type="tel"
        value={phoneNumber}
        onChange={(e) => setPhoneNumber(e.target.value)}
        placeholder="输入手机号"
      />
      <button onClick={handlePhoneAuth}>发送验证码</button>
      <div id="recaptcha-container" style={{ display: 'none' }}></div>
    </div>
  );
}

关键注意事项： #

• 确保你的Firebase项目控制台中已添加当前应用的域名到授权域（Authentication > 设置 > 授权域）
• 使用size: 'invisible'可以避免显示reCAPTCHA UI，适合移动端体验
• 需保证Firebase Auth SDK版本与Expo SDK48兼容，建议使用firebase@9.x系列版本

2. 自定义reCAPTCHA验证（可选） #

如果需要更灵活的控制，可以直接集成Google reCAPTCHA V2/V3，将验证token传递给Firebase Auth：

• 集成Google reCAPTCHA获取验证token
• 在调用signInWithPhoneNumber时，将token包装为自定义AppVerifier实现传递给Firebase

不过这种方式需要额外处理reCAPTCHA的集成逻辑，官方的RecaptchaVerifier已经足够满足大部分场景，优先推荐第一种方案。

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