如何通过Firebase实现App与网站的同一用户登录状态共享？

绝对可以搞定！Firebase Authentication天生就支持跨应用/网站共享登录状态，只要你的Web应用和托管网站满足几个关键条件就行。我给你一步步拆解具体怎么做：

1. 先把所有域名加入Firebase授权列表 #

这是最基础的一步——你得把Web应用和托管网站的域名都添加到Firebase控制台的认证 > 设置 > 授权域名列表里。Firebase只会信任这些域名下的认证请求，避免跨域安全风险，没加的话后续操作肯定会报错。

2. 配置跨域会话管理的核心设置 #

Firebase Auth默认会在用户登录时生成HTTP-only Cookie来维持会话。要让这个Cookie能在你的多个域名之间共享，需要做两处配置：

前端SDK开启凭证携带 #

如果用的是JavaScript SDK，初始化Auth时要确保开启会话持久化，并且允许跨域请求携带凭证：

import { initializeApp } from "firebase/app";
import { getAuth, setPersistence, browserSessionPersistence } from "firebase/auth";

const firebaseConfig = { /* 你的Firebase配置 */ };
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

// 设置会话持久化，同时确保跨域请求携带认证凭证
setPersistence(auth, browserSessionPersistence)
  .then(() => {
    // 后续登录操作会遵循这个配置
  })
  .catch((error) => {
    console.error("设置会话持久化失败:", error);
  });

托管网站配置CORS头部（如果是Firebase托管） #

如果你的托管网站是用Firebase Hosting部署的，需要在firebase.json里添加CORS头部配置，允许来自Web应用域名的跨域请求携带凭证：

{
  "hosting": {
    "headers": [
      {
        "source": "**",
        "headers": [
          {
            "key": "Access-Control-Allow-Credentials",
            "value": "true"
          },
          {
            "key": "Access-Control-Allow-Origin",
            "value": "https://your-web-app-domain.com" // 替换成你的Web应用域名，同主域可用通配符
          }
        ]
      }
    ]
  }
}

3. 同主域子域的场景（更简单） #

如果你的Web应用和托管网站是同一个主域下的子域（比如app.yourdomain.com和site.yourdomain.com），那配置会更省心：

• 在Firebase控制台把主域yourdomain.com加入授权域名；
• 初始化Auth时设置cookieDomain为.yourdomain.com（注意前面的点），这样Cookie会被所有子域共享：

  const auth = getAuth(app);
  auth.settings.cookieDomain = ".yourdomain.com";
  

  这样用户在任意一个子域登录后，其他子域打开就能直接获取登录状态了。

4. 跨主域的场景（需要额外处理） #

如果是完全不同的主域，就得用ID令牌交换的方式来实现跨域登录：

1. 用户在Web应用登录后，获取当前用户的ID令牌：

   const user = auth.currentUser;
   const idToken = await user.getIdToken();
   

2. 把ID令牌安全传递给托管网站（建议用HTTPS下的POST请求，或者postMessage跨域消息传递，避免URL参数泄露）；
3. 托管网站接收到ID令牌后，用Firebase Auth的signInWithIdToken方法完成登录：

   import { signInWithIdToken } from "firebase/auth";
   
   signInWithIdToken(auth, idToken)
     .then((userCredential) => {
       // 用户已在托管网站自动登录
       const user = userCredential.user;
     })
     .catch((error) => {
       console.error("跨域登录失败:", error);
     });
   

   注意ID令牌默认1小时过期，所以需要在托管网站实现令牌刷新逻辑，维持登录状态。

5. 验证共享是否生效 #

配置完成后，你可以在Web应用登录，然后打开托管网站，调用auth.currentUser检查是否返回用户对象。如果能拿到用户信息，就说明登录状态已经成功共享啦！

内容的提问来源于stack exchange，提问作者Erasmo Neto