如何在React Native中使用Firebase进行电子邮件/密码认证

DebugUsery
527 阅读6分钟

在React Native中使用Firebase进行电子邮件/密码认证

在本教程中，我们将学习如何在非Expo的React Native应用中使用Firebase认证模块用用户的电子邮件和密码进行认证。

前提条件

本教程将不涉及React和React Native的基础知识。

概述

我们将在本文中经历这些步骤。

  1. 开发环境。
  2. 克隆启动代码。
  3. 设置Firebase项目。
  4. 设置Firebase认证。
  5. 创建一个账户。
  6. 登录到现有的账户。
  7. 认证屏幕。
  8. 签出。
  9. 回顾一下。

开发环境

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

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

Env Setup

克隆启动代码

为了更专注于认证模块，你可以从GitHub上的这个仓库克隆启动代码。请按照该仓库的README ，了解相关说明。

对于最终的代码，你可以看一下这个GitHub仓库。

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

Folder Structure

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

  • Authentication.js: 登录或创建账户的屏幕。

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

Screens

在App.js中，Authentication屏幕被导出了。当我们写代码时，我们将在认证用户后有条件地显示Authenticated屏幕。

设置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

设置Firebase认证

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

Get Started Auth

接下来，你应该在登录方式中启用电子邮件/密码认证。一旦你启用了它，按Save 。

Enable Email

让我们在我们的应用程序中安装@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认证模块就在我们的应用程序中设置了。

创建一个用户账户

Firebaseauth 模块有一个叫做createUserWithEmailAndPassword 的函数，它可以帮助在应用程序中创建一个带有电子邮件和密码的新用户。

比如说。

auth().createUserWithEmailAndPassword('johndoe@gmail.com', 'helloworld123');

这将在Firebase应用程序中创建一个新的用户，他的电子邮件地址是johndoe@gmail.com ，并有相应的密码。在同一个应用程序中，两个用户不能有相同的电子邮件ID。

这个函数也将在创建用户账户后将用户签入应用程序。

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

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

让我们写一个函数，它将接受一个电子邮件和密码，并调用createUserWithEmailAndPassword ，以创建一个新用户。

createUserWithEmailAndPassword 是一个异步函数。

const createUser = (email, password) => {
  try {
    auth().createUserWithEmailAndPassword(email, password);
  } catch (error) {
    alert(error);
  }
};

现在，让我们把这个函数传递给认证屏幕。

return <Authentication createUser={createUser} />;

当用户按下创建按钮时，我们应该调用这个函数。当这个函数被调用时，我们应该从状态中传递电子邮件和密码给这个函数。

<Button title="Create" onPress={() => props.createUser(email, password)} />

现在，当用户按下这个按钮的时候，createUserWithEmailAndPassword ，并附上电子邮件和密码，这将在Firebase应用中创建一个新用户。如果有任何错误，我们会用alert() 向用户显示。

在用户账户创建后，他/她也会被登录到应用程序中。为了跟踪用户是否被认证，让我们创建一个状态并将初始值设置为false。

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

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

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

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

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

现在，如果用户在应用程序中被认证，让我们返回认证屏幕。

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

return <Authentication createUser={createUser} />;

签入用户

Firebaseauth 模块有一个叫做signInWithEmailAndPassword 的函数，它将用电子邮件和密码登录用户到应用程序中。

例如，这将使用户用电子邮件的ID登录到应用程序中。

auth().signInWithEmailAndPassword('johndoe@gmail.com', 'helloworld123');

让我们写一个函数，接受一个电子邮件和密码，并调用signInWithEmailAndPassword ，以登录用户。

signInWithEmailAndPassword 是一个异步函数。

const signin = (email, password) => {
  try {
    auth().signInWithEmailAndPassword(email, password);
  } catch (error) {
    alert(error);
  }
};

现在，让我们把这个函数传递给认证屏幕。

return <Authentication signin={signin} createUser={createUser} />;

当用户按下登录按钮时，我们应该调用这个函数。当这个函数被调用时，我们应该从状态中传递电子邮件和密码给这个函数。

<Button title="signin" onPress={() => props.signin(email, password)} />

现在，当用户按下signin按钮时，signInWithEmailAndPassword ，并附上电子邮件和密码，这就允许用户进入应用程序。如果有任何错误，我们将使用alert() 向用户显示。

Signin

签出

我们应该使用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. 我们创建了一个Firebase项目。

  3. 我们在项目中设置了认证模块并启用了电子邮件/密码认证。

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

  5. 我们在build.gradle 文件中添加了依赖项。

  6. 我们添加了一个函数，用auth 模块中的createUserWithEmailAndPassword 方法创建一个新用户。

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

  8. 我们添加了一个函数，用auth 模块中的signInWithEmailAndPassword 方法签入用户。

  9. 我们使用auth 模块从认证屏幕上将用户签出应用程序。

恭喜你，🥳你成功了。

avatar
文章
阅读
粉丝