iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
1
Modern Web

到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站系列 第 23

【D23 - 用Vue實作網頁】Firebase說他還可以幫忙Authenticate?

不得不說firebase真的很厲害,或著說google大大很厲害XDXD。firebase除了可以做到realtime-databse, fire-store這類儲存功能之外,他還可以deploy網站,或著是Authentication

前言

在各位認知到firebase能做authentication有多麼厲害之前,我依樣要先帶大家看看如果要寫到後端會有多複雜!

  1. 首先先開啟一個後端專案
  2. 接著要定義user model(database)
  3. 然後我們要寫一個CRUD來去處理API
  4. 在這之前我們還要先知道一個東西叫做JWT~
    這個東西叫做web token,是一個代表你成功登入的憑證
  5. 開始寫前端,對接後端~
  6. 寫login from~ 定義發送API的按鈕

.
.
.
然後這叫做Login,希望各位不要忘記還有register, forget password, token expiration, logout等等的東西~ (各位之後也一定會遇到還要去分層admin/ normal user,就又更加頭疼了)! 一樣,我們保持著懶惰的初衷,我們把這些後端的東西全部交給firebase,讓他來負責handle所有的authentication~


Firebase Authentication

打開我們之前的專案~ 如果你有跟著前面幾堂firebase的話應該會有一個30-days專案。
https://ithelp.ithome.com.tw/upload/images/20200923/201297305Xy4djfbwx.jpg

好那接下來我們看左邊的導覽列有一個Authentication,點進去之後:
https://ithelp.ithome.com.tw/upload/images/20200923/20129730gUHMGuMHZS.jpg

Users

在這裡你會看到所有登入過你的網站的user, 還有他們的資料 (不包含他們度密碼喔~)

Sign-in Methods

這邊我們看到有一連串的好東西~ 像是有基本的email login, 還有facebook, github等等不同登入供應商的選擇。我們點選電子郵件\密碼那一欄:
https://ithelp.ithome.com.tw/upload/images/20200923/20129730kP74zU4BzY.jpg

點選第一個啟用,之後按下處存這樣就會發現我們已經成功啟用了email登入的功能囉~
https://ithelp.ithome.com.tw/upload/images/20200923/20129730M6Y4GZUGLx.jpg

Templates

這邊的話是設定當用戶登入時要到郵件信箱驗證的那封信的格式,除此之外還有當密碼要重設時,系統會寄到用戶信箱的信要長甚麼樣子

%DISPLAY_NAME%是一個dynamic的變數,根據你的名子變換~


接下來回到專案

明天我會帶大家做一套完整的:

  • Login
  • Logout
  • ForgetPassword
  • Register
  • Admin Panel

對地沒錯我會講到admin要怎麼做 (就是有成功登入地人才能看到的頁面),重點是這些東西跟功能firebase一手包辦!!!,完全不需要寫到後端,只需要在前端敲敲鍵盤真的很開心XDXD

先看看login

基本上我們剛剛在firebase已經開好了authentication的功能~ 那你會訝異那我們要怎麼去拿取這些資料? 或著是要怎麼使用這些功能?

首先我們到firebaseConfig.js~在db上面多加一行:

export const firebaseAuth = firebase.auth();
export const db = firebase.firestore();

好的那我們之後就可以直接使用firebaseAuth來使用裡面的功能,取用裡面的資料了:)

再來我們可以創一個login.vue (建議先不要創~明天再一起連著UI一起建立就好),在<script>的地方我們要先import 剛剛那個firebaseAuth進來~

import {firebaseAuth}from "@/config/firebaseConfig.js";

假設今天要login,那我們拿到user password, account之後,可以直接在底下methods地方這樣寫:

userLogin() {
       firebaseAuth
        .signInWithEmailAndPassword(this.user.email, this.user.password)
        .then(() => {
            this.$router.push('/admin')
        })
        .catch((error) => {
          alert(error.message);
        });
    }

signInWithEmailAndPassword: 這個就是告訴firebase authenticatoin說我要拿這組資料來login,firebase就會到後台去看看這組資料是否有註冊過了? 如果有的話就註冊成功並導入admin畫面,沒有的話就會把error資料報給你!


後記

今天先講一下firebase authentication 基本概念,因為明天就基本上純coding,也比較多使用到firebase原生function~ 如果你之後有需要登入註冊介面的! 那明天的文章絕對不能錯過喔~

明天見啦~ 掰
/images/emoticon/emoticon24.gif


上一篇
【D22 - Dynamic & Async】ㄟ~組件你不要給我亂動!
下一篇
【D24 - 用Vue實作網頁】一天搞定登入+註冊+登出
系列文
到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言