使用 Vue 3 和 Firebase 进行身份验证

在构建任何类型的应用程序时，隐私和安全是需要牢记的两个重要因素。随着网络犯罪分子变得越来越先进，身份验证是阻止黑客攻击和保护用户最有价值信息的重要步骤。

Firebase 身份验证提供后端服务来帮助对应用程序中的用户进行身份验证，支持不同的身份验证方法，例如密码和电话号码，并支持包括 Google、Twitter 和 Facebook 在内的身份提供者。

要将 Firebase 身份验证集成到您的应用程序中，您可以使用Firebase UI，它处理用户使用不同提供商登录的 UI 流程，或者您可以在项目中手动设置 Firebase SDK 并配置对您想要的任何提供商的支持使用。

在本教程中，我们将手动设置 Firebase。我们将创建用户注册和登录所需的不同视图，然后最终提供对电子邮件和密码身份验证的支持。

要继续阅读本文，您可以访问完整的代码库。让我们开始吧！

• 设置 Vue

• 设置 Firebase 项目

• 安装依赖项

• 如何将 Firebase 与 Vue 集成

• 创建组件

• 向项目添加路由

• 使用 Vuex 管理状态

• 在 Firebase 中注册用户

• 登录用户

• 创建Dashboard组件

• 注销用户

设置 Vue

首先，我们将使用Vue CLI v3.0 快速搭建一个新的 Vue 项目。如果您已经安装了旧版本的 CLI，则可以通过运行以下命令将其卸载：

npm uninstall -g vue/cli

然后，通过运行以下命令全局安装新的 CLI：

npm install -g @vue/cli

接下来，通过运行以下命令创建一个新的 Vue 项目：

vue create firebase-auth

系统将提示您选择一个预设。选择Default ([Vue 3] babel, eslint)，它将在指定位置搭建一个新的 Vue 应用程序。

设置 Firebase 项目

要开始使用 Firebase，您需要一个 Gmail 帐户。前往https://console.firebase.google.com/u/0/并创建一个新项目：

Firebase 支持使用不同的方法进行身份验证，例如社交身份验证、电话号码以及标准电子邮件和密码。

在本教程中，我们将使用电子邮件和密码身份验证方法。我们需要为我们刚刚在 Firebase 中创建的项目启用它，因为默认情况下它是禁用的。

在您项目的身份验证部分下，单击登录方法，您应该会看到 Firebase 当前支持的提供程序列表：

接下来，单击电子邮件/密码提供程序上的编辑图标并打开启用开关：

接下来，您需要在 Firebase 项目下注册您的应用程序。在项目的概述页面上，在Get started by adding Firebase to your app下，选择web 图标：

完成应用程序的注册后，您将看到一个包含应用程序凭据的添加 Firebase SDK部分。记下firebaseConfig我们将在 Vue 应用程序中使用的对象。

安装依赖项

接下来，cd进入项目目录并运行以下命令来安装所有必需的依赖项：

npm i firebase vue-router@4 vuex@next 

• Firebase 是我们将用来与 Firebase 交互的 npm 包

• Vue Router是 Vue 的官方路由器

• Vuex是 Vue 的状态管理库

如何将 Firebase 与 Vue 集成

现在，我们可以使用 Vue 项目设置 Firebase。在该main.js文件中，我们将导入 Firebase 包并将其配置为使用我们之前从 Firebase 控制台记录的应用程序凭据。在src文件夹中，创建一个名为 的文件firebaseConfig.js，然后添加应用程序凭据，应类似于以下代码：

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from 'firebase/auth'
​
​
​
const firebaseConfig = {
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.VUE_APP_FIREBASE_APP_ID,
  measurementId: process.env.VUE_APP_FIREBASE_MEASUREMENT_ID
};
​
// Initialize Firebase
const app = initializeApp(firebaseConfig);
​
//initialize firebase auth
const auth = getAuth()
​
​
export { app, auth }

不要忘记firebaseConfig用我们之前提到的 Firebase 凭据替换 vales。

创建组件

现在，我们可以继续为我们的项目创建所需的组件。

• Register.vue ：处理允许用户注册的逻辑，以及显示注册视图

• Login.vue : 允许用户登录并显示登录视图的句柄

• Dashboard.vue：在用户成功注册或通过身份验证后显示

• Navbar.vue ：将在所有其他组件之间共享的导航栏组件

转到src/components目录并运行以下命令来创建我们刚刚在上面列出的组件：

touch Register.vue Login.vue Dashboard.vue Navbar.vue

向