如何在iframe上使用Auth0登录

Question

我刚刚实现了简单的基于 Angular 的应用程序，并使用 Auth0 按钮登录。当我直接在浏览器上打开它时效果很好。我可以登录成功。我的目标是使用 iframe（作为一种小部件）将我的应用程序嵌入到另一个网页中。

\n\n

<div class="css"><iframe src="https://myapp.com"></iframe></div>\n

\n\n

登录逻辑如下

\n\n

login(redirectPath: string = \'/\') {\n    this.auth0Client$.subscribe((client: Auth0Client) => {\n      client.loginWithRedirect({\n        redirect_uri: `https://some.now.sh`,\n        appState: {target: redirectPath},\n      });\n    });\n  }\n

\n\n

但是在登录过程中我收到错误

\n\n

\n

系统中可能存在配置错误或服务中断。\n 我们会自动跟踪这些错误，但如果问题仍然存在，请随时与我们联系。请再试一次。

\n\n

invalid_request ：您可能在登录期间按了后退按钮、刷新了\n、打开了太多登录对话框，或者 cookie 存在一些问题，因为我们无法\xe2\x80\x99 找到您的会话。尝试从应用程序再次登录，如果问题仍然存在，请联系管理员。

\n

\n\n

在网络选项卡上我可以看到

\n\n

\n

https://mycustomname.eu.auth0.com/authorize?xxxx

\n

\n\n

得到 302 的位置信息

\n\n

\n

/u/login?state=g6Fo2xxxxxxx

\n

\n\n

进而

\n\n

\n

https://mycustomname.eu.auth0.com//u/login?state=g6Fo2xxxxxxx

\n

\n\n

返回 400 HTTP 代码。

\n\n

可能出什么问题了？它\xe2\x80\x99s 不可能在 iframe 上使用 Auth0 吗？

\n

Answer 1

如果您使用新的通用登录体验，您将无法在 Iframe 中呈现托管登录页面。Auth0 包含以下 HTTP 标头以减轻点击劫持攻击。

X-Frame-Options: deny
Content-Security-Policy: frame-ancestors 'none'

这些标头会阻止 Iframe 渲染。https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

但是，如果您使用经典的 Unviersal 登录 ，您可以关闭此功能，该功能将允许 Iframe 中的托管登录页面。正如这里所描述的：

https://auth0.com/docs/migrations/guides/clickjacking-protection