时间戳

首页 > 解决方案 > 在应用程序和 iframe 中的小部件之间共享身份验证状态（即通用登录）

javascript - 在应用程序和 iframe 中的小部件之间共享身份验证状态（即通用登录）

问题描述

语境：

service.io 上托管了一个 Web 应用程序，这是大多数用户登录或创建帐户的地方，因为它为用户提供了一大堆服务。用户还可以访问一个小部件，他们可以将其嵌入到他们赢得的网站中，以向他们的用户提供我们某些服务的功能。

问题：

因为应用程序和小部件在技术上将存在于 2 个不同的域中，所以无法共享身份验证状态。这意味着每当小部件的用户必须登录小部件所在的网站时，该网站被包裹在 iframe 中以防止任何内容泄漏。这并不理想。

当前解决方案：

由于问题在于小部件将位于不同的域中，因此我决定将小部件托管在应用程序所在的域 (abc.com/embeds) 下，并使用 iframe 的 src 属性来加载该路由 (<iframe src ="abc.com/embeds)。为此，我使用所谓的多区域并通过 NextJS 框架重写（https://nextjs.org/docs/advanced-features/multi-zones。所以应用程序将存在于 /* 下，而小部件将存在于 /embeds 下。

现在的问题是我也必须为小部件使用 NextJS，这不是最佳的，因为我没有为小部件使用任何与 Next 相关的功能，因此不必要地增加了包大小。

理想的解决方案（从我的角度来看）：

最好和最简单的方法是，如果我可以在 vercel 上托管两个应用程序时使用多区域 + 重写，但不使用 NextJS 作为小部件。

我能想到的唯一其他解决方案是以某种方式在小部件和应用程序之间同步身份验证状态，而无需在应用程序域中托管小部件。我自己还没有实现 auth0 通用登录，但我相信它在概念上是相似的？

问题：

可视化：

在此处输入图像描述

标签： javascriptnode.jsauthenticationiframenext.js

解决方案

正如@cbr 所建议的 - 您可以使用postMessage，主机网站（即您的小部件）将用于postMessage您在 service.io 上的应用程序

要确保安全，请执行以下操作

  1. origin通过您的小部件发送targetWindow和接收时确认evt.origin- 这满足您确认发送给谁的需要，并且接收者也确认谁发送了消息。

  2. 如果有多个targetWindow实例，只需命名它们，您就可以将相应的消息定向到预期的窗口。

参考：https ://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

推荐阅读