React Native Google Sign-In 项目教程

2024-09-14 11:07:06作者：舒璇辛Bertina

1. 项目介绍

react-native-google-signin 是一个用于在 React Native 应用中集成 Google 登录功能的库。它允许开发者轻松地将 Google 登录功能添加到他们的移动应用中，从而使用户能够使用他们的 Google 账户进行身份验证。

该库支持 Android 和 iOS 平台，并且提供了丰富的 API 来处理用户登录、获取用户信息、处理令牌等操作。通过使用这个库，开发者可以快速实现 Google 登录功能，而无需从头开始编写复杂的身份验证逻辑。

2. 项目快速启动

安装依赖

首先，确保你已经安装了 react-native-google-signin 库。你可以通过 npm 或 yarn 来安装：

npm install @react-native-google-signin/google-signin

或者

yarn add @react-native-google-signin/google-signin

配置 Android

在 android/app/src/main/res/values/strings.xml 中添加你的 Google 客户端 ID：
```
<string name="server_client_id">YOUR_SERVER_CLIENT_ID</string>
```

在 android/app/src/main/AndroidManifest.xml 中添加以下内容：

<meta-data
    android:name="com.google.android.gms.version"
    android:value="@integer/google_play_services_version" />

配置 iOS

在 ios/Podfile 中添加以下内容：
```
pod 'GoogleSignIn'
```
运行 pod install：
```
cd ios && pod install
```

初始化 Google Sign-In

在你的 React Native 应用中初始化 Google Sign-In：

import { GoogleSignin, GoogleSigninButton } from '@react-native-google-signin/google-signin';

GoogleSignin.configure({
  webClientId: 'YOUR_WEB_CLIENT_ID', // 从 Google Developer Console 获取
  offlineAccess: true, // 如果需要离线访问
});

const signIn = async () => {
  try {
    await GoogleSignin.hasPlayServices();
    const userInfo = await GoogleSignin.signIn();
    console.log(userInfo);
  } catch (error) {
    console.error(error);
  }
};

const App = () => {
  return (
    <View>
      <GoogleSigninButton
        style={{ width: 192, height: 48 }}
        size={GoogleSigninButton.Size.Wide}
        color={GoogleSigninButton.Color.Dark}
        onPress={signIn}
      />
    </View>
  );
};

export default App;