摘要：今天第一期創(chuàng)建項(xiàng)目和用戶管理。我將使用端開發(fā)一個(gè)無(wú)后端的筆記應(yīng)用。用戶大多數(shù)應(yīng)用都需要了解用戶的身份。也可以使用屬性獲取當(dāng)前已登錄的用戶。如果使用觀察程序跟蹤用戶登錄狀態(tài)，則無(wú)需處理該情況。

在構(gòu)建自己的在線云工具應(yīng)用時(shí)，我使用 Firebase 為自己的“無(wú)后端項(xiàng)目”提供服務(wù)，把在開發(fā)期間接觸到的一些內(nèi)容整理在一起，制成系列筆記。這個(gè)過程有兩個(gè)好處：鞏固知識(shí)點(diǎn)，整理開發(fā)過程的思路。因?yàn)榍岸碎_發(fā)是自己所熟悉的領(lǐng)域，所以先從 Firebase 入手，將后端的一些知識(shí)點(diǎn)提前梳理理順，避免后續(xù)的學(xué)習(xí)過程中的卡殼而導(dǎo)致無(wú)法堅(jiān)持。今天第一期：創(chuàng)建項(xiàng)目和用戶管理。

Firebase 原本是一家實(shí)時(shí)后端數(shù)據(jù)庫(kù)創(chuàng)業(yè)公司，為提供一個(gè)實(shí)時(shí)響應(yīng)的數(shù)據(jù)服務(wù)。后被 Google 收購(gòu)，該平臺(tái)適用在IOS、Android、web前端等各種跨平臺(tái)上，對(duì)于沒有數(shù)據(jù)庫(kù)處理經(jīng)驗(yàn)的開發(fā)者，只需使用自己熟悉的語(yǔ)言將數(shù)據(jù)放在Firebase上，再通過Firebase提供的API即可實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)同步。同時(shí) Google 在新版的 Firebase 中包含開發(fā)、成長(zhǎng)與營(yíng)收三階段，并整合分析工具，不過分析工具目前只針對(duì)移動(dòng) App，網(wǎng)頁(yè)的話可以繼續(xù)使用 Google Analytics。

何謂“實(shí)時(shí)數(shù)據(jù)庫(kù)”？簡(jiǎn)單粗暴的理解就是，數(shù)據(jù)庫(kù)中數(shù)據(jù)的變動(dòng)會(huì)互動(dòng)通知到客戶端。同一賬號(hào)在客戶端 A出操作，客戶端 B 會(huì)收到相應(yīng)的通知。根據(jù)我在瀏覽器中的調(diào)試，發(fā)現(xiàn)在 Web 端 原來(lái)是用的 WebSocket。考慮到寫數(shù)據(jù)時(shí)遇到的無(wú)網(wǎng)絡(luò)連接問題，F(xiàn)irebase的數(shù)據(jù)庫(kù)API使用了本地緩存，使得在離線狀態(tài)下也能保持讀寫不失敗，并且會(huì)在網(wǎng)絡(luò)恢復(fù)連接時(shí)和服務(wù)器進(jìn)行同步。

Firebase 提供了四種 SDK: Android，IOS, Web 和 C++。我將使用 Web 端 SDK 開發(fā)一個(gè)無(wú)后端的筆記應(yīng)用。

在使用 Firebase 作為后端數(shù)據(jù)庫(kù)之前，需要登錄 Firebase 的控制臺(tái)，添加一個(gè) Firebase 的網(wǎng)絡(luò)應(yīng)用。你可選擇新建一個(gè)應(yīng)用，或者導(dǎo)入一個(gè)現(xiàn)有的 Google 項(xiàng)目。

創(chuàng)建完應(yīng)用之后，進(jìn)入應(yīng)用的控制面板，在 ‘https://console.firebase.goog...’ 中可以看到碩大的綁定入口“將 Firebase 添加到您的網(wǎng)頁(yè)應(yīng)用”，點(diǎn)擊之后，將給處的 JavaScript 添加到 HTML 文件中。

當(dāng)然也可通過 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。上面的代碼將會(huì)把這些功能全部引入。可以將這些功能以獨(dú)立組件的形式引入，減少代碼量。

firebase-app 核心代碼（必需）

firebase-auth Authentication（可選）

firebase-database Realtime Database（可選）

firebase-storage Storage（可選）

firebase-messaging Cloud Messagin（可選）

在這個(gè)案例中目前 Storage暫時(shí)沒有使用的計(jì)劃，Cloud Messaging 針對(duì)的是移動(dòng)端，所以這兩個(gè)組件不引入。

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

完成上述步驟之后，你已經(jīng)可以在環(huán)境中使用 firebase 提供的各種接口了。

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

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

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

在用戶填寫表單注冊(cè)時(shí)，完成所需的任何新帳戶驗(yàn)證步驟，例如驗(yàn)證新帳號(hào)密碼鍵入正確，或者檢查賬號(hào)是否已經(jīng)存在。然后
將郵件地址和密碼傳遞到 createUserWithEmailAndPassword 方法中來(lái)創(chuàng)建新帳戶：

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

用戶首次登錄后，便會(huì)建立一個(gè)新用戶帳戶并鏈接至該用戶登錄時(shí)使用的憑據(jù)，即用戶名和密碼，或身份驗(yàn)證提供程序信息。此新帳戶存儲(chǔ)在 Firebase 項(xiàng)目中，可用于跨項(xiàng)目中的每個(gè)應(yīng)用識(shí)別用戶，無(wú)論該用戶如何登錄。

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

上述前期工作準(zhǔn)備就緒之后，可以開始使用 Firebase SDK 來(lái)使用登錄流程。

先創(chuàng)建一個(gè) GitHub 提供程序?qū)ο蟮膶?shí)例：

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

然后是一個(gè)可選的步驟：從身份驗(yàn)證提供程序中指定您想請(qǐng)求的其他 OAuth 2.0 范圍。調(diào)用 Provider 實(shí)例的 addScope方法來(lái)添加范圍。例如：

provider.addScope("repo");

詳細(xì)參數(shù)可以參考身份驗(yàn)證提供程序文檔。

接下來(lái)，使用 GitHub 提供程序?qū)ο筮M(jìn)行 Firebase 身份驗(yàn)證?？梢蕴崾居脩?，讓其通過打開彈出式窗口或重定向登錄頁(yè)面的方法以自己的 GitHub account 登錄。移動(dòng)設(shè)備最好使用重定向方法。要用彈出式窗口的方法登錄，調(diào)用 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 提取額外數(shù)據(jù)。
還可以通過這種方法捕獲并處理錯(cuò)誤。獲取錯(cuò)誤代碼列表。

如果要用重定向登錄頁(yè)面的方法登錄，則調(diào)用 signInWithRedirect：

firebase.auth().signInWithRedirect(provider);

不僅如此，你還可以在頁(yè)面加載時(shí)通過調(diào)用 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;
  // ...
});

當(dāng)然，你也可以手動(dòng)處理登錄流程。 在 GitHub 登錄流程結(jié)束后，你會(huì)收到一個(gè) OAuth 2.0 訪問令牌。在用戶使用 GitHub 成功登錄之后，先使用 OAuth 2.0 訪問令牌換取 Firebase 憑據(jù)：

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

然后使用 Firebase 憑據(jù)進(jìn)行 Firebase 身份驗(yàn)證：

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;
  // ...
});

除了前面提到的郵箱密碼驗(yàn)證，第三方 OAuth 驗(yàn)證之外，F(xiàn)irebase 還支持自定義身份認(rèn)證系統(tǒng)和匿名身份驗(yàn)證，這里不講，有興趣和需求的朋友可以自己去了解。

要注銷用戶，調(diào)用 signOut：

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

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

獲取當(dāng)前登錄的用戶

獲取當(dāng)前用戶的推薦方法是在 Auth 對(duì)象上調(diào)用onAuthStateChanged方法，這可確保在您獲取當(dāng)前用戶時(shí)，Auth 對(duì)象不會(huì)處于中間狀態(tài)，例如初始化。既要么未登錄，要么已登錄。

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

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

let user = firebase.auth().currentUser;

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

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

要獲取用戶的個(gè)人資料信息：

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.
}

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

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);
  });
}

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

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.
});

設(shè)置電子郵件地址

let user = firebase.auth().currentUser;

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

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

設(shè)置用戶密碼

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

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

刪除用戶

也可以在控制臺(tái)中手動(dòng)刪除用戶

let user = firebase.auth().currentUser;

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

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

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.
});

如此一來(lái)，我的應(yīng)用已經(jīng)可以支持郵箱密碼登錄，github 賬號(hào)登錄。而且用戶的管理操作也有很直接明了的方法。當(dāng)用戶添加之后，接下來(lái)就可以圍繞用戶設(shè)計(jì)出需要的數(shù)據(jù)結(jié)構(gòu)了。下回：數(shù)據(jù)結(jié)構(gòu)的定義及數(shù)據(jù)的操作，敬請(qǐng)期待