React Native集成Firebase OTP登录遇auth/missing-client-identifier错误求助

错误原因 #

该错误是Firebase Auth无法验证客户端身份导致，核心是Play Integrity校验或reCAPTCHA校验未通过，通常和项目配置、依赖设置或测试环境有关。

解决步骤 #

1. 核对Android端Firebase配置 #

• 确认google-services.json文件已正确放置在android/app目录下，且文件中的包名与Firebase控制台注册的应用包名完全一致
• 检查项目级build.gradle（android/build.gradle）是否添加了Firebase插件依赖：

  buildscript {
    dependencies {
      classpath 'com.google.gms:google-services:4.3.15' // 确保版本兼容
    }
  }
  

• 检查应用级build.gradle（android/app/build.gradle）是否应用了插件并引入Firebase BOM：

  apply plugin: 'com.google.gms.google-services'
  
  dependencies {
    implementation platform('com.google.firebase:firebase-bom:32.7.0') // 使用BOM统一版本
    implementation 'com.google.firebase:firebase-auth'
  }
  

2. 配置Firebase Auth的电话号码登录及校验服务 #

• 登录Firebase控制台，进入目标项目的Authentication > 登录方法，确保电话号码登录方式已启用
• 进入Authentication > 设置 > 高级，确认使用Play Integrity保护选项已开启（仅Android设备）
• 检查reCAPTCHA配置：在Firebase控制台的项目设置 > 应用标签下，确认已生成reCAPTCHA站点密钥，且该密钥已关联到当前应用

3. 确保测试环境符合要求 #

• 使用安装了最新版Google Play服务的真实Android设备测试，避免使用无Google Play服务的模拟器（仅带Google Play的模拟器可尝试）
• 确保设备网络正常，能够访问Google相关服务

4. 统一Firebase依赖版本 #

• 检查@react-native-firebase/auth与其他Firebase依赖（如@react-native-firebase/app）的版本是否一致，避免版本冲突
• 可通过npm list @react-native-firebase/auth查看当前版本，必要时更新到最新兼容版本

修正你的登录页面代码 #

你的代码缺少verificationId的状态定义，且未实现OTP验证逻辑，以下是修复后的完整代码：

import React, { useState } from 'react';
import { View, Text, TextInput, Button } from 'react-native';
import auth from '@react-native-firebase/auth';

const OTPLoginScreen = () => {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [verificationId, setVerificationId] = useState(null);
  const [otpCode, setOtpCode] = useState('');

  const sendOtp = async () => {
    try {
      const confirmation = await auth().signInWithPhoneNumber('+91' + phoneNumber);
      setVerificationId(confirmation.verificationId);
    } catch (error) {
      console.error('发送OTP失败:', error);
    }
  };

  const verifyOtp = async () => {
    try {
      const credential = auth.PhoneAuthProvider.credential(verificationId, otpCode);
      await auth().signInWithCredential(credential);
      // 登录成功逻辑：如跳转首页、存储用户信息等
      console.log('登录成功');
    } catch (error) {
      console.error('验证OTP失败:', error);
    }
  };

  return (
    <View style={{ padding: 20, gap: 15, marginTop: 50 }}>
      {!verificationId ? (
        <>
          <Text>输入你的手机号:</Text>
          <TextInput
            placeholder="手机号"
            value={phoneNumber}
            onChangeText={setPhoneNumber}
            keyboardType="phone-pad"
            style={{ borderWidth: 1, padding: 10, borderRadius: 5 }}
          />
          <Button title="发送OTP" onPress={sendOtp} />
        </>
      ) : (
        <>
          <Text>输入OTP验证码:</Text>
          <TextInput
            placeholder="6位验证码"
            value={otpCode}
            onChangeText={setOtpCode}
            keyboardType="number-pad"
            maxLength={6}
            style={{ borderWidth: 1, padding: 10, borderRadius: 5 }}
          />
          <Button title="验证OTP" onPress={verifyOtp} />
        </>
      )}
    </View>
  );
};

export default OTPLoginScreen;

内容的提问来源于stack exchange，提问作者Gohel Meet