在 iframe 中嵌入 Firebase 社交登录

Posted 2023-02-23

【中文标题】在 iframe 中嵌入 Firebase 社交登录

【英文标题】：Embedding Firebase social login in an iframe

【发布时间】：2018-06-29 23:26:09

【问题描述】：

我在 iframe 中嵌入了一个 React 应用程序。该应用程序使用 firebase-authentication 使用 Google、Facebook 或 Twitter 登录。虽然身份验证机制在 iframe 外完美运行，但由于跨域问题，它在 iframe 内无法运行。任何想法如何解决这个问题？

以下是将 React 应用程序嵌入 iframe 的代码：

<iframe
    id="myframe"
    src="https://example.com/my-frame"
    scrolling="no"
></iframe>

当 React 应用重定向到社交登录时，我在 Chrome DevTools 中收到以下错误消息：

拒绝在框架中显示“https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=xyz&scope=https://www.googleapis.com/auth/userinfo.email+profile+openid&redirect_uri=https://example.firebaseapp.com/__/auth/handler&state=AH..oE”，因为它将“X-Frame-Options”设置为“sameorigin”。

Google 登录似乎正在发送 x-frame-options:SAMEORIGIN 标头，这会阻止浏览器打开该页面。有没有办法解决这个问题？

提前致谢！

【参考方案1】：

accounts.google.com 等 OAuth 提供商拒绝在框架或 iframe 中呈现。这样做是出于安全原因。

您无法绕过它。但是，如果您使用 Firebase 身份验证从 iframe 登录，则可以改用 signInWithPopup。

【讨论】：

谢谢@bojeil。 signInWithPopup 的想法太棒了。