é®é¢ï¼ ä»ä¹æ¯ Firebase èº«ä»½éªè¯ï¼

é®é¢ï¼ å¦ä½å¤çä¼è¯ cookie è¿æï¼

é®é¢ï¼ ä¼è¯cookieå¯ä»¥ä¸æå¡å¨ç«¯æ¸²æä¸èµ·ä½¿ç¨åï¼

é®é¢ï¼ çµåé®ä»¶éªè¯åå¦ä½æ´æ°ä¼è¯ cookieï¼

在 Firebase 中验证用户电子邮件后更新会话

Arthur Petit

2024年3月18日星期一下午9:18:13

使用 Firebase 身份验证处理会话 Cookie 和电子邮件验证

在开发优先考虑服务器端渲染和数据获取的 Web 应用程序（例如使用 NextJS 和 React Server Components 构建的 Web 应用程序）时，有效管理用户身份验证变得至关重要。利用 Firebase 身份验证和会话 cookie 提供了强大的解决方案，特别是对于需要延长会话时间的应用程序。 Firebase 文档中详细介绍了这种方法，它利用会话 cookie 进行身份验证，允许会话持续长达 14 天，明显长于默认令牌 ID 的生命周期。该实现涉及在登录或注册时根据用户的令牌 ID 创建会话 cookie，并将其存储为 HttpOnly cookie，从而确保安全且持久的用户会话。

然而，这种方法在集成电子邮件验证时遇到了挑战。用户使用电子邮件和密码注册并通过链接验证其电子邮件后，电子邮件_已验证其会话 cookie 中的字段保持不变，反映其未经验证的状态。出现这种差异的原因是，会话 cookie 一旦设置，就不会自动更新以反映用户身份验证状态（例如电子邮件验证）的更改。解决此问题需要一种策略，允许在不影响安全性或用户体验的情况下刷新或更新会话 cookie，特别是考虑到 Firebase 在令牌持久性和会话管理方面的限制。

命令	描述
require('firebase-admin')	导入 Firebase Admin SDK 以从服务器与 Firebase 交互。
require('express')	Imports Express，一个快速、无主见、极简的 Node.js Web 框架。
require('cookie-parser')	导入 Cookie-Parser，这是一个解析附加到客户端请求对象的 cookie 的中间件。
admin.initializeApp()	使用服务器端凭据初始化 Firebase 应用实例。
app.use()	将指定的中间件函数安装到应用程序对象。
admin.auth().verifySessionCookie()	验证 Firebase 会话 cookie 并返回其解码后的令牌声明。
admin.auth().createCustomToken()	创建可用于客户端身份验证的新 Firebase 自定义令牌。
admin.auth().createSessionCookie()	根据给定的 ID 令牌和选项创建新的会话 cookie。
res.cookie()	将 cookie 从服务器发送到客户端。
app.listen()	绑定并侦听指定主机和端口上的连接。
document.addEventListener()	将事件侦听器添加到客户端 JavaScript 中的文档对象。
fetch()	用于向给定 URL 发出网络请求并返回解析为响应对象的 Promise。

了解会话 Cookie 刷新机制

提供的后端脚本利用 Node.js 和 Firebase Admin SDK 来处理在验证电子邮件后刷新用户会话 cookie 的关键过程。此操作首先设置 Express.js 服务器并集成 cookie 解析器中间件以有效管理 HTTP cookie。 admin.initializeApp() 函数使用服务器端凭据初始化 Firebase 应用程序，使应用程序能够安全地与 Firebase 服务交互。中间件函数 checkAuth 使用 admin.auth().verifySessionCookie() 来验证随客户端请求发送的会话 cookie。此验证对于确保只有经过身份验证的请求才能进入敏感路由或操作至关重要。该脚本的关键部分是路由“/refresh-session”，任何经过验证的用户都可以请求该路由。根据此请求，中间件对用户进行身份验证，然后使用 admin.auth().createCustomToken() 生成新的自定义令牌。此令牌对于创建具有更新声明（包括电子邮件验证状态）的新会话 cookie 至关重要。

新生成的会话 cookie 会连同更新的过期时间一起发送回客户端，确保用户保持登录状态而不会出现任何安全风险。此过程解决了电子邮件验证后 email_verified 字段不更新的初始问题。在客户端，JavaScript 片段触发会话刷新过程。它侦听特定事件（例如单击按钮）并向“/refresh-session”端点发出 GET 请求。 fetch() 函数在这里至关重要，因为它处理网络请求并处理响应。如果会话刷新成功，则会通知客户端，并且可以重新加载页面以反映用户的验证状态。此方法可确保用户体验保持无缝，无需用户在注册后手动重新进行身份验证或在客户端保留令牌 ID，从而解决了跨客户端和服务器环境维护更新且安全的身份验证状态的挑战。

使用 Firebase 会话 Cookie 实施电子邮件验证状态更新

JavaScript 和 Firebase SDK

// Backend: Node.js with Firebase Admin SDK
const admin = require('firebase-admin');
const express = require('express');
const cookieParser = require('cookie-parser');
const app = express();
app.use(cookieParser());
// Initialize Firebase Admin
admin.initializeApp({credential: admin.credential.applicationDefault()});
// Middleware to check authentication
const checkAuth = async (req, res, next) => {
  try {
    const sessionCookie = req.cookies.__session || '';
    const decodedClaims = await admin.auth().verifySessionCookie(sessionCookie, true);
    req.decodedClaims = decodedClaims;
    next();
  } catch (error) {
    res.status(401).send('Unauthorized');
  }
};
// Route to refresh session cookie
app.get('/refresh-session', checkAuth, async (req, res) => {
  const { uid } = req.decodedClaims;
  const newToken = await admin.auth().createCustomToken(uid);
  const expiresIn = 60 * 60 * 24 * 5 * 1000; // 5 days
  const sessionCookie = await admin.auth().createSessionCookie(newToken, { expiresIn });
  const options = { maxAge: expiresIn, httpOnly: true, secure: true };
  res.cookie('__session', sessionCookie, options);
  res.end('Session refreshed');
});
// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

电子邮件验证后会话刷新的客户端处理

用于 Web 客户端的 JavaScript

// Client-side: JavaScript to trigger session refresh
document.addEventListener('DOMContentLoaded', function() {
  const refreshButton = document.getElementById('refresh-session-button');
  refreshButton.addEventListener('click', async () => {
    try {
      const response = await fetch('/refresh-session', { method: 'GET' });
      if (response.ok) {
        alert('Session has been refreshed. Please reload the page.');
      } else {
        throw new Error('Failed to refresh session');
      }
    } catch (error) {
      console.error('Error:', error);
      alert('Error refreshing session. See console for details.');
    }
  });
});

使用 Firebase 会话 Cookie 增强安全性和用户体验

将 Firebase 身份验证集成到应用程序中，尤其是那些使用 NextJS 和 React Server 组件构建的应用程序，需要对会话管理和安全性有细致入微的了解。 Firebase 的会话 cookie 机制为传统的基于令牌的身份验证提供了一种引人注目的替代方案，特别是对于需要服务器端渲染和扩展用户会话的应用程序。选择会话 cookie 而不是令牌 ID 是因为它们的有效期较长，最长可设置为 14 天，因此与令牌 ID 所需的每小时刷新相比，可以减少用户重新身份验证的频率。即使在客户端长时间不活动的情况下，这种方法也能保持会话连续性，从而增强用户体验。

除了方便之外，配置为 HttpOnly 的会话 cookie 还通过使客户端脚本无法访问它们来增加额外的安全层，从而降低跨站点脚本 (XSS) 攻击的风险。然而，这种安全设置带来了挑战，特别是在用户电子邮件验证后更新会话 cookie 时。由于 cookie 的寿命和 HttpOnly 属性，会话 cookie 中的 email_verified 声明不会在电子邮件验证时自动更新，因此开发人员必须实现一种机制来刷新或重新生成会话 cookie。这确保了用户的身份验证状态得到准确反映，并且可以适当地执行基于电子邮件验证状态的访问控制。

有关使用会话 Cookie 的 Firebase 身份验证的常见问题解答

问题： 什么是 Firebase 身份验证？
回答： Firebase 身份验证提供后端服务、易于使用的 SDK 和现成的 UI 库，用于对应用程序的用户进行身份验证。它支持使用密码、电话号码、流行的联合身份提供商（如 Google、Facebook 和 Twitter 等）进行身份验证。
问题： 为什么使用会话 cookie 而不是令牌 ID 进行身份验证？
回答： 会话 cookie 可以设置为比令牌 ID 更长的过期时间，从而减少频繁的用户重新身份验证的需要。它们还通过客户端脚本无法访问来增强安全性，从而防止 XSS 攻击。
问题： 如何处理会话 cookie 过期？
回答： 实施服务器端检查以验证每个请求的会话 cookie。如果过期，则提示用户重新进行身份验证。您还可以实现一种定期刷新会话 cookie 的机制。
问题： 会话cookie可以与服务器端渲染一起使用吗？
回答： 是的，会话 cookie 特别适合使用服务器端渲染的应用程序，因为它们可以通过 HTTP 标头安全地传输，从而确保用户的身份验证状态在服务器端可用。
问题： 电子邮件验证后如何更新会话 cookie？
回答： 电子邮件验证后，使用更新的声明（包括 email_verified 状态）重新生成会话 cookie，并用新的 cookie 替换客户端上的旧 cookie。

反思 Firebase 中的会话 Cookie 更新

采用带有会话 cookie 的 Firebase 身份验证可延长会话持续时间并增强安全性，从而显着改进 Web 应用程序中的身份验证过程。然而，在用户的电子邮件验证之后更新会话 cookie 的问题提出了一个值得注意的挑战，特别是在出于安全原因而立即删除令牌 ID 的情况下。这种情况强调了开发人员必须制定策略，使会话 cookie 能够在电子邮件验证完成后刷新或重新生成。这些措施对于维护安全且以用户为中心的身份验证系统至关重要。通过实施服务器端解决方案来更新会话cookie，开发人员可以确保准确反映用户的身份验证状态，从而在不影响安全性的情况下提供更流畅的用户体验。所提出的讨论和解决方案强调了现代 Web 开发中灵活性和安全性的重要性，特别是在处理服务器渲染应用程序中的身份验证时。

在 Firebase 中验证用户电子邮件后更新会话 Cookie 声明