当将社交登录与angular 2+；一起使用时，组件之间的信息以何种方式传递；？

我计划以以下方式为我的应用程序支持多种登录选项（包括谷歌和facebook的社交登录）。 当用户单击google/facebook登录时，会打开一个新窗口，用户身份验证完成，服务器返回JWT，，我使用hostlistener将其存储在本地存储中，上一个窗口（或父窗口）知道身份验证是否成功。

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

是否有更好的方法将JWT/身份验证详细信息从子窗口（进行身份验证的地方）传递到父窗口？ 还有一个选择是使用EventEmitter在这两个组件之间传递信息，但是使用social signin和jwt的站点使用的标准方式是什么

---

编辑：我想复制大多数网站所做的行为，即在用户通过身份验证之前，父窗口保持静止，一旦身份验证完成并传递到父窗口，它就会重定向到主页或重定向url

如果您确实想使用弹出窗口进行身份验证，可以使用

window.opener

从弹出窗口向父级发送令牌的最简单方法是发布消息（请参阅）

父窗口需要有一个侦听器

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

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

messageContainingToken

可以是令牌本身，也可以是更复杂的JSON。然后可以将令牌存储在SessionStorage中，这比LocalStorage更安全

更新（建议）：

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

---

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

我建议使用firebase。他们有面向角度、面向生产的社交登录实现的软件包。看看：

有一篇关于使用firebase对用户进行角度应用程序身份验证的好文章：

我的建议是使用@ngrx/store进行集中状态管理，这样您就可以将JWT和用户声明存储在应用程序的状态中，从而可以从应用程序的每个部分使用它

以下链接可能有助于kickstart：

然后，您可以使用HTTPInterceptor将令牌添加到头中。如果您像这样使用OAuth库，您不必担心这一点，因为它附带了自己的拦截器，但是如果有拦截器，您应该取消提供自己的拦截器

localStorage

和

sessionStorage

都扩展了存储。除了预期的

会话存储

的“非持久性”之外，它们之间没有区别

也就是说，存储在

localStorage

中的数据会一直存在，直到显式删除为止。所做的更改将被保存，并可用于所有当前和将来的站点访问

对于

sessionStorage

，更改仅在每个窗口（或在Chrome和Firefox等浏览器中的选项卡）可用。所做的更改将保存并可用于当前页面，以及在同一窗口上对站点的未来访问。窗口关闭后，存储将被删除

Web存储（

localStorage

/

sessionStorage

）可通过同一域上的JavaScript访问。这意味着在您的站点上运行的任何JavaScript都可以访问web存储，因此容易受到跨站点脚本（XSS）攻击XSS，简而言之，是一种漏洞类型，攻击者可以在其中注入将在您的页面上运行的JavaScript

改用COOKIES

---

Cookies与

HttpOnly

cookie标志一起使用时，无法通过JavaScript访问，并且对XSS免疫。您还可以设置安全cookie标志，以确保cookie仅通过HTTPS发送

为什么要打开新窗口进行身份验证？这会让用户体验更糟糕，在移动设备上可能会出现问题。如果有其他方法，OAuth2认证不需要，我不会这么做。因为在新窗口中，可以使用多个登录选项，其中一些可能重定向到外部域（例如google.com）。还有我看到的所有站点，在一个新窗口中实现了社交登录。另外，我计划为我的2-3个应用程序提供相同的身份验证机制。谢谢。您是否可以分享网站最常见的做法？我的意思是，几乎每三个网站上都有社交登录选项。在那些使用angular构建的系统中，他们是如何进行这种通信的。有没有标准的方法可以做到这一点？我用我将如何做的信息更新了答案。当我使用window.opener.postMessage（messageContainingToken，window.location.origin，false）；，我收到错误：TypeError:未能在“窗口”上执行“postMessage”：无法将提供的值转换为序列。

postMessage

使用

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

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