用 Firebase Authentication 做一套簡易會員系統 – 電子郵件 密碼

/

本篇要解決的問題

之前原本要幫朋友寫一個隱藏性的頁面,只開放給有權限的人才看得到。雖說 HTML 可以加上禁止搜尋引擎收錄的 meta,但如果蜘蛛硬要收也沒什麼辦法,最好的還是加上註冊、登入的功能,判斷是會員才開放觀看。

以前有寫過一篇用 Auth0 做一套,但如果還需要有個資料庫來用,使用這二個功能都有的 Firebase 會更方便些。

雖然後來沒實際用到,但 Firebase Authentication 的文件看都看了,就做了一個 Demo,並寫下這篇來筆記使用的方法,下次要用到時回頭看會更容易想起來。

本篇的 Demo 在這,原始碼的連結會附在最後一段。

https://letswritetw.github.io/letswrite-firebase-auth/

本篇主要是用帳號、密碼的方式,不含第三方登入。如果想看第三方登入的部份,Google、Facebook 的已寫在這篇:Firebase Authentication 第三方登入 – Google、FB

以下將「Authentication」簡寫為「Auth」。


建立 Firebase 專案、應用程式

登入 Google 帳號後,進到 Firebase 的頁面就可以新增專案。

專案新增完,首頁上會看到需要新增應用程式的訊息,點擊表示「網頁」的 icon 就會開始新增:

新增 Firebase 專案應用程式
新增 Firebase 專案應用程式

輸入完應用程式暱稱並新增完成後,會看見我們頁面上要引用的 Firebase SDK:

Firebase SDK
Firebase SDK

我們複制這一段的程式碼,貼在我們的 HTML 檔案上,照說明貼在 <body> 的段後面即可。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

除了第一行引用的 firebase-app.js,Auth 的功能還要再多引用一個 firebase-auth.js,整個引用 SDK 的程式碼會像這樣:


開通 Authentication 功能

Firebase 專案及應用程式建立完後,從左側選單點擊「Authentication」,接著右側會出現「設定登入方式」的按鈕:

Authentication 首頁
Authentication 首頁

點擊「設定登入方式」的按鈕,就會看見頁面上洋洋灑灑地列了 Firebase 可用的各種註冊會員方式:

Firebase 有的註冊方式
Firebase 有的註冊方式

本篇主要筆記「帳號、密碼」的方式,因此點擊第一個「電子郵件/密碼」,會展開選項:

電子郵件/密碼 選項
電子郵件/密碼 選項

把第一個按鈕改成「啟用」,按下儲存,就開通了這功能。

頁面再往下拉,會看見「已授權網域」的列表:

已授權網域列表
已授權網域列表

這邊指的是在哪些網域下才可以使用 Firebase Auth 功能,一個白名單的概念,不在這份列表內的網域會一律報錯。

預設有一組 localhost,這是為了給我們開發時使用,功能要正式上線時記得刪除。

要新增網域,只要點擊右上角的「新增網域」:

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

點擊新增網域後,出現 input 填寫
點擊新增網域後,出現 input 填寫

接著填我們的網域在輸入框上,按下「新增」即可。

經過第一步的引用 SDK,第二步的開啟 Auth 功能及設定可使用的網域,後面就是要寫程式碼來使用。


註冊、登入

跟使用第三方登入不一樣,註冊、登入的 function 必須分開執行。

如果末註冊,就不能使用登入;如果已註冊,就不能用註冊的 function 執行登入。

註冊

註冊、登入,需要二個值:帳號(email)、密碼。

註冊的程式碼如下:

註冊成功,會回傳使用者的資料,以及註冊方式,截圖如下:

註冊後取得的使用者資料
註冊後取得的使用者資料

程式碼中 catch error 的部份,在測試時故意把密碼只打「123」,也會回 error 說至少 6 碼。所以它的錯誤主要就是註冊不成功的訊息。

登入

登入跟註冊很像,都是取使用者輸入的 email、密碼後,執行 Firebase 的 function:

登入後會取到的資料,跟註冊後的一樣,這邊就不再截圖。


取得使用者資訊

使用者登入了以後,再進到站內的其它頁面時,還是可以抓登入的狀態及資料。

另外也有更簡單的方法取得使用者登入狀態及資料:

不過就像文件上說的:

currentUser也可能為 null,因為 auth 對象尚未完成初始化。 如果使用觀察者(onAuthStateChanged)來跟踪用戶的登錄狀態,則無需處理這種情況。

獲取當前登錄的用戶

實際在用的時候,Augustus 比較常使用 onAuthStateChanged 來抓登入資訊。


登出


重新驗證使用者

一些跟使用者相關的重要操作,像是改密碼、刪帳號等,好的 UX 是讓使用者再重新輸入密碼一次,再次驗證是使用者本人使用該功能,雖然麻煩,但是可以提昇安全性。

比方說今天小明在本站登入了會員,因為有事離開了一下座位,這時小華跑到了他的電腦前,想讓小明這輩子都別想再登入本站,打算想偷幫小明改密碼,讓他登不進去。

這個摸門,如果本站沒有設定改密碼前再重新輸入一次舊密碼做驗證,我們的小華同學就會得逞,然後小明同學就會認為資安有問題,連個基本驗證都沒有,就不會再來,錯失了以後的互動機會。

但相反的,如果有先設需要舊密碼驗證,小華就會無法偷改密碼,那小明的一天又平安的過去了,會感謝本站的努力。

除了修改密碼,刪除帳號也是如此。

因為有安全性的考量,Firebase Auth 就有讓使用者重新驗證的 function,文件上的程式碼如下:

如果照貼的話就會發現報錯,因為文件上沒有寫怎麼取得 credential

後來在 stackoverflow 上找到了取得 credential 的方法,整理一下後,讓使用者重新驗證的程式碼如下:


修改資料

用帳密進行 Auth 跟用第三方不一樣,第三方登入,比方用 Google,因為使用者會先在 Google 設定大頭照跟名稱,因此用第三方登入的話預設就可以取得大頭照及名稱。

但用 email 註冊則沒有,只會有 uid 跟 email,不過可以請使用者補資料,Firebase Auth 有 function 可以補上。


修改密碼、刪除帳號

因為修改密碼、刪除帳號,都必須要重新驗證一次使用者,因此整理在一起。

首先,我們可以把上面「重新驗證使用者」的程式碼包成一個 Promise

這樣需要驗證使用者時,只要執行 reAuth 就行了。

修改密碼

修改密碼如果照 文件 上的寫會報錯,因此這邊改用上面提到的 stackoverflow 那篇,改成以下:

刪除帳號


修改發信模版

後面二段的「信箱驗證、忘記密碼」都會用到發信的功能,因此這段先寫。

進到 Firebase 的後台,選好專案後,點擊左側「Authentication」,點擊右側的「Templates」,就會看見發信跟發簡訊的模版:

點 Authentication > Templates,可以看見發信及簡訊模版
點 Authentication > Templates,可以看見發信及簡訊模版

預設語言是英文,點擊左下角「範本語言」就可以做切換。

切換範本語言
切換範本語言

可以在這邊修改發信中的主旨,也可以修改寄件者、自訂網域。

但上面說為避免被歸在垃圾信箱,因此無法修改內文。


信箱驗證

對於用信箱來認定會員,最重要的就是信箱是不是真實為使用者擁有的,因此驗證信箱這步很重要,可以確認使用者的信箱確實存在。

在讀取使用者資訊時,有一個 emailVerified,Boolean 值,為 false 代表信箱未驗證,true 則是已驗證。

發送驗證信的程式碼:

使用者收到信,點擊信內連結,成功的話會看到成功的訊息:

信箱驗證成功
信箱驗證成功

然後我們抓 user.emailVerified 的值就會是 true

另外,即便我們在 Firebase 後台上改了信件的語系,也可以在發信時透過程式碼修改信件語言:

firebase.auth().languageCode = 'zh-TW';

忘記密碼

忘記密碼的部分,需要使用者填寫當時註冊的 email,確實是有該帳號存在,才會寄改密碼的信給使用者。

當 function 執行完,使用者會收到信件,點開信件的連結就會進到一個輸入新密碼的頁面:

輸入新密碼
輸入新密碼

修改完成後會看到已變更的頁面:

密碼變更完成
密碼變更完成

Demo 及原始碼

把本篇所用到的功能,做了一個簡單的 Demo 出來,大家測試以後記得最後要刪掉帳號。

Demo 網址如下:

https://letswritetw.github.io/letswrite-firebase-auth/

Demo 用的原始碼也放到了 GitHub 上,網址如下:

https://github.com/letswritetw/letswrite-firebase-auth

Summary
用 Firebase Authentication 做一套簡易會員系統 - 電子郵件 密碼
Article Name
用 Firebase Authentication 做一套簡易會員系統 - 電子郵件 密碼
Description
本篇大綱:本篇要解決的問題。建立 Firebase 專案、應用程式。開通 Authentication 功能。註冊、登入。取得使用者資訊。登出。重新驗證使用者。修改資料。修改密碼、刪除帳號。修改發信模版。信箱驗證。忘記密碼。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Bot Telegram

Telegram Bot 學習筆記 – 3:鍵盤 keyboard

Front-End

用純 CSS 寫的網頁預覽效果

API

接氣象局 API、跨網域 AJAX 資料

WordPress

Ubuntu 安裝 WordPress – 1:VirtualBox、Ubuntu 20.04

Vue

Vue.js 用 computed 跟 filter 做一個簡易搜尋功能

Firebase Google

Firebase Cloud Functions 基本使用筆記

PWA

PWA學習筆記-1:cache、workbox基本使用

Bot Telegram

Telegram Bot 學習筆記 – 5:取得使用者大頭照

Front-End

TestCafe 學習筆記 – 2:常用設定及功能

Google Others

用 reCAPTCHA v3 來做非機器人驗證

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.