高级身份验证功能

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

办公室人员跳屋顶舞的 gif