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 动图!