Vue / Firebase Auth

Немного про Firebase, а также про Firebase Auth во Vue, точнее в Nuxt

Firebase - BAAS (Backend As A Service) решение от Google, тут есть всё необходимое для разработки приложений, например, бд, аутентификация, cdn и тд.

Рассмотрим один из сервисов Firebase - Firebase Auth - сервис для аутентификации (другие в вебчике пока не трогал).

Преимущество Firebase Auth - поддержка множества вариантов аутентификации: через Google, через Facebook, через почту, через телефон и тд.

Настройка Firebase стаффа

  1. Заходим в Firebase Console и создаем проект:
Firebase Console
Firebase Console
Обзываем проект
Обзываем проект
Подключаем Google Analytics
Подключаем Google Analytics
Выбираем дефолтовый GA-акк
Выбираем дефолтовый GA-акк
  1. Создаем приложение типа Web, после создания которого получаем доступы для подключения Firebase JS SDK:
Обзываем приложение
Обзываем приложение
Получаем доступы
Получаем доступы
  1. Наконец, подключаем аутентификацию через Google:
Панель провайдеров аутентификации
Панель провайдеров аутентификации
  1. Мы работаем с Nuxt.js, для него есть либа для работы с Firebase - Nuxt Firebase; ставим Firebase JS SDK + либу:
npm i firebase @nuxtjs/firebase
  1. В 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
      }
    }
  ]
],
  1. (опционально) Можно добавить TypeScript определения типов для nuxt-firebase, для этого в tsconfig.json в types пишем типы:
"types": [
  ...
  "@nuxtjs/firebase",
]

Всё, можно, начинать работать с Firebase Auth.

Работа с Firebase Auth

Помимо того, что в Firebase всё есть, с этим еще и просто работать. Убедимся в этом на примере аутентификации через Google.

  1. Определим кнопочку, которая по клику будет открывать окошко с 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-классы)
  1. Пишем код для 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!

Ссылочки