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

_pengliang2025-10-27 11:04

1. 安装依赖

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

bash 复制代码 
# 使用 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. 实现登录功能

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

tsx 复制代码 
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-In
        const 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 In
        const 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' && (
          <TouchableOpacity
            style={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' && (
          <TouchableOpacity
            style={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. 对于开发环境，使用以下命令打包开发版本：
bash 复制代码 
# 使用 Expo 构建开发版本
eas build --profile development --platform android
  1. 将构建好的 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 或打包开发版本。

bash 复制代码 
# 安装 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 指纹：
bash 复制代码 
keytool -list -v -keystore your-release-key.keystore

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

  2. 构建生产版本：

bash 复制代码 
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. 为生产环境正确配置凭证

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

相关推荐
专注前端30年2 分钟前
在日常开发项目中Vue与React应该如何选择？
前端·vue.js·react.js
馬致远31 分钟前
Vue todoList案例 优化之本地存储
前端·javascript·vue.js
请叫我聪明鸭32 分钟前
CSS实现单行、多行文本超长显示 / 不超长隐藏、悬浮窗超长展示/不超长隐藏、悬浮窗手动控制样式
前端·javascript·css
风无雨35 分钟前
在 React 中实现数学公式显示：使用 KaTeX 和 react-katex
前端·react.js·前端框架
zfj32139 分钟前
vscode是js开发的，为什么能支持golang java等各种语言开发
javascript·vscode·golang
GDAL1 小时前
Mapbox GL JS 核心表达式：`==` 相等判断完全教程
javascript·mapbox
炸土豆1 小时前
防抖节流里的this传递
前端·javascript
林希_Rachel_傻希希1 小时前
手写Promise--教学版本
前端·javascript·面试
ETA81 小时前
`console.log([1,2,3].map(parseInt))` 深入理解 JavaScript 中的高阶函数与类型机制
前端·javascript
Java编程爱好者2 小时前
JUnit 5 中的 @ClassTemplate 实战指南
javascript
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03Linux下V2Ray安装配置指南04Open-AutoGLM Windows 安装部署教程05【AutoGLM部署】本地私有化部署AI手机Agent06在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）07Cursor 又偷偷更新，这个功能太实用：Visual Editor for Cursor Browser08BongoCat - 跨平台键盘猫动画工具09安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）10Labelme从安装到标注：零基础完整指南