Firebase 教學 - 簡單的使用者註冊功能

Firebase 提供了很強大又簡單的後端功能,其中一項就是「註冊使用者」,這篇文章將會使用 RealTime Database 實作一個簡單的使用者註冊畫面,註冊後會紀錄使用者所儲存的相關資訊。

啟用使用者功能

延續「Firebase 教學 - RealTime Database 安裝與使用 」裡建立的專案,進入管理畫面後,點選左側選單 Authentication 可以看到使用者認證相關選項,點選上方「登入方式」頁籤,這裡採用「電子郵件/密碼」作為登入的依據。

Firebase 教學 - 簡單的使用者註冊功能

點選後方的鉛筆圖示,啟用「使用者能夠透過電子郵件和密碼註冊」。

Firebase 教學 - 簡單的使用者註冊功能

啟用後,除了可以讓使用者自行創建帳號密碼外,也可以點選上方「使用者」頁籤,手動添加使用者,這裡我添加了一個帳號為 test@test.com 的使用者,添加後亦可看到使用者的 uid。

Firebase 教學 - 簡單的使用者註冊功能

網頁初始化 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();

在初始化裡的apiKeyauthDomain兩個屬性,authDomain為專案的名稱,apiKey就是 Authentication 「一般」頁籤裡的「網路 API 金鑰」。

Firebase 教學 - 簡單的使用者註冊功能

萬一這組網路金鑰被別人知道了,可以進入 Google Cloud Platform,選擇專案,展開左側選單後點選「API 和服務」進行修改。

Firebase 教學 - 簡單的使用者註冊功能

點選「API 和服務」後,左側點選「憑證」,再點選「憑證頁籤」,按下「建立憑證」,選擇「API」金鑰即可建立新的網路金鑰。

Firebase 教學 - 簡單的使用者註冊功能

使用者註冊帳號

初始化完成後,就來透過 auth 實作一個簡單的註冊功能:「當使用者註冊時會透過 firebase 將 uid 當作節點,紀錄註冊的時間與 email」,首先設計一下註冊畫面的 HTML,裡頭只需要一個帳號和密碼的輸入欄位、一個送出的按鈕、和一個顯示訊息的文字區域。

<h2>註冊新帳號</h2>
帳號:<input id="email">
密碼:<input id="pwd" type="password">
<button id="submit">註冊</button>
<h3 id="message"></h3>

Firebase 教學 - 簡單的使用者註冊功能

接著撰寫 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 ) 就可以寫入。

可參考 Firebase 教學 - RealTime Database Rules ( 規則 )

{
  "rules": {
    ".read": false,
    ".write": false,
    "$data": {
      ".read": true,
      ".write": "!data.exists()",
    }
  }
}

Firebase 教學 - 簡單的使用者註冊功能

設定完成後執行網頁,輸入使用者帳號和密碼,按下註冊,就會看見 Firebase 資料庫裡多出一筆資料,網頁上也會顯示註冊成功的資訊。

Firebase 教學 - 簡單的使用者註冊功能

點選左側選單 Authentication,就會發現畫面中已經增加了一名使用者。

Firebase 教學 - 簡單的使用者註冊功能

小結

透過 Firebase,要實現簡單的註冊機制是相當容易的,搭配 Firebase RealTiem Database 更是可以做到許多基本後端功能,就能繼續實現更多登入後的應用囉!

更多參考:firebase.auth.Auth

有興趣瞧瞧其他新文章嗎?