angular - 使用 angular 2+ 的社交登录时，信息以何种方式在组件之间传递？

Question

我计划通过以下方式为我的应用程序支持多个登录选项(包括使用 google 和 facebook 进行社交登录)。当用户点击使用 google/facebook 登录时，一个新窗口打开，用户身份验证完成，服务器返回 JWT，我将其存储在本地存储中并使用 hoSTListener，前一个窗口(或父窗口)知道身份验证成功。

此流程运行良好(通过正常的服务器端身份验证)，但我正在考虑将 JWT 存储在本地存储中可能引起的安全问题。使用社交登录时共享身份验证信息的标准方式是什么？

有没有更好的方法将 JWT/身份验证详细信息从子窗口(发生身份验证的地方)传递到父窗口？另一种选择是使用 Eventemitter 在两个组件之间传递信息，但是使用社交登录和 jwt 的网站使用的标准方式是什么？

编辑:我想复制大多数网站的行为，即当用户通过身份验证时，父窗口保持静止，一旦身份验证完成并传递到父窗口，它重定向到让我们说主页或重定向 url。

Answer 1

如果你真的想使用弹出窗口进行身份验证，你可以使用弹出窗口访问应用程序的父窗口

window.opener

从弹出窗口向父级发送 token 的最简单方法是发布消息(参见 Mozilla docs)

window.opener.postMessage(messageContainingToken, window.location.origin);

父窗口需要有监听器

window.addEventListener("message", receiveTokenMessage, false);

function receiveTokenMessage(event) {
   if (event.origin !== window.location.origin) {
       return;
   }
   let messageContainingToken = event.data;
}

messageContainingToken 可以是 token 本身或一些更复杂的 JSON。然后可以将token存储在SessionStorage中，比LocalStorage更安全。

更新(建议):

我建议您不要使用弹出窗口。相反，在登录页面上，我会为“使用 SomeOauth2Provider 登录”创建按钮。当用户单击该按钮时，他将被重定向到 SomeOauth2Provider 网站，在身份验证后，他将被重定向回您的 Angular SPA(您提供 redirectUri)。处理包含 token 的 redirectUri 的 Angular 组件将验证 token ，将其保存到 SessionStorage 并将路由更改为应用程序的某个初始 View 。

我认为在重定向后再次加载 Angular 应用程序比打开一个新窗口(也可以禁用)更加用户友好。