Firebase Auth с помощта на Vue.js

Firebase предоставя много лесен и бърз начин за добавяне на удостоверяване към вашето Vue.js приложение. В тази статия ще ви покажа колко лесно е да позволите на потребителите да се регистрират във вашето приложение, като използват своя имейл и парола.

Как да създадем нашия проект

Ще използвам Vue CLI, за да начертая проект, с който да започнем. За да направите това, трябва да имате инсталиран Vue CLI на вашата система. Ако НЕ го имате инсталиран, можете да го инсталирате глобално с тази команда:

npm install -g @vue/cli

Сега можем да използваме Vue CLI, за да създадем нашия проект. Създайте нов проект, като използвате тази команда:

vue create vue-firebase-auth-tutor

Ще бъдете помолени да изберете предварително зададена настройка. Изберете „Ръчно избиране на функции“ и след това изберете „babel“, „Router“ и „Linter / Formatter“.

Ще бъдете попитани дали искате да използвате режим на история за рутера. Изберете „Да“ (трябва да е по подразбиране).

Можете да изберете всеки линтер, който искате, но за този урок аз ще избера „Eslint + Prettier“.

След като Vue CLI приключи, той ще ви даде командите за промяна в новата директория, която току-що беше създадена, и командата за стартиране на сървъра. Следвайте тези указания.

След като сървърът се стартира, можете да отворите браузъра си до localhost:8080. Трябва да видите това:

Firebase

За този урок предполагам, че вече сте създали акаунт във Firebase. Ако не, трябва да го направите, преди да продължите.

Ние ще използваме Firebase SDK в нашето приложение, за да предоставим функцията за удостоверяване. Можете да инсталирате Firebase във вашето приложение, като използвате тази команда:

npm install firebase

Как да създадете проекта във Firebase

Следващата стъпка е да добавите проект във вашата Firebase конзола. Влезте във вашата Firebase конзола. Щракнете върху бутона, за да добавите нов проект.

Ако искате да добавите Google Analytics към вашия проект, можете, но аз няма да го добавя за този урок. Щракнете върху бутона „Създаване на проект“.

След като Firebase създаде вашия нов проект, ще трябва да добавите Firebase към приложението си. Кликнете върху иконата на уеб.

Ще бъдете помолени да въведете псевдоним за вашето приложение. Въведох псевдоним на „Vue Firebase Auth Tutorial“. След като въведете своя псевдоним, щракнете върху бутона „Регистриране на приложението“.

За стъпка 2 той ще ви предостави инструкции за добавяне на Firebase SDK към вашето приложение. Трябва само да копираме firebaseConfig и реда за инициализиране на приложението.

Отворете своя файл main.js. Ще инициализираме Firebase в нашето приложение Vue. Под съществуващите редове за импортиране поставете firebaseConfig и реда за инициализиране на приложението. Ще трябва да добавите импортиране за Firebase. Вашият файл main.js трябва да изглежда така:

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import firebase from "firebase";
var firebaseConfig = {
  apiKey: "YourConfigHere",
  authDomain: "YourConfigHere",
  projectId: "YourConfigHere",
  storageBucket: "YourConfigHere",
  messagingSenderId: "YourConfigHere",
  appId: "YourConfigHere"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
Vue.config.productionTip = false;
new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

Как да зададете метода на удостоверяване

Отворете конзолата на Firebase в браузъра си. От конзолата намерете проекта, който току-що създадохте, и щракнете върху него.

В горната част на навигацията отляво щракнете върху Удостоверяване.

Щракнете върху бутона „Първи стъпки“.

От менюто за удостоверяване щракнете върху раздела „Метод за влизане“.

Задръжте курсора на мишката върху първия запис „Имейл/Парола“. Кликнете върху иконата на молив, за да отворите диалогов прозорец. Изберете активиране.

Кликнете върху бутона „Запазване“. Вече добавихте възможността да създавате и удостоверявате потребители, като използвате техния имейл адрес и парола.

Как да добавите нови компоненти

Когато създадохме нашето приложение с Vue Router, той автоматично създаде два маршрута за нашето приложение — Home и About. Ще използваме Начало като вход за нашето приложение. Ще използваме Информация като страница за регистрация като нов потребител за нашето приложение.

Когато регистриран потребител влезе в нашето приложение, искаме да му покажем страницата на таблото за управление. Също така искаме да предоставим начин за потребителя да излезе от нашето приложение. В момента нито една от тези опции не е налична в нашето приложение, така че нека ги добавим сега.

Отворете файла App.vue. В момента навигацията има два записа за Начало и Информация. Ще променим About to be register и ще добавим два нови записа за Табло за управление и Изход. Актуализирайте навигацията си, така че да изглежда така:

<div id="nav">
  <router-link to="/">Home</router-link> |
  <router-link to="/register">Register</router-link> |
  <router-link to="/dashboard">Dashboard</router-link> |
  <button @click="logout">Logout</button>
</div>
<router-view />

Когато щракнете върху бутона за излизане, той извиква метода за излизане. Ще го дефинираме по-късно.

Как да създадем нашия компонент за влизане

Отворете файла Home.vue в папката с изгледи. Изтрийте целия HTML код в секцията с шаблони. Заменете го с този код, който предоставя много елементарен формуляр за влизане. Ето кода:

<div>   
  <form @submit.prevent="login">     
    <h2>Login</h2>     
    <input       
      type="email"       
      placeholder="Email address..."       
      v-model="email"     
    />     
    <input       
      type="password"       
      placeholder="password..."       
      v-model="password"     
    />     
    <button type="submit">
       Login
    </button>   
  </form> 
</div>

Сега, ако прегледате нашето приложение, ще видите формата за вход на началната страница по следния начин:

Нашата форма е малко претъпкана с полетата за въвеждане и бутоните, които се допират един до друг. Можем да променим това, като добавим малко CSS стил. Можем да добавим CSS стила във файла Home.vue.

Тъй като ще използваме същата тази форма за регистриране на потребител, ще трябва да дублираме същия CSS стил в този компонент. Така че вместо това можем да поставим стил във файла App.vue и той ще стилизира както нашите формуляри за влизане, така и за регистрация.

Отворете файла App.vue. В стила добавете това:

input {   
  margin-right: 20px; 
}

Сега нашата форма за вход изглежда по-добре.

Как да създадем нашия регистрационен формуляр

Отворете файла About.vue в папката с изгледи. Можете да копирате HTML кода от файла Home.vue и да го поставите в този файл. Променете всяка препратка към Вход на Регистрация. Вашият файл About.vue трябва да изглежда така:

<div>
  <form @submit.prevent="register">
    <h2>Register</h2>
    <input
      type="email"
      placeholder="Email address..."
      v-model="email"
    />
    <input
      type="password"
      placeholder="password..."
      v-model="password"
    />
    <button type="submit">Register</button>
  </form>
</div>

Как да актуализираме нашите маршрути

В момента URL адресът за показване на нашата страница за регистрация е /about. Нека променим това на /register. Отворете файла index.js в папката на рутера. Променете втория маршрут за /about на /register. Вашият масив от маршрути трябва да изглежда така:

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home,
    },
    {
        path: '/register',
        name: 'Register',
        component: () =>
            import(/* webpackChunkName: "about" */ '../views/About.vue'),
    },
];

Докато сме в този файл, нека да добавим запис за показване на нашия компонент на таблото. Добавете трети маршрут за показване на /dashboard. Вашият масив от маршрути сега трябва да изглежда така:

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home,
    },
    {
        path: '/register',
        name: 'Register',
        component: () =>
            import(/* webpackChunkName: "about" */ '../views/About.vue'),
    },
    {
        path: '/dashboard',
        name: 'Dashboard',
        component: () =>
            import(/* webpackChunkName: "dashboard" */ '../views/Dashboard.vue'),
    },
];

Как да създадете компонент на таблото за управление

Създайте нов файл, наречен Dashboard.vue в папката с изгледи. Тази страница трябва да се вижда само от потребители, които са влезли в нашето приложение.

В раздела за шаблони добавете следния HTML код, който казва това.

<div>
  <h2>Dashboard</h2>
  <p>This page is only visible to users that are currently logged in</p>
</div>

Как да регистрирате потребители

По-рано, когато актуализирахме файла About.vue, за да регистрираме потребители, имахме извикване на метод, наречен Register. Трябва да добавим функционалност за регистриране на нови потребители.

Първо нека разгледаме Документацията на Firebase за това как да създадете акаунт, базиран на парола. Firebase Auth има метод, наречен createuserWithEmailAndPassword. Трябва да въведете имейла и паролата на потребителя. Този метод или ще регистрира потребителя и ще върне потребителски обект, или ще върне съобщение за грешка. Нека приложим този метод сега.

Отворете файла About.vue. Трябва да добавим имейл и парола към нашия обект с данни. В секцията на вашия скрипт добавете следния обект с данни:

data() { 
  return { 
    email: '', 
    password: '', 
  }; 
},

След това добавете обект с методи с един метод, наречен register. Можем буквално да копираме примера от документацията на Firebase за този метод. Ще трябва да направим следните промени в кода от документацията:

• Няма да използваме потребителския обект
• Показване на предупреждение, ако влизането е неуспешно
• Ако потребителят е регистриран, пренасочете го към страницата за вход

Ето кода за метода за регистриране:

methods: {
  register() {
    firebase
      .auth()
      .createUserWithEmailAndPassword(this.email, this.password)
      .then(() => {
        alert('Successfully registered! Please login.');
        this.$router.push('/');
      })
      .catch(error => {
        alert(error.message);
      });
  },
},

Нека тестваме регистрирането на първия ни потребител за нашето приложение. Кликнете върху Регистрация в навигацията. Въведете имейл адрес и парола и щракнете върху бутона Регистрация.

Ако потребителят е регистриран успешно, трябва да получите предупреждение и да бъдете пренасочени към страницата за вход.

Ако регистрацията е неуспешна, трябва да получите предупреждение със съобщение за грешка.

За да проверите дали потребителят е регистриран успешно, отидете на конзолата на Firebase и щракнете върху вашия проект. В навигацията отляво щракнете върху Удостоверяване. След това щракнете върху раздела Потребители. Ще видите своя потребител в списъка:

Сега, след като успешно внедрихме регистриране на нови потребители за нашето приложение, трябва да приложим възможността потребителите да влизат.

Как да влезете потребители

Използвахме кода, предоставен от Firebase, за да регистрираме нов потребител. На страницата с документация на Firebase той предоставя примерен код за влизане на потребител с имейл адрес и парола. Методът за удостоверяване на Firebase, който ще използваме, е signInWithEmailAndPassword.

Подобно на Register, ние ще направим същите промени в примерния код. Ще предупредим потребителя, ако е влязъл успешно и ще го пренасочим към страницата Табло за управление.

Ако влизането е неуспешно, показваме предупреждение със съобщение за грешка.

Ето метода за влизане, който трябва да имате във вашия файл Home.vue.

methods: {
  login() {
    firebase
      .auth()
      .signInWithEmailAndPassword(this.email, this.password)
      .then(() => {
        alert('Successfully logged in');
        this.$router.push('/dashboard');
      })
      .catch(error => {
        alert(error.message);
      });
  },
},

Как да създадете охрана на маршрута

Не искаме потребителите да могат да навигират до /dashboard, освен ако не са влезли. Можем да направим това, като добавим защита на маршрута за /dashboard.

Отворете файла index.js в папката на рутера. Ще добавим мета ключ към маршрута /register, който ще казва, че се изисква удостоверяване. Ето актуализирания маршрут:

{
  path: '/dashboard',
  name: 'Dashboard',
  component: () =>
    import(/* webpackChunkName: "dashboard" */ '../views/Dashboard.vue'),
  meta: {
    authRequired: true,
  },
},

Преди Vue Router да обработи маршрут, той има метод, наречен beforeEach. Можем да проверим дали маршрутът изисква удостоверяване, като проверим мета стойността.

Ако се изисква удостоверяване, трябва да можем да проверим дали потребителят е влязъл или не. За щастие има обект currentUser във Firebase Auth. Ще използваме това, за да проверим дали потребителят е влязъл или не.

Ако в момента са влезли, ще покажем страницата Табло за управление.

Ако не, ние ще покажем предупреждение, казващо на потребителя, че трябва да влезе в системата, и ще го пренасочим към Началната страница, за да влезе.

Ето кода:

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.authRequired)) {
    if (firebase.auth().currentUser) {
      next();
    } else {
      alert('You must be logged in to see this page');
      next({
        path: '/',
      });
    }
  } else {
    next();
  }
});

Как да излезете от потребители

Последното нещо, което трябва да добавим към нашето приложение, е методът за излизане. Firebase Auth предоставя метод за излизане, който ще използваме.

Отворете файла App.vue. Ние ще излезем от потребителя. Ако успеят, те ще получат предупреждение и ще бъдат пренасочени към началната страница.

Ако излизането е неуспешно, показваме предупреждение със съобщение за грешка и ги пренасочваме към Началната страница.

Добавете този код за метода излизане:

methods: {
  logout() {
    firebase
      .auth()
      .signOut()
      .then(() => {
        alert('Successfully logged out');
        this.$router.push('/');
      })
      .catch(error => {
        alert(error.message);
        this.$router.push('/');
      });
  },
},

В кода по-горе ние използваме Firebase, но нямаме препратка към него в нашия файл index.js. Трябва да добавим това. Превъртете до горната част на файла, където са съществуващите редове за импортиране. Добавете този ред:

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";

Сега с това добавено можете да се упражнявате да регистрирате нов потребител. След това влезте с този потребител и проверете дали сте пренасочени към страницата Табло за управление. След това излезте и се уверете, че сте пренасочени към началната страница.

Поздравления — успешно добавихте Firebase Authentication към вашето Vue приложение!

Вземете кода

Имам пълния код в моя акаунт в GitHub тук. Ако получите кода, моля, направете ми услуга и означете със звезда моето репо. Благодаря ти!

Заключение

Firebase е много ефективен метод за добавяне на удостоверяване към вашите Vue приложения. Позволява ви да добавите удостоверяване, без да се налага да пишете своя собствена Backend услуга и сами да прилагате удостоверяване.

Надяваме се, че тази статия ви е харесала. Ако ви харесва, моля, споделете го. Благодаря за четенето.