Учебное пособие по аутентификации Vue Firebase - Vue 3 и Firebase

Учебное пособие по аутентификации Vue Firebase - Vue 3 и Firebase

Разрешение пользователям создавать свои собственные профили - распространенный вариант использования многих современных веб-приложений. Попытка настроить это в вашей собственной базе данных может быть немного сложной - иметь дело с постоянством, O-Auth и шифрованием.

К счастью для нас, разработчиков Vue, мы можем легко добавить Firebase в наше приложение Vue. Это означает, что мы можем создать простую систему аутентификации Vue и Firebase, которая поддерживает так много стандартных вариантов использования из коробки.

В этом руководстве мы рассмотрим все тонкости добавления аутентификации Firebase в ваше приложение Vue 3.

Мы будем создавать простое приложение Vue, которое позволит пользователям регистрировать учетные записи, входить в свои учетные записи и следить за тем, чтобы определенные страницы были ограничены только для доступа пользователей.

Давайте прямо сейчас!

Создание нашего проекта аутентификации Vue и Firebase

На высоком уровне наше приложение состоит из двух частей:

1. Интерфейс Vue, который позволяет нам создавать учетные записи, входить в систему и просматривать контент.
2. Проект Firebase, который обрабатывает аутентификацию.

Чтобы создать приложение Vue, мы будем использовать Vue 3 и Vite. Если вы еще не использовали ни то, ни другое, я рекомендую сначала ознакомиться с нашим введением в руководство по Vite.

Создание нашего приложения Vite

Во-первых, нам нужно создать наше приложение. Итак, давайте откроем терминал и скажем npm init @vitejs/app

Затем мы можем добавить имя нашего проекта, и, поскольку Vite не зависит от фреймворка, мы должны выбрать Vue в качестве нашего шаблона.

Теперь давайте запустим эти команды, чтобы установить все наши зависимости и запустить наш проект.

cd vue-firebase-authentication 
npm install 
npm run dev

Наше приложение Vite теперь запущено и работает. Мы можем перейти к http://localhost:3000 и увидеть начальное приложение по умолчанию в нашем браузере.

Мы немного настроим остальную часть нашего приложения, включая несколько страниц, но давайте сначала настроим наш проект Firebase.

Настройка нашего проекта Firebase

В нашем браузере давайте перейдем в Firebase Console и дадим нашему проекту имя.

На следующем слайде не имеет значения, добавим ли мы Google Analytics или нет. Для этого урока в этом нет необходимости, поэтому я не собираюсь этого делать.

После создания проекта давайте создадим веб-приложение Firebase, нажав эту кнопку.

Как только мы даем нашему проекту имя, нам дается блок кода. Выделенный раздел пригодится позже, поэтому постарайтесь оставить эту страницу открытой. Но если вы случайно закроете его, вы всегда сможете вернуться к нему в настройках вашего проекта.

И это все, что нам нужно сделать, чтобы создать наш проект Firebase.

Использование Vue Router для создания страниц

Наше приложение Vue будет довольно простым - всего из четырех страниц:

1. /home страница с базовым шаблоном
2. /registration страница для подсчета
3. /sign-in страница для существующих пользователей
4. /feed страница, для которой требуется авторизованный пользователь

Итак, давайте создадим эти файлы внутри папки с именем src/views. Мы будем заполнять каждый из них в оставшейся части этого руководства, но для того, чтобы наш маршрутизатор работал, нам нужно, чтобы он существовал.

Мы собираемся использовать Vue Router для обработки всех этих маршрутов. Во-первых, нам нужно установить версию Vue Router, совместимую с Vue 3. В нашем терминале, скажем…

npm install vue-router@4

Затем мы можем определить все наши маршруты в файле src/router/index.js.

import { createRouter, createWebHistory } from 'vue-router' 
const router = createRouter({ 
  history: createWebHistory(), 
  routes: [ 
    { path: '/', 
      component: () => import('../views/Home.vue') }, 
    { path: '/register', 
      component: () => import('../views/Register.vue') }, 
    { path: '/sign-in', 
      component: () => import('../views/SignIn.vue') }, 
    { path: '/feed', 
      component: () => import('../views/Feed.vue') } 
  ] 
}) 
export default router

Этот код использует Vue Router для сопоставления URL-путей с компонентами Vue внутри папки src/views.

Наконец, мы должны использовать эти маршруты, и это состоит из двух шагов:

1. Сообщаем нашему корневому экземпляру приложения Vue использовать только что созданный маршрутизатор
2. Объявление элемента вида маршрутизатора внутри App.vue

Мы можем решить первую задачу внутри src/main.js, мы должны сохранить значение createApp, а затем использовать метод .use для добавления нашего маршрутизатора. Затем мы можем просто вызвать .mount, чтобы добавить наш экземпляр Vue в наш элемент #app.

import { createApp } from 'vue' 
import App from './App.vue' 
import router from './router' 
const app = createApp(App)
app.use(router) 
app.mount('#app')

Вот и все.

На втором этапе мы должны открыть App.vue и заменить наш код шаблона элементом <router-view>. И это отображает любой компонент, в который разрешается маршрутизатор, а это означает, что он будет изменяться в зависимости от текущего пути в URL-адресе.

<template>   
  <router-view /> 
</template>

Замечательно, теперь, если мы будем перемещаться по любому из объявленных нами маршрутов, мы увидим соответствующий компонент Vue.

Создание панели навигации

Чтобы нам было проще перемещаться по разным страницам нашего приложения, давайте добавим несколько разных ссылок в наш файл App.vue. Для этого мы будем использовать элемент <router-link> Vue Router.

Поскольку наш App.vue файл содержит представление маршрутизатора, этот раздел навигации будет доступен на всех различных страницах нашего приложения.

<template> 
  <div> 
    <nav>
      <router-link to="/"> Home </router-link> | 
      <router-link to="/feed"> Feed </router-link> | 
      <router-link to="/register"> Register </router-link> | 
      <router-link to="/sign-in"> Login </router-link> | 
    </nav> 
    <router-view /> 
  </div> 
</template>

И вот результат. Он не самый красивый, но в нем есть все функции, необходимые для этого примера. Мы можем щелкать мышью и получать доступ к нашим различным страницам.

Следует отметить, что, поскольку мы не настроили аутентификацию, мы можем получить доступ к нашей странице канала еще до того, как войдем в систему! Итак, давайте это исправим.

Добавление Firebase в Vue 3

Создав все различные компоненты нашего приложения, мы можем перейти к захватывающей части: интеграции Firebase в наше приложение Vue 3.

Для этого мы можем использовать пакет Firebase npm. Вернемся к нашему терминалу и добавим его.

npm install firebase

После его установки мы можем легко добавить его в наш main.js file. Внутри давайте импортируем наш пакет Firebase npm. Затем давайте возьмем этот код конфигурации, который Firebase сгенерировал несколько шагов назад, и мы можем просто скопировать и вставить его в наш main.js файл.

import { createApp } from 'vue' 
import App from './App.vue' 
import router from './router' 
import firebase from 'firebase' 
/* code from our Firebase console */ 
var firebaseConfig = { 
  apiKey: "", 
  authDomain: "", 
  projectId: "", 
  storageBucket: "", 
  messagingSenderId: "", 
  appId: "" 
} 
// Initialize Firebase 
firebase.initializeApp(firebaseConfig) 
const app = createApp(App) 
app.use(router) 
app.mount('#app')

И это все, что нам нужно, чтобы добавить Firebase в наш проект! Теперь давайте посмотрим, как использовать его функции аутентификации в нашем приложении Vue.

Аутентификация Firebase в Vue

Firebase дает нам несколько разных вариантов аутентификации пользователей. Мы собираемся упростить задачу и пока будем работать с учетными записями электронной почты и паролем.

Итак, в нашей консоли Firebase перейдем на вкладку аутентификации и убедимся, что опция электронной почты / пароля включена.

Хорошо, теперь мы готовы создать нашего первого пользователя.

Регистрация пользователя

Для регистрации мы будем работать с нашим Register.vue компонентом. Давайте просто добавим текстовый ввод для электронной почты, ввод пароля и кнопку отправки, которая вызывает метод createAccount. Мы будем использовать v-модель для подключения наших входных данных к нашим данным Javascript.

Если этот синтаксис кажется вам незнакомым, посмотрите это видео о синтаксисе экспериментальной установки скрипта.

Хорошо - теперь подключимся к нашему проекту Firebase.

После импорта Firebase в этот компонент все, что нам нужно сделать, это вызвать функцию createUserWithEmailAndPassword из API аутентификации Firebase.

Этот метод принимает значения нашего адреса электронной почты и пароля, а затем возвращает обещание, которое мы можем затем использовать и использовать, как любое другое обещание.

Если наша учетная запись успешно создана, мы собираемся регистрировать информацию об учетной записи, а затем перенаправлять пользователя на страницу /feed. Если есть какая-то ошибка, мы ее просто поймаем и распечатаем.

Давайте попробуем и посмотрим, что из этого получится.

Если мы введем действительный адрес электронной почты и пароль длиной не менее 6 символов, мы должны увидеть следующее в нашей консоли после отправки.

И если мы зайдем в нашу консоль Firebase, мы должны увидеть нашу новую учетную запись в нашей базе данных!

Захватывающе!!

Сразу после создания учетной записи мы автоматически входим в систему, и информация об учетной записи сохраняется в firebase.auth().currentUser. По умолчанию он сохраняется в локальном хранилище, чтобы создать некоторую постоянство в разных сеансах (например, если вы откроете приложение на другой вкладке, вы все равно войдете в систему).

Вход пользователя

Итак, теперь, когда у нас есть способ создать новую учетную запись, мы можем использовать довольно похожий подход для входа в существующую.

Внутри SignIn.vue давайте просто скопируем и вставим только что созданный Register.vue компонент.

Единственное изменение, которое мы должны сделать, это вместо вызова метода createUserWithEmailAndPassword использовать signInWithEmailAndPassword. В остальном он должен работать точно так же.

Потрясающий! Теперь мы можем создать новую учетную запись, а затем войти в нее.

Одна функция, которую мы можем добавить здесь, - это отображение простых сообщений об ошибках, если что-то пойдет не так, например:

1. Мы передаем неверный адрес электронной почты
2. Мы передаем действующий адрес электронной почты, но для него нет связанной учетной записи
3. Наш пароль неверный

Мы можем зафиксировать эти случаи внутри нашего блока catch. Firebase Authentication имеет четыре кода ошибок для метода signInWithEmailAndPassword, к которому можно получить доступ через error.code.

auth/invalid-email

Выдается, если адрес электронной почты недействителен.

auth/user-not-found

Выдается, если нет пользователя, соответствующего данному адресу электронной почты.

auth/wrong-password

Выдается, если пароль недействителен для данного адреса электронной почты или для учетной записи, соответствующей электронной почте, не установлен пароль.

auth/user-disabled

Выдается, если пользователь, соответствующий данному адресу электронной почты, был отключен (мы не используем этот)

Мы можем легко отобразить некоторые сообщения об ошибках с помощью элемента абзаца, свойства реактивного сообщения и блока переключения в зависимости от кода ошибки.

Посмотрим, что произойдет, если мы введем неверный пароль.

Идеально! Мы получаем простые сообщения

Выход пользователя из системы

Выйти из системы в Firebase до смешного просто, все, что нам нужно сделать, это позвонить firebase.auth().signOut(), и пользователь выйдет из системы.

Давайте добавим еще одну кнопку на нашу панель навигации, которая вызывает метод signOut. И поскольку мы хотим отображать это только когда пользователь вошел в систему, мы можем использовать ref, который меняется каждый раз, когда изменяется состояние нашей аутентификации. Мы более подробно рассмотрим этот onAuthStateChanged метод в следующем разделе.

На данный момент, когда наша кнопка нажата, мы просто хотим вызвать наш signOut метод.

Как только мы нажимаем «Выход», мы больше не вошли в систему. Это также означает, что все наше условно отображаемое содержимое на нашей панели навигации перейдет в состояние выхода.

Проверка статуса входа в систему

Чтобы проверить, вошел ли пользователь в систему, мы снова можем использовать firebase.auth().onAuthStateChanged method. Это либо даст нам объект, если пользователь вошел в систему, ИЛИ значение null, если пользователь не вошел в систему.

Причина, по которой нам нужно использовать этот прослушиватель, заключается в том, что во время инициализации Firebase наш текущий аутентифицированный пользователь (который хранится в firebase.auth().currentUser) имеет значение NULL. Поскольку мы не знаем, сколько времени потребуется Firebase для инициализации при первой загрузке сеанса, если мы просто проверим currentUser, у нас не будет значения, даже если мы правильно вошли в систему.

Наш наблюдатель onAuthStateChanged ожидает разрешения всех асинхронных действий (например, инициализации) перед запуском, что означает, что мы получаем наиболее точное состояние нашего приложения.

Итак, внутри нашей Feed.vue page, которую мы хотим ограничить только зарегистрированными пользователями. Мы можем просто проверить, дает ли наш наблюдатель нулевое значение. Если это так, мы можем использовать аналогичную программную навигацию Vue Router, чтобы перенаправить наше приложение на страницу входа.

Мы также хотим убирать наш authListener всякий раз, когда наш компонент размонтируется.

Хорошо, давайте посмотрим, как это работает. Давайте удостоверимся, что мы вышли из системы, и попытаемся получить доступ к нашей странице канала.

Теперь, если мы войдем в систему и вернемся к /feed, он загрузится правильно, потому что у нас действительно есть зарегистрированный пользовательский объект!

Потрясающий. Тот факт, что аутентификация Firebase имеет встроенные постоянные пользовательские данные, значительно упрощает управление сеансами.

Мы также можем использовать этот статус входа в систему, чтобы отображать ссылку навигации на канал только тогда, когда пользователь вошел в систему, используя то же свойство данных isLoggedIn.

<span v-if="isLoggedIn">          
  <router-link to="/feed"> Feed </router-link> | 
</span>

Теперь наша ссылка на маршрутизатор для страницы /feed будет условно отображаться в зависимости от состояния аутентификации.

Вот так! У вас есть работающая система аутентификации

Последние мысли

Конечно, это только начало возможностей, которые можно добавить в систему аутентификации Vue Firebase. Но просто поняв эти основные концепции, вы можете создать основу для интегрированной клиентской / серверной системы.

Одно расширение, которое вам нужно будет добавить для производственных приложений, - это добавление проверки в формы регистрации. На бэкэнде Firebase выдает ошибку, если мы передаем неверный адрес электронной почты или небезопасный пароль, но с помощью интерфейса v alidation с Vuelidate мы можем выявить эти проблемы еще до того, как сделаем вызов нашего API.

Мы также можем установить наши собственные правила для паролей, требующие специальных символов, цифр и других типов пользовательских проверок.

Если вы новичок в Vuelidate, посмотрите наше видео, в котором объясняется, как использовать его в Vue 3!

Еще одно отличное расширение - это полное использование преимуществ системы Firebase O-Auth, позволяющее вашим пользователям входить в систему с помощью учетной записи Google, Twitter или других социальных сетей. Это отличный способ повысить уровень регистрации, так как весь процесс регистрации занимает всего несколько кликов.

Но в этом руководстве мы узнали, как создать проект Vue 3 с Vite, проект Firebase, а затем интегрировать их, чтобы создать систему аутентификации.

Если вы хотите узнать больше об аутентификации Firebase или об использовании Firebase с Vue в целом, дайте мне знать в комментариях, и кто знает

Но до следующего раза, удачного кодирования!

Если вы хотите узнать больше о Vue 3, загрузите мою бесплатную шпаргалку по Vue 3 с такими важными знаниями, как Composition API, синтаксис шаблона Vue 3 и многое другое.

Первоначально опубликовано на https://learnvue.co 8 июня 2021 г.