如何在使用Firebase的React Native应用中避免认证时显示reCAPTCHA WebView

要去掉手机号认证时的reCAPTCHA WebView弹窗，核心是利用Firebase Auth的隐形验证机制，结合App Check加固，以下是具体实现步骤：

1. 准备工作 #

• 确保项目已集成@react-native-firebase/auth依赖，未安装的话执行：

  npm install @react-native-firebase/auth
  # 或 yarn
  yarn add @react-native-firebase/auth
  

• 配置Firebase控制台：
  • 进入Authentication > Sign-in method，启用Phone登录方式。
  • 打开App Check模块，启用reCAPTCHA v3（隐形验证），分别为Android和iOS应用配置对应密钥：
    • Android：需将应用的SHA-1指纹添加到Firebase项目设置。
    • iOS：需获取Reversed Client ID用于后续配置。

2. 代码实现隐形验证 #

初始化核心实例 #

先导入并获取Auth和App Check实例：

import auth from '@react-native-firebase/auth';
import appCheck from '@react-native-firebase/app-check';

激活App Check（推荐） #

通过App Check完成隐形reCAPTCHA验证，避免WebView弹出：

// 在App初始化时调用
appCheck().activate(
  '你的Android reCAPTCHA v3站点密钥',
  '你的iOS reCAPTCHA v3站点密钥',
);

手机号认证流程实现 #

关键是调用verifyPhoneNumber时禁用强制WebView验证：

// 请求验证码（无WebView弹窗）
const requestVerifyCode = async (phoneNumber) => {
  try {
    // 确保App Check已完成验证
    await appCheck().getToken();
    
    // 获取验证ID，禁用强制WebView
    const verificationId = await auth().verifyPhoneNumber(phoneNumber, {
      forceCodeForRecaptcha: false,
    });
    
    // 保存verificationId，用于后续验证码校验
    setVerificationId(verificationId);
  } catch (error) {
    console.error('验证请求失败:', error);
  }
};

// 校验验证码完成登录
const confirmVerifyCode = async (code) => {
  try {
    const credential = auth.PhoneAuthProvider.credential(verificationId, code);
    await auth().signInWithCredential(credential);
    // 登录成功后的逻辑，比如跳转首页
  } catch (error) {
    console.error('验证码校验失败:', error);
  }
};

3. 平台专属配置 #

• Android：
  1. 通过./gradlew signingReport命令获取SHA-1、SHA-256指纹，添加到Firebase项目设置。
  2. 确保AndroidManifest.xml已添加网络权限：

     <uses-permission android:name="android.permission.INTERNET" />
     

• iOS：
  1. 在Info.plist中添加Reversed Client ID：

     <key>CFBundleURLTypes</key>
     <array>
       <dict>
         <key>CFBundleURLSchemes</key>
         <array>
           <string>你的Reversed Client ID</string>
         </array>
       </dict>
     </array>
     

  2. 确保App Transport Security（ATS）允许HTTPS请求（默认已启用）。

常见问题排查 #

如果仍弹出WebView，检查：

• App Check的密钥是否与平台匹配，是否正确激活。
• 设备网络是否正常，隐形reCAPTCHA需要联网验证。
• Firebase Auth的Phone登录方式是否正确配置了对应应用信息。

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