在 iframe 中嵌入 Firebase 社交登录
Embedding Firebase social login in an iframe
我在 iframe 中嵌入了一个 React 应用程序。该应用程序使用 firebase-authentication 通过 Google、Facebook 或 Twitter 登录。虽然身份验证机制在 iframe 之外完美运行,但由于 cross-origin 问题,它在 iframe 中不起作用。有什么解决办法吗?
这是将 React 应用程序嵌入 iframe 的代码:
<iframe
id="myframe"
src="https://example.com/my-frame"
scrolling="no"
></iframe>
当 React 应用程序重定向到社交登录时,我在 Chrome DevTools 中收到以下错误消息:
Refused to display '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' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
似乎 Google 登录正在发送 x-frame-options:SAMEORIGIN
header,这会阻止浏览器打开该页面。有办法解决这个问题吗?
提前致谢!
像 accounts.google.com 这样的 OAuth 提供商拒绝在框架或 iframe 中呈现。这样做是出于安全原因。
您无法绕过它。但是,如果您使用 Firebase Auth 从 iframe 登录,则可以改用 signInWithPopup
。
我在 iframe 中嵌入了一个 React 应用程序。该应用程序使用 firebase-authentication 通过 Google、Facebook 或 Twitter 登录。虽然身份验证机制在 iframe 之外完美运行,但由于 cross-origin 问题,它在 iframe 中不起作用。有什么解决办法吗?
这是将 React 应用程序嵌入 iframe 的代码:
<iframe
id="myframe"
src="https://example.com/my-frame"
scrolling="no"
></iframe>
当 React 应用程序重定向到社交登录时,我在 Chrome DevTools 中收到以下错误消息:
Refused to display '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' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
似乎 Google 登录正在发送 x-frame-options:SAMEORIGIN
header,这会阻止浏览器打开该页面。有办法解决这个问题吗?
提前致谢!
像 accounts.google.com 这样的 OAuth 提供商拒绝在框架或 iframe 中呈现。这样做是出于安全原因。
您无法绕过它。但是,如果您使用 Firebase Auth 从 iframe 登录,则可以改用 signInWithPopup
。