时间戳

首页 > 解决方案 > 如何在 iframe 上使用 Auth0 登录

angular - 如何在 iframe 上使用 Auth0 登录

问题描述

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

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

登录逻辑如下所示

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

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

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

invalid_request ：您可能按下了返回按钮、在登录期间刷新、打开了太多登录对话框，或者 cookie 存在问题，因为我们找不到您的会话。尝试从应用程序重新登录，如果问题仍然存在，请联系管理员。

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

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

哪个得到 302 的位置

/u/login?state=g6Fo2xxxxxxx

接着

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

返回 400 HTTP 代码。

有什么问题？不能在 iframe 上使用 Auth0 吗？

标签： angularsingle-sign-onauth0

解决方案

如果您使用的是新的通用登录体验，您将无法在 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

推荐阅读