1. 設定
取得原始碼
在此 Codelab 中,您將從接近完成的 Friendship 範例應用程式版本開始,因此您需要做的第一件事是克隆原始程式碼:
$ git clone https://github.com/firebase/codelab-friendlychat-web --branch security
然後,進入security-start
目錄,您將在其中完成本 Codelab 的剩餘部分:
$ cd codelab-friendlychat-web/security-start
現在,安裝依賴項以便您可以運行程式碼。如果您的網路連線速度較慢,這可能需要一兩分鐘:
$ npm install && (cd functions && npm install)
了解這個倉庫
security-solution/
目錄包含範例應用程式的完整程式碼。 security-start
目錄是您完成 Codelab 的位置,並且缺少身份驗證實作的一些重要部分。 security-start/
和security-solution/
中的關鍵檔案和功能是:
-
functions/index.js
包含 Cloud Functions 程式碼,您將在其中編寫身份驗證阻止函數。 -
public/
- 包含聊天應用程式的靜態文件 public/scripts/main.js
- 聊天應用程式 JS 程式碼 (src/index.js
) 編譯到的位置src/firebase-config.js
- 包含用於初始化聊天應用程式的 Firebase 設定對象src/index.js
- 您的聊天應用程式 JS 程式碼
取得 Firebase CLI
模擬器套件是 Firebase CLI(命令列介面)的一部分,可以使用以下命令將其安裝在您的電腦上:
$ npm install -g firebase-tools@latest
使用 webpack 建立 javascript,這將在 public/scripts/ 目錄中建立 main.js。
webpack build
接下來,確認您擁有最新版本的 CLI。此 Codelab 適用於 11.14 或更高版本。
$ firebase --version 11.14.2
連接到您的 Firebase 項目
如果您沒有 Firebase 項目,請在Firebase 控制台中建立一個新的 Firebase 項目。記下您選擇的項目 ID,稍後您將需要它。
現在您需要將此程式碼連接到您的 Firebase 專案。首先執行以下命令登入Firebase CLI:
$ firebase login
接下來執行以下命令來建立專案別名。將$YOUR_PROJECT_ID
替換為您的 Firebase 專案的 ID。
$ firebase use $YOUR_PROJECT_ID
現在您已準備好運行該應用程式了!
2.運行模擬器
在本部分中,您將在本地運行該應用程式。這意味著是時候啟動模擬器套件了。
啟動模擬器
在 Codelab 來源目錄中,執行以下命令來啟動模擬器:
$ firebase emulators:start
這將在http://127.0.0.1:5170上為您的應用程式提供服務,並在您進行更改時不斷重建您的原始程式碼。您只需在瀏覽器中本機硬刷新 (ctrl-shift-r) 即可查看變更。
您應該看到如下輸出:
i emulators: Starting emulators: auth, functions, firestore, hosting, storage ✔ functions: Using node@16 from host. i firestore: Firestore Emulator logging to firestore-debug.log ✔ firestore: Firestore Emulator UI websocket is running on 9150. i hosting[demo-example]: Serving hosting files from: ./public ✔ hosting[demo-example]: Local server: http://127.0.0.1:5170 i ui: Emulator UI logging to ui-debug.log i functions: Watching "[...]" for Cloud Functions... ✔ functions: Loaded functions definitions from source: beforecreated. ✔ functions[us-central1-beforecreated]: providers/cloud.auth/eventTypes/user.beforeCreate function initialized (http://127.0.0.1:5011/[...]/us-central1/beforecreated). i Running script: npm start > security@1.0.0 start > webpack --watch --progress [...] webpack 5.50.0 compiled with 1 warning in 990 ms
當您看到“所有模擬器均已就緒”訊息後,該應用程式就可以使用了。
3. 實施MFA
MFA 已在此儲存庫中部分實作。您將新增程式碼以先在 MFA 中註冊用戶,然後提示在 MFA 中註冊的用戶進行第二個因素。
在編輯器中,開啟src/index.js
檔案並找到startEnrollMultiFactor()
方法。新增以下程式碼以設定 reCAPTCHA 驗證程序,以防止電話濫用(reCAPTCHA 驗證程序設定為不可見,且對使用者不可見):
async function startEnrollMultiFactor(phoneNumber) {
const recaptchaVerifier = new RecaptchaVerifier(
"recaptcha",
{ size: "invisible" },
getAuth()
);
然後,找到finishEnrollMultiFactor()
方法並添加以下內容以註冊第二個因素:
// Completes MFA enrollment once a verification code is obtained.
async function finishEnrollMultiFactor(verificationCode) {
// Ask user for the verification code. Then:
const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
// Complete enrollment.
await multiFactor(getAuth().currentUser)
.enroll(multiFactorAssertion)
.catch(function (error) {
alert(`Error finishing second factor enrollment. ${error}`);
throw error;
});
verificationId = null;
}
接下來,找到signIn
函數並新增以下控制流,提示註冊 MFA 的使用者輸入第二個因素:
async function signIn() {
// Sign in Firebase using popup auth and Google as the identity provider.
var provider = new GoogleAuthProvider();
await signInWithPopup(getAuth(), provider)
.then(function (userCredential) {
// User successfully signed in and is not enrolled with a second factor.
})
.catch(function (error) {
if (error.code == "auth/multi-factor-auth-required") {
multiFactorResolver = getMultiFactorResolver(getAuth(), error);
displaySecondFactor(multiFactorResolver.hints);
} else {
alert(`Error signing in user. ${error}`);
}
});
}
其餘的實現,包括此處調用的函數,已經完成。要了解它們的工作原理,請瀏覽文件的其餘部分。
4. 嘗試在模擬器中使用 MFA 登入
現在試試 MFA 實施!確保您的模擬器仍在運行並存取本地託管的應用程式localhost:5170
。嘗試登錄,當系統提示您提供 MFA 代碼時,您將在終端視窗中看到 MFA 代碼。
由於模擬器完全支援多重身份驗證,因此您的開發環境可以完全獨立。
要了解有關實施 MFA 的更多信息,請參閱我們的參考文件。
5. 建立阻塞函數
某些應用程式僅供特定使用者群組使用。對於這些情況,您希望能夠為使用者註冊或登入您的應用程式建立自訂要求。
這就是阻止函數所提供的:一種建立自訂身份驗證要求的方法。它們是雲端函數,但與大多數函數不同,它們在使用者嘗試註冊或登入時同步運行。
若要建立阻塞函數,請在編輯器中開啟functions/index.js
並找到註解掉的beforecreated
函數。
將其替換為以下程式碼,僅允許具有 example.com 網域的使用者建立帳戶:
exports.beforecreated = beforeUserCreated((event) => {
const user = event.data;
// Only users of a specific domain can sign up.
if (!user.email || !user.email.endsWith("@example.com")) {
throw new HttpsError("invalid-argument", "Unauthorized email");
}
});
6. 在模擬器中嘗試阻塞功能
若要嘗試封鎖功能,請確保您的模擬器正在運行,並在localhost:5170
的 Web 應用程式中登出。
然後,嘗試使用不以example.com
結尾的電子郵件地址建立帳戶。阻塞功能將阻止操作成功。
現在,使用以example.com
結尾的電子郵件地址重試。帳戶將創建成功。
透過封鎖功能,您可以建立有關身份驗證所需的任何限制。要了解更多信息,請參閱參考文件。
回顧
做得好!您為 Web 應用程式新增了多重驗證,以協助使用者確保其帳戶安全,然後為使用者使用封鎖功能進行註冊建立了自訂要求。您絕對贏得了 gif 動圖!