在React Native中使用Firebase的谷歌OAuth

OAuth是一种开放的访问授权标准，通常作为互联网用户授予网站或应用程序访问其他网站信息的一种方式，而无需给他们密码。

在本教程中，我们将学习如何在非Expo React Native应用程序中使用Firebase中的认证模块来验证用户的谷歌账户。

前提条件

在本教程中，我们将不涉及React和React Native的基础知识。

开发环境

重要的是- 我们不会在我们的项目中使用Expo。

确保你遵循的是React Native CLI Quickstart，而不是Expo CLI Quickstart。

设置开发环境

克隆启动代码

请按照该仓库的README ，了解相关说明。

仓库的文件夹结构。

文件夹结构

我在screens/ 目录中设置了2个屏幕。

1. Authentication.js:带有谷歌登录按钮的屏幕，以启动登录过程。

2. Authenticated.js:用户只有在登录的情况下才能看到这个屏幕。

屏幕 - 签到和签出

设置Firebase项目

前往Firebase控制台，登录到你的账户，然后创建一个新的项目。

Firebase主屏幕

在你创建了一个新的项目之后，你会看到仪表板。

Firebase仪表盘

点击Android图标，在你的Firebase项目中添加一个Android应用。

将Firebase添加到你的Android应用中

你需要应用程序的包名来注册该应用程序。

你可以在AndroidManifest.xml 文件中找到包的名字，该文件位于android/app/src/main/ 。

AndroidManifest.xml中的包名

你还需要Debug signing certificate SHA-1 。你可以通过在项目目录下运行以下命令得到。

cd android && ./gradlew signingReport

这将生成应用程序的签名证书。

你将得到一个类似于这样的输出。

Task :app:signingReport
Variant: debugUnitTest
Config: debug
Store: C:\Users\Mohan\.android\debug.keystore
Alias: AndroidDebugKey
MD5: 5F:BB:9E:98:5E:E7:E6:29:19:28:61:4F:42:B9:74:AB
SHA1: 9E:61:75:0E:5C:F4:EB:B4:EB:9D:B3:13:5F:50:D6:AB:2E:4E:12:0D
SHA-256: 6C:BB:49:66:18:B9:7F:74:49:B5:56:D0:24:43:6A:1B:41:91:97:A3:2E:7C:4A:6E:59:40:8F:5C:74:6F:CC:93
Valid until: Friday, December 23, 2050

确保你是从Task :app:signingReport ，而不是从任何其他Task ，复制SHA1 。

复制SHA1 的值并将其粘贴到Firebase控制台。

现在，进行到下一步，你将不得不下载google-services.json 文件。你应该把这个文件放在android/app 目录中。

这个文件包含的配置将使你的应用程序能够访问Firebase服务。

配置文件 - google-services.json

添加完该文件后，继续下一步。它将要求你在build.gradle 文件中添加一些配置。

首先，在你的android/build.gradle 文件中把google-services 插件作为一个依赖项加入。

buildscript {
  dependencies {
    // ... other dependencies
    classpath 'com.google.gms:google-services:4.3.3'
  }
}

然后，通过在你的android/app/build.gradle 文件中添加以下内容来执行该插件。

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'

你需要执行一些额外的步骤，为iOS 配置Firebase 。

最后，我们应该在我们的应用程序中安装@react-native-firebase/app 包以完成Firebase的设置。

npm install @react-native-firebase/app

设置Firebase认证

前往仪表板上的Authentication 部分，点击Get Started 按钮。这将在你的项目中启用认证模块。

启用Firebase认证

接下来，你应该在签到方式中启用电话认证。一旦你启用了它，按Save 。

启用谷歌签到的认证

现在，让我们前往应用程序，安装auth模块。

让我们在我们的应用程序中安装@react-native-firebase/auth 包。

npm install @react-native-firebase/auth

让我们使用Firebase Android BoM在android/app/build.gradle 文件中声明认证模块的依赖性。

dependencies {
    // Add these lines
    implementation platform('com.google.firebase:firebase-bom:26.3.0')
    implementation 'com.google.firebase:firebase-auth'
}

这样，Firebase认证模块就在我们的应用程序中设置好了。

签到

该 google-signin库是谷歌官方登录库的一个封装器。

我们应该使用这个库来创建一个凭证，然后用Firebase登录。

首先，我们必须使用你的webClientId 来初始化Google SDK，这可以在google-services.json 文件中找到android/app ，作为client/oauth_client/client_id 的属性。

OAuth客户端ID

在App.js ，让我们导入google-signin 库和Firebase的auth 模块。

import auth from '@react-native-firebase/auth';
import { GoogleSignin } from '@react-native-community/google-signin';

你应该用webClientId ，调用GoogleSignin.configure 方法来初始化SDK。你应该在App() 函数之外做这件事。

GoogleSignin.configure({
  webClientId:
    '260759292128-4h94uja4bu3ad9ci5qqagubi6k1m0jfv.apps.googleusercontent.com',
});

现在，我们已经初始化了Google SDK，让我们开始验证用户的身份。

在启动代码中，我在App.js 文件中设置了一个名为onGoogleButtonPress 的函数。这个函数作为一个prop ，被传递到Authentication ，然后，它被设置为谷歌登录按钮的onPress 属性。

因此，当用户按下谷歌登录按钮时，App.js 文件中的这个函数将被调用。

让我们在onGoogleButtonPress 函数中写出登录用户的代码。

async function onGoogleButtonPress() {
  // Sign-in Process here
}

首先，我们应该使用GoogleSignin.signIn() 方法从谷歌获得用户的idToken 。这是一个异步函数，所以让我们使用await 关键字来等待承诺得到解决。

// Get the users ID token
const { idToken } = await GoogleSignin.signIn();

现在，我们应该使用idToken 来创建一个Google凭证。

const googleCredential = auth.GoogleAuthProvider.credential(idToken);

有了我们为用户创建的Google证书，我们应该使用Firebase auth模块中的signInWithCredential 方法来签入用户到应用程序中。

return auth().signInWithCredential(googleCredential);

这就是onGoogleButtonPress 函数的完整代码。

async function onGoogleButtonPress() {
  const { idToken } = await GoogleSignin.signIn();
  const googleCredential = auth.GoogleAuthProvider.credential(idToken);
  return auth().signInWithCredential(googleCredential);
}

显示已认证的屏幕

每当用户的认证状态在应用程序中发生变化时，onAuthStateChanged 事件就会被触发。

你可以为这个监听器设置一个事件处理程序。这个处理程序将接收user 对象。如果user 对象是null ，这意味着用户被签出，否则，他们被签入。

你可以在应用程序的任何地方使用auth().currentUser 来访问当前已认证用户的详细信息。用户对象将包含从Google复制到Firebase的displayName 、email 、photoURL 。

让我们创建一个状态来跟踪用户是否被认证。我们应该把默认值设置为false 。

const [authenticated, setAutheticated] = useState(false);

如果user 对象在onAuthStateChanged 处理程序中不是null ，让我们将authenticated 状态设置为true 。

auth().onAuthStateChanged((user) => {
  if(user) {
    setAutheticated(true);
  }
})

如果用户通过了认证，我们应该显示Authenticated 屏幕组件。

if (authenticated) {
  return <Authenticated />;
}

return <Authentication onGoogleButtonPress={onGoogleButtonPress} />;

我在Authenticated 屏幕中使用auth().currentUser 来显示电子邮件地址、姓名和用户的个人资料图片。

const user = auth().currentUser;
return (
  <View style={styles.screen}>
    <Text style={styles.title}>You're Logged In</Text>
    <Image source={{ uri: user?.photoURL }} style={styles.image} />
    <Text style={styles.text}>{user?.displayName}</Text>
    <Text style={styles.text}>{user?.email}</Text>
    <View style={{ marginTop: 30 }}>
      <Button title="Signout" onPress={() => auth().signOut()} />
    </View>
  </View>
);

谷歌认证 - 登录

签出

我们应该使用auth模块中的signOut 方法，将用户从应用程序中签出。

让我们在Authenticated.js中导入auth 模块。

import auth from '@react-native-firebase/auth';

让我们在用户按下签出按钮时调用signOut 方法。

<Button title="Signout" onPress={() => auth().signOut()} />

现在，当用户按下按钮时，auth模块将从应用程序中签出用户。这将触发onAuthStateChanged 侦听器。处理程序将收到null ，而不是user 对象。

因此，如果我们收到null ，我们应该将认证状态设置为false 。

auth().onAuthStateChanged((user) => {
  if(user) {
    setAuthenticated(true);
  } else {
    setAuthenticated(false);
  }
})

谷歌认证 - 签出

让我们回顾一下

1. 我们建立了我们的开发环境并创建了一个React Native应用。

2. 我们克隆了启动代码。

3. 我们创建了一个Firebase项目并在项目中启用了谷歌认证。

4. 我们安装了所需的软件包，并在build.gradle 文件中添加了依赖项。

5. 我们配置了谷歌SDK，并在用户按下谷歌登录按钮时签入用户。

6. 我们创建了一个状态来跟踪用户的认证状态，并使用onAuthStateChanged 处理程序来更新该状态。

7. 当用户被认证后，我们显示了Authenticated 的屏幕。

8. 我们使用auth 模块在Authenticated 屏幕上将用户从应用程序中签出。