如何将React应用嵌入HTML站点并实现Firebase共享身份认证

核心逻辑 #

两个应用共用同一Firebase项目，只需将父HTML站点的认证凭证传递给内嵌的React应用，复用认证状态即可，无需额外适配数据库权限规则。

步骤1：父级HTML站点配置 #

在HTML站点的Firebase登录逻辑后，监听认证状态变化，将有效token发送给内嵌的React应用iframe：

<!-- 嵌入React应用的iframe标签，给一个id方便操作 -->
<iframe id="reactApp" src="你的React应用部署地址" width="100%" height="800px" frameborder="0"></iframe>

<script>
// 监听Firebase认证状态变化
firebase.auth().onAuthStateChanged(async (user) => {
  const iframe = document.getElementById('reactApp');
  if (!user || !iframe) return;
  
  // 获取当前用户的ID Token
  const idToken = await user.getIdToken();
  // 向iframe发送认证信息，第二个参数替换为你的React应用实际域名，限制消息接收方
  iframe.contentWindow.postMessage({
    type: 'FIREBASE_AUTH_TOKEN',
    token: idToken
  }, 'https://你的React应用域名.com');
});
</script>

步骤2：React应用侧配置 #

在React应用的入口组件（比如App.jsx）中监听父页面的消息，拿到token后初始化Firebase认证状态：

import { useEffect } from 'react';
import { getAuth, signInWithCustomToken } from 'firebase/auth';
// 导入和HTML站点完全一致的Firebase配置并初始化
import firebaseConfig from './firebaseConfig';
import { initializeApp } from 'firebase/app';

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

function App() {
  useEffect(() => {
    const handleMessage = async (event) => {
      // 校验消息发送方是否为你的HTML站点域名，防止恶意请求
      if (event.origin !== 'https://你的HTML站点域名.com') return;
      if (event.data.type !== 'FIREBASE_AUTH_TOKEN') return;

      const token = event.data.token;
      try {
        // 用父页面传递的token登录Firebase
        await signInWithCustomToken(auth, token);
        // 登录成功后的逻辑，比如跳转至内部页面、加载用户数据等
      } catch (err) {
        console.error('认证失败', err);
        // 可在这里添加跳转至登录页、提示重新登录的逻辑
      }
    };

    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, []);

  // 你的应用原有渲染逻辑
  return <div>你的React应用内容</div>;
}

export default App;

注意事项 #

• 必须在Firebase控制台Authentication > Settings > Authorized domains中同时添加HTML站点和React应用的域名，避免跨域拦截
• 若出现signInWithCustomToken报错，可改用signInWithCredential方法，传入对应登录方式的credential实例即可
• 生产环境下建议对传递的token做加盐签名校验，避免XSS攻击导致的凭证泄露

内容的提问来源于stack exchange，提问作者Nicolás Pérez