Firebase 教學 - 簡單的使用者註冊功能
Firebase 提供了很強大又簡單的後端功能,其中一項就是「註冊使用者」,這篇文章將會使用 RealTime Database 實作一個簡單的使用者註冊畫面,註冊後會紀錄使用者所儲存的相關資訊。
啟用使用者功能
延續「Firebase 教學 - RealTime Database 安裝與使用 」裡建立的專案,進入管理畫面後,點選左側選單 Authentication 可以看到使用者認證相關選項,點選上方「登入方式」頁籤,這裡採用「電子郵件/密碼」作為登入的依據。
點選後方的鉛筆圖示,啟用「使用者能夠透過電子郵件和密碼註冊」。
啟用後,除了可以讓使用者自行創建帳號密碼外,也可以點選上方「使用者」頁籤,手動添加使用者,這裡我添加了一個帳號為 test@test.com 的使用者,添加後亦可看到使用者的 uid。
網頁初始化 auth 功能
要使用 RealTime Database auth 功能需要載入對應的 js,這裡直接使用 google 提供的連結。
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
接著在 JavaScript 中撰寫下面這段初始化的程式碼,並宣告變數 database 為 firebase 的 realtime database。
firebase.initializeApp({
apiKey: "apiKey",
authDomain: "XXXXX.firebaseapp.com",
databaseURL: "https://XXXXX.firebaseio.com/"
});
const database = firebase.database();
在初始化裡的apiKey
和authDomain
兩個屬性,authDomain
為專案的名稱,apiKey
就是 Authentication 「一般」頁籤裡的「網路 API 金鑰」。
萬一這組網路金鑰被別人知道了,可以進入 Google Cloud Platform,選擇專案,展開左側選單後點選「API 和服務」進行修改。
點選「API 和服務」後,左側點選「憑證」,再點選「憑證頁籤」,按下「建立憑證」,選擇「API」金鑰即可建立新的網路金鑰。
使用者註冊帳號
初始化完成後,就來透過 auth 實作一個簡單的註冊功能:「當使用者註冊時會透過 firebase 將 uid 當作節點,紀錄註冊的時間與 email」,首先設計一下註冊畫面的 HTML,裡頭只需要一個帳號和密碼的輸入欄位、一個送出的按鈕、和一個顯示訊息的文字區域。
<h2>註冊新帳號</h2>
帳號:<input id="email">
密碼:<input id="pwd" type="password">
<button id="submit">註冊</button>
<h3 id="message"></h3>
接著撰寫 Javascript,使用auth().createUserWithEmailAndPassword
建立使用者,建立完成後寫入第一筆資料到 Firebase Realtime database 裡,第一筆資料的節點為 uid,內容則是 email 與註冊當下的時間。( auth()
支援 ES6 Promise 的寫法 )
透過
auth()
註冊使用者後會直接登入,如果有出現錯誤,可透過.catch
來回報錯誤訊息。
// 初始化
const config = {
apiKey: "apiKey",
authDomain: "XXXXX.firebaseapp.com",
databaseURL: "https://XXXXX.firebaseio.com/"
};
firebase.initializeApp(config);
const database = firebase.database();
// 綁定註冊按鈕的點擊事件
submit.addEventListener('click', () => {
// 點擊註冊按鈕時,紀錄使用者輸入的帳號密碼
let user = {
email: email.value,
pwd: pwd.value
};
// 透過 auth().createUserWithEmailAndPassword 建立使用者
firebase.auth().createUserWithEmailAndPassword(user.email, user.pwd)
.then(u => {
// 取得註冊當下的時間
let date = new Date();
let now = date.getTime();
// 記錄相關資訊到 firebase realtime database
database.ref(u.uid).set({
signup: now,
email: user.email
}).then(() => {
// 儲存成功後顯示訊息
message.innerHTML = 'User created successfully';
});
}).catch(err => {
// 註冊失敗時顯示錯誤訊息
message.innerHTML = err.message;
});
});
進入 Firebase Realtime database 的專案,設定規則如下,這個規則會禁止整份資料的讀取,但如果知道節點名稱就可讀取,如果使用者是登入狀態 ( 具備 uid ) 就可以寫入。
{
"rules": {
".read": false,
".write": false,
"$data": {
".read": true,
".write": "!data.exists()",
}
}
}
設定完成後執行網頁,輸入使用者帳號和密碼,按下註冊,就會看見 Firebase 資料庫裡多出一筆資料,網頁上也會顯示註冊成功的資訊。
點選左側選單 Authentication,就會發現畫面中已經增加了一名使用者。
小結
透過 Firebase,要實現簡單的註冊機制是相當容易的,搭配 Firebase RealTiem Database 更是可以做到許多基本後端功能,就能繼續實現更多登入後的應用囉!
更多參考:firebase.auth.Auth