使用 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

向项目添加路由

在我们开始处理我们的组件之前，让我们添加我们的应用程序将拥有的路由。在目录中创建一个routes文件夹src。在文件夹中，添加一个index.js文件并使用以下代码编辑该文件：

import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue';
import Register from '../views/Register.vue';
import Dashboard from '../views/Dashboard.vue';


const routes = [{path: '/login',name: 'login',component: Login},{path: '/register',name: 'Register',component: Register},{path: '/',name: 'Dashboard',component: Dashboard}
]


const router = createRouter({history: createWebHistory(),routes})
export default router

接下来，用标签替换App.vue文件的内容：<router-view/>

<template><div><main class="py-4"><router-view></router-view></main&gt;</div>
</template>

<script>
export default {
};
</script>

使用 Vuex 管理状态

Vuex 是一个状态管理库，它提供了一个集中存储来帮助管理 Vue 应用程序中的组件。在目录中创建一个store.js文件，src并将以下代码添加到文件中：

import { createStore } from 'vuex'const store = createStore({
})// export the store
export default store

首先，我们定义将包含一个user对象的状态，该对象包含有关登录用户的信息：

state: {user: {loggedIn: false,data: null}
},

该loggedIn属性的默认值为false，是一个布尔值，它告诉我们用户是否已通过身份验证。该data属性保存有关登录用户的信息：

getters: {user(state){return state.user}},

在Vuex 中，getter 通常提供一种访问存储在状态中的数据的方法。我们定义了一个简单的 getter 调用，它从状态user中返回user对象：

mutations: {SET_LOGGED_IN(state, value) {state.user.loggedIn = value;},SET_USER(state, data) {state.user.data = data;}
}

突变允许我们改变我们的状态；在这里，我们定义了两个突变。第一个是SET_LOGGED_IN，它将loggedIn属性设置为传递state.user给value它的。SET_USER更改上的data属性state.user：

  actions: {async register(context, { email, password, name}){const response = await createUserWithEmailAndPassword(auth, email, password)if (response) {context.commit('SET_USER', response.user)response.user.updateProfile({displayName: name})} else {throw new Error('Unable to register user')}},async logIn(context, { email, password }){const response = await signInWithEmailAndPassword(auth, email, password)if (response) {context.commit('SET_USER', response.user)} else {throw new Error('login failed')}},async logOut(context){await signOut(auth)context.commit('SET_USER', null)},async fetchUser(context ,user) {context.commit("SET_LOGGED_IN", user !== null);if (user) {context.commit("SET_USER", {displayName: user.displayName,email: user.email});} else {context.commit("SET_USER", null);}}}

动作类似于突变，但它们不是改变状态，而是提交突变。为了简化流程，我们将在操作中定义所有用于身份验证的操作，然后我们将在方法中分派它们。

register`操作通过传入我们要在 Firebase 上注册的用户的电子邮件和密码来使用`createUserWithEmailAndPassword()`方法。`firebase.auth()

我们不需要散列密码，因为 Firebase 会自动处理。如果注册成功，我们调用返回updateProfile()的对象上的方法，user将 name 字段与user. 否则，我们会为错误抛出异常，然后将其显示给用户。

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

该logIn操作使用与注册操作相同的逻辑()，但使用不同的方法signInWithEmailAndPassword()。

该logout()操作使用该signOut()方法，然后将用户状态更新为null。该fetchUser操作接受用户作为参数以根据其当前值更新状态。

在 Firebase 中注册用户

让我们看看我们如何注册用户并将他们的详细信息存储在 Firebase 上。src/components/Register.vue使用以下代码进行编辑：

<template><div class="container"><div class="row justify-content-center"><div class="col-md-8"><div class="card"><div class="card-header">Register</div><div class="card-body"><div v-if="error" class="alert alert-danger">{{error}}</div><form action="#" @submit.prevent="Register"><div class="form-group row"><label for="name" class="col-md-4 col-form-label text-md-right">Name</label><div class="col-md-6"><inputid="name"type="name"class="form-control"name="name"valuerequiredautofocusv-model="name"/></div></div><div class="form-group row"><label for="email" class="col-md-4 col-form-label text-md-right">Email</label><div class="col-md-6"><inputid="email"type="email"class="form-control"name="email"valuerequiredautofocusv-model="email"/></div></div><div class="form-group row"><label for="password" class="col-md-4 col-form-label text-md-right">Password</label><div class="col-md-6"><inputid="password"type="password"class="form-control"name="password"requiredv-model="password"/></div></div><div class="form-group row mb-0"><div class="col-md-8 offset-md-4"><button type="submit" class="btn btn-primary">Register</button></div></div></form></div></div></div></div></div>
</template><script>
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'export default {name: "RegisterComponent",setup() {const name = ref('')const email = ref('')const password = ref('')const error = ref(null)const store = useStore()const router = useRouter()const Register = async () => {try {await store.dispatch('register', {email: email.value,password: password.value,name: name.value})router.push('/')}catch (err) {error.value = err.message}}return { Register, name,email, password, error }}
};
</script>

在<template></template>标签中，我们创建了一个用于注册用户的简单引导表单。表单中的每个输入字段都在setup()Composition API 的 Hook中定义。提交表单时，Register会调用该函数，该函数处理用户在 Firebase 上的实际注册。

为了进一步了解发生了什么，让我们Register详细看一下该函数：

const Register = async () => {try {await store.dispatch('register', {email: email.value,password: password.value,name: name.value})router.push('/')}catch (err) {error.value = err.message}}

在该submit()方法中，firebase.auth()让我们可以访问我们的默认应用程序的身份验证服务。

接下来，我们调用createUserWithEmailAndPassword()，传入我们要在 Firebase 上注册的用户的电子邮件和密码。分享几个我私藏的找软件网站，包含了电脑、安卓、mac几大类，都是直接下载无套路！我们不需要对密码进行哈希处理，因为 Firebase 会自动处理。

由此，我们定义了一个异步函数，Register它从存储和电子邮件中分派Register操作，然后将密码和名称作为有效负载传递。如果成功，用户将被重定向到仪表板页面。否则，错误将显示在页面中。

登录用户

接下来，让我们学习如何允许用户登录。继续并Login.vue使用以下代码编辑我们之前创建的组件：

<template><div class="container"><div class="row justify-content-center"><div class="col-md-8"><div class="card"><div class="card-header">Login</div><div class="card-body"><div v-if="error" class="alert alert-danger">{{error}}</div><form action="#"  @submit.prevent="Login"><div class="form-group row"><label for="email" class="col-md-4 col-form-label text-md-right">Email</label><div class="col-md-6"><inputid="email"type="email"class="form-control"name="email"valuerequiredautofocusv-model="email"/></div></div><div class="form-group row"><label for="password" class="col-md-4 col-form-label text-md-right">Password</label><div class="col-md-6"><inputid="password"type="password"class="form-control"name="password"requiredv-model="password"/></div></div><div class="form-group row mb-0"><div class="col-md-8 offset-md-4"><button type="submit" class="btn btn-primary">Login</button></div></div></form></div></div></div></div></div>
</template><script>
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'export default {name: "LoginComponent",setup() {const email = ref('')const password = ref('')const error = ref(null)const store = useStore()const router = useRouter()const Login = async () => {try {await store.dispatch('logIn', {email: email.value,password: password.value})router.push('/')}catch (err) {error.value = err.message}}return { Login, email, password, error }}
};
</script>

    const Login = async () => {try {await store.dispatch('logIn', {email: email.value,password: password.value})router.push('/')}catch (err) {error.value = err.message}}

创建Dashboard组件

接下来，我们将定义一个简单的仪表板视图，其中包含一个引导警报，通知用户他们已成功登录，显示用户配置文件，并显示注销按钮。将以下代码添加到src/components/Dashboard.vue文件中：

<template><div class="container"><div class="row justify-content-center"><div class="col-md-8"><div class="card"><div v-if="user.loggedIn"><div class="card-header">Welcome, {{user.data.displayName}}</div><div class="card-body"><div class="alert alert-success" role="alert">You are logged in!<div class="my-4"><button  @click.prevent="signOut" class="btn btn-primary">Log Out</button></div></div></div></div><div v-else class="alert alert-danger" role="alert">You are not logged in! </div></div></div></div></div>
</template><script>
import { useStore} from "vuex";
import { useRouter } from "vue-router";
import {computed} from "vue";
import { auth } from '../firebaseConfig'export default {name: "DashboardComponent",setup() {const store = useStore()const router = useRouter()auth.onAuthStateChanged(user => {store.dispatch("fetchUser", user);});const user = computed(() => {return store.getters.user;});const signOut = async () => {await store.dispatch('logOut')router.push('/')}return {user,signOut}}};
</script>

使用onAuthStateChanged()观察者，我们可以fetchUser()在用户成功通过身份验证时调度操作：

  auth.onAuthStateChanged(user => {store.dispatch("fetchUser", user);});

使用计算属性，我们可以轻松地从 store getter 更新用户对象：

  const user = computed(() => {return store.getters.user;});

然后在仪表板页面上显示用户的个人资料信息。

注销用户

在Dashboard.vue组件中，我们定义了一个signOut()函数。该函数从商店分派logout操作，然后将其重定向回登录页面：

const signOut = async () => {await store.dispatch('logOut')router.push('/login')}

结论

在本教程中，我们学习了如何使用 Firebase 支持的电子邮件和密码提供程序设置简单的身份验证系统。Firebase 是提高应用程序安全性的绝佳工具，正如您所见，Firebase 身份验证非常易于使用。