在React Native中使用Firebase的Facebook OAuth

DebugUsery
415 阅读8分钟

在靠近用户的地方部署容器

本工程教育（EngEd）计划由科支持。

在全球范围内即时部署容器。Section是经济实惠、简单而强大的。

免费开始吧。

在React Native中使用Firebase的Facebook OAuth

5月4日, 2021

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

要了解更多关于Firebase的信息，请参考这个链接。

前提条件

在本教程中，我们将不涉及React和React Native的基础知识。如果你对这些基础知识不熟悉，我们强烈建议你在继续学习之前先看一下本教程。

概述

我们将在本文中讨论这些步骤。

  1. 开发环境。
  2. 克隆启动代码。
  3. 设置Firebase项目。
  4. 设置Facebook应用程序
  5. 设置Firebase认证。
  6. 签到
  7. 显示已认证的屏幕
  8. 签出
  9. 回顾一下

开发环境

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

按照这个文档来设置开发环境。

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

Env Setup

克隆启动代码

从这个GitHub仓库克隆启动代码。

你可以从这个GitHub仓库查看最终代码。

这将是应用程序的文件夹结构。

Folder Structure

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

  • Authentication.js：带有Facebook登录按钮的屏幕，启动登录过程。

  • Authenticated.js：用户只有在登录后才能看到的屏幕。

Screens

设置Firebase项目

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

Create New Project

一旦你创建了新项目，你就会看到仪表板。

New Dashboard

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

register_app

你需要应用程序的包名来注册你的应用程序。你可以在AndroidManifest.xml 中找到包的名称，它位于android/app/src/main/ 。

Package Name

在下一步，你应该下载google-services.json 文件并把它放在android/app 目录中。

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

Download 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

设置Facebook应用程序

前往developers.facebook.com并创建一个开发者账户。

转到应用程序部分，创建一个新的应用程序。

Create FB App

一旦你创建了一个应用程序，你就会看到应用程序仪表板。从仪表板上将Facebook登录产品添加到你的应用程序。

App Dashboard

要找到应用ID和应用秘密，这在后面的步骤中需要，请前往基本设置。

app_secret

一旦你复制了它，向下滚动，直到你找到添加平台。

add_platform

一旦你点击它，选择Android。

填写软件包名称，你可以在位于android/app/src/main/ 的AndroidManifest.xml ，找到软件包名称。

对于类名，填写MainActivity 。

对于密钥哈希值，你需要使用openSSL生成它。你可以从谷歌代码档案中下载它。

下载K版本。

OpenSSL

一旦你下载了它，解压并将文件夹复制到C:/ 。

检测你的keytool.exe ，它可以在bin/ 目录内的JDK目录中找到。JDK通常在一个类似于C:\Program Files\Java\jdk1.8.0_261\bin 的位置。

现在，在bin/ 文件夹内，运行。

./keytool -exportcert -alias androiddebugkey -keystore "C:\Documents and Settings\Administrator.android\debug.keystore" | "C:\OpenSSL\bin\openssl" sha1 -binary |"C:\OpenSSL\bin\openssl" base64

输出。

4iuaxR+bpCEhMEQslBTwAePpz74=

请参考StackOverflow的问题，了解如何生成密钥哈希的更多细节。

FB Android App

关于iOS的设置，请参考这个快速入门指南。

设置Firebase认证

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

Get Started Auth

然后，在签到方法中启用Facebook认证。一旦你启用了它，从Facebook开发者控制台提供应用ID和应用秘密，然后按保存。

Signin-method

为了完成设置，你应该将OAuth重定向URI添加到你的Facebook应用配置中。复制OAuth重定向URI并前往Facebook开发者控制台。

在产品下，前往Facebook登录的设置。将重定向URI粘贴在客户端OAuth设置的有效OAuth重定向URI下。

Redirect URI

现在，让我们前往应用程序，安装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'
}

接下来，让我们安装React Native Facebook SDK。

npm install react-native-fbsdk

在android/build.gradle ，在repositories ，在buildscript ，添加mavenCentral() 。

buildscript {
    repositories {
        google()
        jcenter()

        // Add this line
        mavenCentral()
    }
}

在android/app/build.gradle ，在dependencies ，添加以下内容。

implementation 'com.facebook.android:facebook-android-sdk:[5,6)'

现在，你应该把你的Facebook应用ID添加到你项目的字符串文件中，在android/app/res/values/strings.xml 。

<resources>
  <string name="app_name">RNFirebaseFacebookAuth</string>
  <string name="facebook_app_id"><-- Your App ID here --></string>
</resources>

在AndroidManifest.xml 文件中，在manifest 下添加一个uses-permission 元素 : (如果已经存在，请忽略)

<uses-permission android:name="android.permission.INTERNET" />

接下来，在application 元素中添加一个meta-data 。

<application android:label="@string/app_name" ...>
    ...
    <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
    ...
</application>

按照这个入门指南来设置iOS的SDK。

签到

在App.js中，让我们创建一个名为signIn 的函数，当用户按下登录按钮时，它将被调用。让我们把函数内的所有代码包在一个try/catch 块中，以显示在签到流程中可能出现的任何错误。

async function signIn() {
  try {

    // Code goes here

  } catch (error) {
    alert(error);
  }
}

让我们使用登录管理器来进行权限登录。我们需要向函数传递一个应用程序需要的权限数组。

const result = await LoginManager.logInWithPermissions([
  'public_profile',
  'email',
]);

如果结果包含一个isCancelled 属性，这意味着用户取消了这个过程。让我们抛出一个错误，然后由catch 块来处理。

if (result.isCancelled) {
  throw 'User cancelled the login process';
}

一旦签入，我们应该得到用户的AccessToken。

const data = await AccessToken.getCurrentAccessToken();

如果数据是空的，让我们抛出一个错误。

if (!data) {
  throw 'Something went wrong obtaining access token';
}

现在，我们应该使用访问令牌创建一个凭证，并将用户签入应用程序。

const facebookCredential = auth.FacebookAuthProvider.credential(data.accessToken);
return auth().signInWithCredential(facebookCredential);

下面是signIn 函数的完整代码。

async function signIn() {
  try {
    // Login the User and get his public profile and email id.
    const result = await LoginManager.logInWithPermissions([
      'public_profile',
      'email',
    ]);

    // If the user cancels the login process, the result will have a 
    // isCancelled boolean set to true. We can use that to break out of this function.
    if (result.isCancelled) {
      throw 'User cancelled the login process';
    }


    // Get the Access Token 
    const data = await AccessToken.getCurrentAccessToken();

    // If we don't get the access token, then something has went wrong.
    if (!data) {
      throw 'Something went wrong obtaining access token';
    }

    // Use the Access Token to create a facebook credential.
    const facebookCredential = auth.FacebookAuthProvider.credential(data.accessToken);

    // Use the facebook credential to sign in to the application.
    return auth().signInWithCredential(facebookCredential);
    
  } catch (error) {
    alert(error);
  }
}

显示已验证的屏幕

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

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

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

要了解更多关于用户对象的信息，请参考这个文档。

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

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

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

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

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

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

我在认证屏幕中使用auth().currentUser ，以显示电子邮件ID、姓名和用户的个人资料图片。

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 Screen

签出

我们应该使用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);
  }
})

Signout

让我们来回顾一下

  1. 我们建立了我们的开发环境并创建了一个React Native应用。
  2. 我们克隆了启动代码。
  3. 我们用开发者账户创建了一个Facebook应用，并为该应用启用了Facebook登录。
  4. 我们创建了一个Firebase项目，并在我们的项目中使用App ID和App Secret启用了Facebook认证。
  5. 我们安装了所需的软件包，并在build.gradle 文件中添加了依赖项。
  6. 我们在strings.xml 文件中加入了App ID，并在AndroidManifest.xml 文件中加入了一些配置。
  7. 我们写了一个函数，使用Facebook SDK用他们的Facebook访问令牌登录用户。
  8. 我们创建了一个状态来跟踪用户的认证状态，并使用onAuthStateChanged 处理程序来更新该状态。
  9. 当用户被认证后，我们显示了认证屏幕。
  10. 我们使用auth 模块从认证屏幕上签出用户的应用程序。

恭喜你，🥳你成功了。

谢谢你的阅读。

编码愉快!

同行评审的贡献者。赛哈沙-巴拉苏布拉马尼亚姆

avatar
文章
阅读
粉丝