React Native 使用 react-native-credentials-manager 接入谷歌登录教程

1. 安装依赖

首先，安装 react-native-credentials-manager 库：

# 使用 npm
npm install react-native-credentials-manager# 或使用 yarn
yarn add react-native-credentials-manager# 或使用 pnpm
pnpm add react-native-credentials-manager

2. 配置 Google API 凭证

要实现谷歌登录，你需要在 Google Cloud Console 中创建并配置应用凭证：

1. 访问 Google Cloud Console
2. 创建新项目或选择现有项目
3. 导航至 API 和服务 > 凭据
4. 点击 创建凭据 > OAuth 客户端 ID
5. 对于 Android，选择 Android 类型并填写以下信息：
   • 应用名称
   • 包名（与你的 app.json 或 AndroidManifest.xml 中的一致）
   • SHA-1 证书指纹（生产环境必须使用发布密钥）
6. 对于 Web 客户端（用于 Android 登录验证），选择 Web 应用 类型
7. 创建成功后，记录下 Web 客户端 ID，这将在代码中使用

3. 实现登录功能

创建一个登录组件并实现平台特定的登录逻辑：

import React from 'react';
import { Platform, StyleSheet, TouchableOpacity, Text, View } from 'react-native';
import { signUpWithGoogle, signUpWithApple } from 'react-native-credentials-manager';
import { FontAwesome } from '@expo/vector-icons';// 你的 Web 客户端 ID
const WEB_CLIENT_ID = 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com';const LoginScreen = () => {// 平台特定的登录函数async function platformSpecificSignUp() {try {if (Platform.OS === 'android') {// Android: Google Sign-Inconst googleCredential = await signUpWithGoogle({serverClientId: WEB_CLIENT_ID,nonce: 'OPTIONAL_NONCE_FOR_SECURITY', // 可选的安全随机数autoSelectEnabled: true, // 自动选择已登录账号filterByAuthorizedAccounts: false, // 显示所有账号});// 处理登录成功后的逻辑console.log('Google 登录成功:', googleCredential);// 提取用户信息const userInfo = {type: 'google',token: googleCredential.idToken,id: googleCredential.id,user: {name: googleCredential.displayName,givenName: googleCredential.givenName,familyName: googleCredential.familyName,photo: googleCredential.profilePicture,},};// 这里可以将用户信息发送到你的服务器进行验证和登录return userInfo;} else if (Platform.OS === 'ios') {// iOS: Apple Sign Inconst appleCredential = await signUpWithApple({nonce: 'OPTIONAL_NONCE_FOR_SECURITY',requestedScopes: ['fullName', 'email'],});// 处理登录成功后的逻辑console.log('Apple 登录成功:', appleCredential);// 提取用户信息const userInfo = {type: 'apple',token: appleCredential.idToken,id: appleCredential.id,user: {name: appleCredential.displayName,givenName: appleCredential.givenName,familyName: appleCredential.familyName,email: appleCredential.email,},};// 这里可以将用户信息发送到你的服务器进行验证和登录return userInfo;}} catch (error) {console.error('登录失败:', error);// 这里可以显示错误提示给用户}}// 处理谷歌登录const handleGoogleLogin = async () => {if (Platform.OS === 'android') {await platformSpecificSignUp();} else {console.log('Google 登录仅在 Android 上可用');}};// 处理苹果登录const handleAppleLogin = async () => {if (Platform.OS === 'ios') {await platformSpecificSignUp();} else {console.log('Apple 登录仅在 iOS 上可用');}};return (<View style={styles.container}><View style={styles.buttonContainer}>{/* Android 显示谷歌登录按钮 */}{Platform.OS === 'android' && (<TouchableOpacitystyle={styles.authButton}onPress={handleGoogleLogin}activeOpacity={0.8}><View style={styles.buttonContent}><FontAwesome name="google" size={18} color="white" /><Text style={styles.buttonText}>Continue with Google</Text></View></TouchableOpacity>)}{/* iOS 显示苹果登录按钮 */}{Platform.OS === 'ios' && (<TouchableOpacitystyle={styles.authButton}onPress={handleAppleLogin}activeOpacity={0.8}><View style={styles.buttonContent}><FontAwesome name="apple" size={18} color="white" /><Text style={styles.buttonText}>Continue with Apple</Text></View></TouchableOpacity>)}</View></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',padding: 20,},buttonContainer: {width: '100%',maxWidth: 400,},authButton: {backgroundColor: '#007AFF',borderRadius: 10,paddingVertical: 15,marginBottom: 15,alignItems: 'center',},buttonContent: {flexDirection: 'row',alignItems: 'center',},buttonText: {color: 'white',fontSize: 16,fontWeight: '600',marginLeft: 10,},
});export default LoginScreen;

4. 处理常见问题

问题 1: Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'XXXX' could not be found.

解决方案：

1. 确保所有依赖已正确安装
2. 使用 expo install --fix 修复依赖版本问题
3. 对于开发环境，使用以下命令打包开发版本：

# 使用 Expo 构建开发版本
eas build --profile development --platform android

4. 将构建好的 APK 安装到实际的 Android 设备上进行测试，模拟器可能无法正确加载原生模块

问题 2: 谷歌登录失败，提示客户端 ID 不匹配

解决方案：

1. 确保使用的是 Web 客户端 ID，而不是 Android 客户端 ID
2. 检查 SHA-1 证书指纹是否正确配置（开发环境使用调试密钥，生产环境使用发布密钥）
3. 确保在 Google Cloud Console 中启用了 Google Sign-In API

问题 3: Expo 开发模式下无法使用

解决方案：
react-native-credentials-manager 包含原生代码，因此需要使用 expo-dev-client 或打包开发版本。

# 安装 expo-dev-client
npx expo install expo-dev-client# 然后构建开发客户端
npx expo install --fix --  --legacy-peer-deps && npx expo install react-native-web react-dom @expo/metro-runtime
npx expo export --platform web

5. 生产环境配置

Android 生产环境配置

1. 生成发布密钥的 SHA-1 指纹：

keytool -list -v -keystore your-release-key.keystore

2. 在 Google Cloud Console 中更新你的 OAuth 客户端配置，添加发布密钥的 SHA-1 指纹

3. 构建生产版本：

eas build --profile preview --platform android

iOS 生产环境配置

1. 在 Apple Developer Portal 中配置 App ID 和 Sign In with Apple 功能
2. 更新 Xcode 项目配置
3. 构建生产版本

6. 总结

通过 react-native-credentials-manager 库，我们可以轻松实现在 React Native 应用中的谷歌登录（Android）和苹果登录（iOS）功能。主要步骤包括：

1. 安装依赖
2. 配置 Google API 和 Apple Developer 凭证
3. 实现平台特定的登录逻辑
4. 处理可能遇到的原生模块加载问题
5. 为生产环境正确配置凭证

使用这种方式，你可以为不同平台提供原生的登录体验，同时保持代码的统一性和可维护性。