使用 Firebase UI 和 Cookie 会话在 Node.js 中进行 Firebase(使用 Google 登录)身份验证

Firebase 提供了很多身份验证方法，其中包括使用 Google 登录。Firebase UI 是一个 Firebase 的 UI 库，提供了很多 UI 组件，包括身份验证组件。结合 Firebase UI，我们可以快速实现身份验证功能。同时，为了保存用户身份信息，我们可以使用 Cookie 会话。

在使用 Firebase UI 和 Cookie 会话进行身份验证时，我们需要完成以下步骤：

1. 创建 Firebase 项目并启用 Google 登录
2. 安装 Firebase 和 Firebase UI 模块
3. 使用 Firebase UI 提供的身份验证组件
4. 保存用户身份信息到 Cookie 会话
5. 验证用户身份信息

下面是详细的步骤：

1. 创建 Firebase 项目并启用 Google 登录

在 Firebase 控制台 创建一个 Firebase 项目，并在身份验证选项卡中启用 Google 登录。

2. 安装 Firebase 和 Firebase UI 模块

在终端中进入您的项目目录，然后运行以下命令安装 Firebase 和 Firebase UI 模块：

npm install --save firebase firebaseui

3. 使用 Firebase UI 提供的身份验证组件

Firebase UI 提供了很多身份验证组件，包括 Google 登录、Facebook 登录、匿名登录等。在本例中，我们将使用 Firebase UI 提供的 Google 登录组件。

在您的应用程序中创建一个登录页面，并使用 Firebase UI 的 firebaseui.auth.AuthUI 类创建一个 ui 对象。在 ui 对象上调用 start() 方法，将 FirebaseUI 渲染到页面。您可以使用以下代码片段：

const firebase = require('firebase/app');
require('firebase/auth');
const firebaseui = require('firebaseui');

app.get('/login', (req, res) => {
  const ui = new firebaseui.auth.AuthUI(firebase.auth());

  const uiConfig = {
    signInSuccessUrl: '/dashboard',
    signInOptions: [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    ],
  };

  res.render('login', { title: 'Login' });
});

app.get('/firebaseui-auth.css', (req, res) => {
  res.sendFile(`${__dirname}/node_modules/firebaseui/dist/firebaseui.css`);
});

app.get('/firebaseui-auth.js', (req, res) => {
  res.sendFile(`${__dirname}/node_modules/firebaseui/dist/firebaseui.js`);
});

在上面的代码中，我们首先通过 require 加载 Firebase、Firebase Auth 和 Firebase UI 模块。然后，我们在 /login 路由中创建一个 ui 对象，并配置了 Google 登录提供程序作为身份验证选项。最后，我们将 FirebaseUI 渲染到页面，并提供了 firebaseui-auth.css 和 firebase-uiJS 文件的路由。

4. 保存用户身份信息到 Cookie 会话

在用户登录后，我们需要将用户身份信息保存到 Cookie 会话中。以下是一个示例代码片段：

app.post('/login', (req, res) => {
  const ui = new firebaseui.auth.AuthUI(firebase.auth());

  const uiConfig = {
    signInSuccessUrl: '/dashboard',
    signInOptions: [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    ],
  };

  const handleUserLogin = (firebaseUser) => {
    const user = {
      uid: firebaseUser.uid,
      displayName: firebaseUser.displayName,
      email: firebaseUser.email,
      photoURL: firebaseUser.photoURL,
    };

    req.session.user = user;

    res.redirect('/dashboard');
  };

  ui.start('#firebaseui-auth-container', uiConfig);

  req.session.destroy();
});

在上面的代码中，我们在 /login 路由中创建了一个名为 handleUserLogin 的函数，该函数将 Firebase 用户对象转换为我们自己的用户对象，并将其保存到 Cookie 会话中。然后，我们将用户重定向到 /dashboard 路径。最后，我们在调用 ui.start() 前调用 req.session.destroy() 来确保之前的任何会话都被清除掉。

5. 验证用户身份信息

当用户访问需要身份验证的页面时，我们需要验证用户的身份信息。以下是一个示例代码片段：

const checkAuth = (req, res, next) => {
  const user = req.session.user;
  if (!user) {
    res.redirect('/login');
  } else {
    next();
  }
};

app.get('/dashboard', checkAuth, (req, res) => {
  res.render('dashboard', { user: req.session.user });
});

在上面的代码中，我们创建了一个名为 checkAuth 的中间件函数，在其中检查用户的 Cookie 会话中是否包含用户信息。如果没有，则将用户重定向到登录页面，否则将用户传递给下一个路由处理程序。

在 /dashboard 路由中，我们使用 checkAuth 中间件函数来保护页面，只有在用户已登录时才会显示。

在本文中，我们使用 Firebase UI 和 Cookie 会话来实现了 Firebase (使用 Google 登录) 身份验证。这使得身份验证功能变得更加容易实现，同时也更加可靠和安全。