摘要：今天第一期創建項目和用戶管理。我將使用端開發一個無后端的筆記應用。用戶大多數應用都需要了解用戶的身份。也可以使用屬性獲取當前已登錄的用戶。如果使用觀察程序跟蹤用戶登錄狀態，則無需處理該情況。

在構建自己的在線云工具應用時，我使用 Firebase 為自己的“無后端項目”提供服務，把在開發期間接觸到的一些內容整理在一起，制成系列筆記。這個過程有兩個好處：鞏固知識點，整理開發過程的思路。因為前端開發是自己所熟悉的領域，所以先從 Firebase 入手，將后端的一些知識點提前梳理理順，避免后續的學習過程中的卡殼而導致無法堅持。今天第一期：創建項目和用戶管理。

Firebase 原本是一家實時后端數據庫創業公司，為提供一個實時響應的數據服務。后被 Google 收購，該平臺適用在IOS、Android、web前端等各種跨平臺上，對于沒有數據庫處理經驗的開發者，只需使用自己熟悉的語言將數據放在Firebase上，再通過Firebase提供的API即可實現實時數據同步。同時 Google 在新版的 Firebase 中包含開發、成長與營收三階段，并整合分析工具，不過分析工具目前只針對移動 App，網頁的話可以繼續使用 Google Analytics。

何謂“實時數據庫”？簡單粗暴的理解就是，數據庫中數據的變動會互動通知到客戶端。同一賬號在客戶端 A出操作，客戶端 B 會收到相應的通知。根據我在瀏覽器中的調試，發現在 Web 端 原來是用的 WebSocket?？紤]到寫數據時遇到的無網絡連接問題，Firebase的數據庫API使用了本地緩存，使得在離線狀態下也能保持讀寫不失敗，并且會在網絡恢復連接時和服務器進行同步。

Firebase 提供了四種 SDK: Android，IOS, Web 和 C++。我將使用 Web 端 SDK 開發一個無后端的筆記應用。

在使用 Firebase 作為后端數據庫之前，需要登錄 Firebase 的控制臺，添加一個 Firebase 的網絡應用。你可選擇新建一個應用，或者導入一個現有的 Google 項目。

創建完應用之后，進入應用的控制面板，在 ‘https://console.firebase.goog...’ 中可以看到碩大的綁定入口“將 Firebase 添加到您的網頁應用”，點擊之后，將給處的 JavaScript 添加到 HTML 文件中。

當然也可通過 npm 安裝 Firebase 的 SDK npm link，然后通過 Webpack 等工具打包。

npm install --save firebase

引入 Firebase

let firebase = require("firebase");
let app = firebase.initializeApp({ ... });

完整的 Firebase 客戶端包包含了Firebase 的 Authentication, Realtime Database, Storage 和 Cloud Messaging。上面的代碼將會把這些功能全部引入。可以將這些功能以獨立組件的形式引入，減少代碼量。

firebase-app 核心代碼（必需）

firebase-auth Authentication（可選）

firebase-database Realtime Database（可選）

firebase-storage Storage（可選）

firebase-messaging Cloud Messagin（可選）

在這個案例中目前 Storage暫時沒有使用的計劃，Cloud Messaging 針對的是移動端，所以這兩個組件不引入。

let firebase = require("firebase/app");
require("firebase/auth");
require("firebase/database");
 
let app = firebase.initializeApp({ ... });
// ...

完成上述步驟之后，你已經可以在環境中使用 firebase 提供的各種接口了。

大多數應用都需要了解用戶的身份。知道用戶的身份可以讓應用將用戶數據安全地保存在云中并跨所有用戶設備提供相同的個性化體驗。
Firebase Authentication 提供后端服務、易用 SDK 和現成 UI 庫來向應用驗證用戶的身份。它支持使用密碼、深受歡迎的聯合用戶身份提供商（如 Google、Facebook 和 Twitter）等方法進行身份驗證。

本次案例使用第三方登錄，不使用 Firebase 提供的 UI庫，有興趣的朋友可以自己去試試 https://github.com/firebase/FirebaseUI-Web。

在添加了 Firebase應用之后，打開console的 Authentication，在登錄方法中開啟需要的登錄提供商。這里我選擇了“電子郵件地址/密碼”和“Github“兩種方式。

在用戶填寫表單注冊時，完成所需的任何新帳戶驗證步驟，例如驗證新帳號密碼鍵入正確，或者檢查賬號是否已經存在。然后
將郵件地址和密碼傳遞到 createUserWithEmailAndPassword 方法中來創建新帳戶：

firebase.auth().signInWithEmailAndPassword(email, password).catch((error) => {
  // Handle Errors here.
  let errorCode = error.code;
  let errorMessage = error.message;
  // ...
});

用戶首次登錄后，便會建立一個新用戶帳戶并鏈接至該用戶登錄時使用的憑據，即用戶名和密碼，或身份驗證提供程序信息。此新帳戶存儲在 Firebase 項目中，可用于跨項目中的每個應用識別用戶，無論該用戶如何登錄。

在console 中的登錄方式中啟用 github 登錄之后，需要添加從 GitHub 獲得的 OAuth 2.0 客戶端 ID 和客戶端密鑰。同時將你的 Github 應用的授權回調地址設置為 Firebase OAuth 重定向 URI（例如 my-app-12345.firebaseapp.com/__/auth/handler）。Github 的應用配置

上述前期工作準備就緒之后，可以開始使用 Firebase SDK 來使用登錄流程。

先創建一個 GitHub 提供程序對象的實例：

let provider = new firebase.auth.GithubAuthProvider();

然后是一個可選的步驟：從身份驗證提供程序中指定您想請求的其他 OAuth 2.0 范圍。調用 Provider 實例的 addScope方法來添加范圍。例如：

provider.addScope("repo");

詳細參數可以參考身份驗證提供程序文檔。

接下來，使用 GitHub 提供程序對象進行 Firebase 身份驗證。可以提示用戶，讓其通過打開彈出式窗口或重定向登錄頁面的方法以自己的 GitHub account 登錄。移動設備最好使用重定向方法。要用彈出式窗口的方法登錄，調用 signInWithPopup：

firebase.auth().signInWithPopup(provider).then(function(result) {
  // This gives you a GitHub Access Token. You can use it to access the GitHub API.
  let token = result.credential.accessToken;
  // The signed-in user info.
  let user = result.user;
  // ...
}).catch(function(error) {
  // Handle Errors here.
  let errorCode = error.code;
  let errorMessage = error.message;
  // The email of the user"s account used.
  let email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  let credential = error.credential;
  // ...
});

你可以檢索 GitHub 提供程序的 OAuth 令牌，使用該令牌可通過 GitHub API 提取額外數據。
還可以通過這種方法捕獲并處理錯誤。獲取錯誤代碼列表。

如果要用重定向登錄頁面的方法登錄，則調用 signInWithRedirect：

firebase.auth().signInWithRedirect(provider);

不僅如此，你還可以在頁面加載時通過調用 getRedirectResult 檢索 GitHub 提供程序的 OAuth 令牌：

firebase.auth().getRedirectResult().then(function(result) {
  if (result.credential) {
    // This gives you a GitHub Access Token. You can use it to access the GitHub API.
    let token = result.credential.accessToken;
    // ...
  }
  // The signed-in user info.
  let user = result.user;
}).catch(function(error) {
  // Handle Errors here.
  let errorCode = error.code;
  let errorMessage = error.message;
  // The email of the user"s account used.
  let email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  let credential = error.credential;
  // ...
});

當然，你也可以手動處理登錄流程。 在 GitHub 登錄流程結束后，你會收到一個 OAuth 2.0 訪問令牌。在用戶使用 GitHub 成功登錄之后，先使用 OAuth 2.0 訪問令牌換取 Firebase 憑據：

let credential = firebase.auth.GithubAuthProvider.credential(token);

然后使用 Firebase 憑據進行 Firebase 身份驗證：

firebase.auth().signInWithCredential(credential).catch(function(error) {
  // Handle Errors here.
  let errorCode = error.code;
  let errorMessage = error.message;
  // The email of the user"s account used.
  let email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  let credential = error.credential;
  // ...
});

除了前面提到的郵箱密碼驗證，第三方 OAuth 驗證之外，Firebase 還支持自定義身份認證系統和匿名身份驗證，這里不講，有興趣和需求的朋友可以自己去了解。

要注銷用戶，調用 signOut：

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}, function(error) {
  // An error happened.
});

除此之外，SDK 還提供了一系列用戶管理的方法。

獲取當前登錄的用戶

獲取當前用戶的推薦方法是在 Auth 對象上調用onAuthStateChanged方法，這可確保在您獲取當前用戶時，Auth 對象不會處于中間狀態，例如初始化。既要么未登錄，要么已登錄。

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in.
  } else {
    // No user is signed in.
  }
});

也可以使用 currentUser 屬性獲取當前已登錄的用戶。 如果用戶沒有登錄，currentUser 則為 null：

let user = firebase.auth().currentUser;

if (user) {
  // User is signed in.
} else {
  // No user is signed in.
}

不過有一點要注意，currentUser 還可能由于 auth 對象尚未完成初始化而為 null。 如果使用觀察程序跟蹤用戶登錄狀態，則無需處理該情況。
當獲取到用戶對象的實例之后，可以訪問實例上的一些屬性，以及調用實例上的一些方法對用戶進行一些操作，比如：

要獲取用戶的個人資料信息：

let user = firebase.auth().currentUser;
let name, email, photoUrl, uid;

if (user != null) {
  name = user.displayName;
  email = user.email;
  photoUrl = user.photoURL;
  uid = user.uid;  // The user"s ID, unique to the Firebase project. Do NOT use
                   // this value to authenticate with your backend server, if
                   // you have one. Use User.getToken() instead.
}

獲取用戶的特定于提供程序的個人資料信息(登錄提供程序中獲取檢索到的個人資料信息)

let user = firebase.auth().currentUser;

if (user != null) {
  user.providerData.forEach(function (profile) {
    console.log("Sign-in provider: "+profile.providerId);
    console.log("  Provider-specific UID: "+profile.uid);
    console.log("  Name: "+profile.displayName);
    console.log("  Email: "+profile.email);
    console.log("  Photo URL: "+profile.photoURL);
  });
}

更新用戶個人資料(顯示名稱和頭像地址)

let user = firebase.auth().currentUser;

user.updateProfile({
  displayName: "Jane Q. User",
  photoURL: "https://example.com/jane-q-user/profile.jpg"
}).then(function() {
  // Update successful.
}, function(error) {
  // An error happened.
});

設置電子郵件地址

let user = firebase.auth().currentUser;

user.updateEmail("user@example.com").then(function() {
  // Update successful.
}, function(error) {
  // An error happened.
});

要設置用戶的電子郵件地址，該用戶必須最近登錄過。在 Firebase 控制臺的"Authentication"的"Email Templates"頁面中允許自定義使用的電子郵件模板。

設置用戶密碼

let user = firebase.auth().currentUser;
let newPassword = getASecureRandomPassword();

user.updatePassword(newPassword).then(function() {
  // Update successful.
}, function(error) {
  // An error happened.
});

刪除用戶

也可以在控制臺中手動刪除用戶

let user = firebase.auth().currentUser;

user.delete().then(function() {
  // User deleted.
}, function(error) {
  // An error happened.
});

有些安全敏感性操作，比如刪除帳戶、設置主電子郵件地址和更改密碼，需要用戶最近登錄過才能執行。如果要執行這些操作中的某一項，而用戶只是在很久以前登錄過，操作便出錯。發生這種錯誤時，需要從用戶獲取新登錄憑據，將該憑據傳給 reauthenticate ，對該用戶重新進行身份驗證。

let user = firebase.auth().currentUser;
let credential;

// Prompt the user to re-provide their sign-in credentials

user.reauthenticate(credential).then(function() {
  // User re-authenticated.
}, function(error) {
  // An error happened.
});

如此一來，我的應用已經可以支持郵箱密碼登錄，github 賬號登錄。而且用戶的管理操作也有很直接明了的方法。當用戶添加之后，接下來就可以圍繞用戶設計出需要的數據結構了。下回：數據結構的定義及數據的操作，敬請期待