Vue / Firebase Auth
Немного про Firebase, а также про Firebase Auth во Vue, точнее в Nuxt
Firebase - BAAS (Backend As A Service) решение от Google, тут есть всё необходимое для разработки приложений, например, бд, аутентификация, cdn и тд.
Рассмотрим один из сервисов Firebase - Firebase Auth - сервис для аутентификации (другие в вебчике пока не трогал).
Преимущество Firebase Auth - поддержка множества вариантов аутентификации: через Google, через Facebook, через почту, через телефон и тд.
Настройка Firebase стаффа
- Заходим в Firebase Console и создаем проект:
- Создаем приложение типа Web, после создания которого получаем доступы для подключения Firebase JS SDK:
- Наконец, подключаем аутентификацию через Google:
- Мы работаем с Nuxt.js, для него есть либа для работы с Firebase - Nuxt Firebase; ставим Firebase JS SDK + либу:
npm i firebase @nuxtjs/firebase
- В
nuxt.config.js
пишем доступы, полученные ранее + подключаем сервисы, с которыми будем работать (в нашем случаем - это Firebase Auth):
modules: [
[
'@nuxtjs/firebase',
{
config: {
apiKey: '<apiKey>',
authDomain: '<authDomain>',
projectId: '<projectId>',
storageBucket: '<storageBucket>',
messagingSenderId: '<messagingSenderId>',
appId: '<appId>',
measurementId: '<measurementId>'
},
services: {
auth: true
}
}
]
],
- (опционально) Можно добавить TypeScript определения типов для
nuxt-firebase
, для этого вtsconfig.json
вtypes
пишем типы:
"types": [
...
"@nuxtjs/firebase",
]
Всё, можно, начинать работать с Firebase Auth.
Работа с Firebase Auth
Помимо того, что в Firebase всё есть, с этим еще и просто работать. Убедимся в этом на примере аутентификации через Google.
- Определим кнопочку, которая по клику будет открывать окошко с Google-аутентификацией:
<template>
<div class="flex justify-center items-center h-screen">
<div>
<div class="text-center border rounded cursor-pointer py-2" @click="auth">
Войди в меня
</div>
<textarea class="w-96 h-52 ">{{ user }}</textarea>
</div>
</div>
</template>
user
- это данные о юзере, полученные в результате аутентификации; изначально =null
- (классы, указанные в div-ах, - это TailwindCSS-классы)
- Пишем код для Google-аутентификации:
<script lang="ts">
import {Component, Vue} from "nuxt-property-decorator";
import firebase from "firebase";
@Component({})
export default class index extends Vue {
user: object | null = null;
async auth() {
// Если юзер уже вошел - то выходим из метода
this.user = this.$fire.auth.currentUser;
if (this.user) return;
const provider = new firebase.auth.GoogleAuthProvider();
await this.$fire.auth.signInWithPopup(provider);
this.user = this.$fire.auth.currentUser;
}
}
</script>
- Либа
nuxt-firebase
инжектит в Nuxt-context (this
) поле$fire
, которое предоставляет доступ к Firebase-сервисам $fire.auth
содержит методsignInWithPopup
, который выводит попап с формочкой аутентификации; формочка предоставляется провайдером, соответственно для Google-аутентификации, это будетGoogleAuthProvider
- После успешной аутентификации, данные о входе записываются в память браузера; получить их можно из
$fire.auth.currentUser
- (используется TypeScript-обертка над Nuxt)
Всё, в пару строчек получили кнопку для аутентификации через Google!
Ссылочки
- Nuxt Firebase
- Вход через попап
- Еще есть какой-то firebase-ui - типа уже сразу набор кнопочек для входа, но чет запарно интегрировать в Nuxt
- Вот есть гайдик по интеграции в Nuxt, но он не использует
nuxt-firebase
- Вот есть гайдик по интеграции в Nuxt, но он не использует