Аутентификация необходима для современных веб-сайтов, особенно когда разные пользователи имеют разные разрешения.
Идентификация утверждает, кем является человек. Аутентификация подтверждает эту заявленную личность.
В этой статье мы создадим страницу входа и регистрации с помощью Nuxt.js. Сервисы аутентификации и баз данных интегрируются с firebase. Я использую nuxt.js, потому что у него отличная рабочая среда. Nuxt.js также отлично подходит для SEO и универсального SSR.
Создание приложения Nuxt и настройка каталога
Сначала убедитесь, что у вас установлен npx. В этой статье я использую npx версии 6.14.4. Приведенная ниже команда создаст каталог нашего проекта.
npx create-nuxt-app auth-app
Теперь в каталоге страниц удалите все, кроме index.vue.
Давайте создадим страницы для входа и регистрации.
cd pages touch login.vue signup.vue
На нашей странице входа в систему и регистрации будут формы для электронной почты и пароля. Данные со страниц используются firebase для аутентификации пользователя или создания нового пользователя. Итак, чтобы работать с firebase, нам нужно его инициализировать. Я использую firebase как услугу. Из корня нашего проекта перейдите в каталог services и создайте файл fireinit.js.
cd services touch fireinit.js
Я также создаю магазин Vuex для управления состоянием в нашем приложении.
cd store touch index.js
Наконец, мы создадим промежуточное ПО, которое проверяет наличие глобального пользователя.
cd middleware touch router-auth.js
Создайте страницы входа и регистрации
Для страниц входа и регистрации установите отметку HTML в тегах шаблона. Наша строка формы будет иметь метку и поле ввода.
<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"> <input id="email" type="email" class="form-control" name="email" value required autofocus v-model="form.email" /> </div> </div>
Убедитесь, что в верхней части формы входа нет authUser. Форма входа появляется, если пользователь не авторизовался.
<form v-if=”!authUser” action=”#” v-on:submit.prevent>
Если пользователь входит в систему, мы дадим возможность выйти из системы.
<div v-else> Welcome {{authUser}}, <button type=”submit” @click=”logout()” class=”btn btn- primary”>Logout</button> </div>
В signup.vue создайте форму и передайте эти данные функции signup.
<button @click=”signUp”>Sign Up</button>
Используйте v-модель для получения данных из полей ввода. После передачи пользовательских данных либо перехватите ошибки, либо создайте новую учетную запись с помощью функции createUserWithEmailAndPassword из аутентификации firebase. Убедитесь, что учетные данные пользователя хешированы, прежде чем сохранять их в базе данных.
signUp (){ firebase.default.auth().createUserWithEmailAndPassword(this.email,this.password).then((user) => { alert(‘Your account has been created !’) }, (err) => { alert(‘oops’ + err.message) } ) }
Реализация промежуточного программного обеспечения
Промежуточное ПО используется в нашем приложении, чтобы скрыть определенные данные или страницу в зависимости от состояния нашего магазина.
export default function ({ store, error }) { if (!store.state.authUser) { error({ message: ‘You are not connected’, statusCode: 403 }) } }
Если в штате нашего магазина нет пользователя, мы отображаем ошибку. Мы также можем использовать промежуточное ПО, когда службы требуют от пользователя входа в систему.
Инициализировать Firebase
import * as firebase from ‘firebase/app’ import ‘firebase/auth’ import ‘firebase/firestore’ import ‘firebase/database’ var config = { apiKey: ‘your api key’, authDomain: ‘domain’, databaseURL: , projectId: ‘yourprojectid’, storageBucket: ‘’, } !firebase.apps.length ? firebase.initializeApp(config) : ‘’ export const GoogleProvider = new firebase.auth.GoogleAuthProvider() export const auth = firebase.auth() export const DB = firebase.database() export const StoreDB = firebase.firestore() export default firebase
Здесь я инициализирую аутентификацию, базу данных и firestore. Пожалуйста, создайте новый проект в консоли firebase и добавьте к нему аутентификацию.
Магазин Nuxt
Теперь мы можем использовать нашу инициализированную базу firebase в качестве базы firebase в нашем проекте.
const firebase = require(‘../services/fireinit.js’); export const strict = false
В нашем состоянии мы будем хранить authUser и электронную почту.
export const state = () => ({ authUser: null, email: null })
Создайте мутации для настройки пользователя и электронной почты.
export const mutations = { SET_USER (state, user) { state.authUser = user }, SET_EMAIL (state, value) { state.email = value } }
Действиями в нашем магазине являются вход, выход и nuxtServerInit. Наше действие входа - это асинхронная функция, которая выполняет вход с помощью электронной почты и пароля пользователя. Он фиксируется на мутации, которая устанавливает адрес электронной почты и пользователя магазина.
async login ({ commit }, user) { firebase.default .auth() .signInWithEmailAndPassword(user.email, user.password) .then(function(firebaseuser){ commit(‘SET_USER’, firebaseuser) commit(‘SET_EMAIL’, firebaseuser.user.email) }) .catch((err) => { this.error = err.message; }); },
«Logout» - это асинхронная функция, которая выполняет выход текущего пользователя.
async logout ({ commit }) { firebase.default .auth() .signOut() .then(function() { commit(‘SET_USER’, null) commit(‘SET_EMAIL’, null) // Sign-out successful. }).catch(function(error) { // An error happened. }); }
Наконец, в наших действиях есть функция хранения файлов cookie. Каждый раз, когда сервер nuxt инициализируется, мы устанавливаем файлы cookie сеанса для пользователя сеанса.
nuxtServerInit ({ commit }, { req }) { if (req.session && req.session.authUser) { commit(‘SET_USER’, req.session.authUser) req.session.cookie=”” + req.session.authUser } }
Vuex на наших страницах входа и регистрации
import { mapState } from ‘vuex’
Внутри login.vue отобразите состояние карты, как показано ниже. Теперь мы можем использовать authUser внутри нашего login.vue.
computed: mapState({ authUser: state => state.authUser, mymail: state => state.email })
Создайте методы, которые вызывают действия входа и выхода из нашего магазина. Отправляем данные нашей формы в магазин. Если он проходит, появляется приветственное сообщение с предупреждением или обнаруживаются ошибки.
async login() { try { await this.$store.dispatch(‘login’, this.form) alert(“Welcome, you are logged in “) this.error = null } catch (e) { this.error = e.message } }, async logout () { try{ await this.$store.dispatch(‘logout’) alert(“User logout!”) } catch (e) { this.error = e.message } }
Поздравляю! У вас есть регистрация и страница входа. Удачи, добавляя дополнительные стили в ваш файл CSS!
Надеюсь, вам понравилась статья. Если у вас есть предложения или вопросы, дайте мне знать!