如何构建单点登录应用程序（电子邮件和通行证）？

Question

我想构建一个单独的登录界面（使用Angular），它应该是一种独立的，因此可以在任何页面上使用和嵌入。

E.g。客户可以将其嵌入到索引页面中作为覆盖层，代码/函数应该从JavaScript API传递并构建UI和连接。

我正在考虑像单点登录应用程序这样的概念，它允许用户通过Facebook上的帐户在其他网站上进行交互。 像Facebook这样的东西连接。

达到此目标的最佳方法是什么？首选技术是Angular2，Angular4

Answer 1

[不完全是答案，但评论时间太长]

我认为根本的不匹配是你问“我该怎么做认证”而且我反对“有很多方法，有不同的成本/收益。你需要评估它们并选择对你的用例有正确的方法.OAuth2是一个明智的起点，但还有很多其他的存在。“

之后，找到一个完成工作的库（相对）很简单。

所以......在你继续进行之前，我认为你需要做很多事情。

我最初的问题是：

• 我们需要为最终用户提供什么级别的安全性来考虑所暴露的数据。
• 谁是我们的对手？黑客？民族国家？心怀不满的员工怎么样？
• 我们如何减轻以上所有因素？
• 需要进行哪些记录和审核，以便在违规后我们能够理解发生了什么。
• 如果我们正在使用第三方IAM服务，它希望将哪些数据传递给它，以及它返回什么数据。它是自动处理3路认证（我们，最终用户，第三方）还是必须围绕它构建的东西？如果是后者，IAM提供商是否具有包含我们所需功能的SDK /类似。

广泛的笔触，我建议一个类似的架构：

• 用户想要在第三方应用中进行身份验证
• 第三方将用户重定向到用户登录的服务器/ api / IAM平台（或回收活动会话）。
• 您的系统会提示用户允许3PA访问（数据的一部分？）您的数据。
• 假设用户批准，请将用户重定向回3PA，以及特定于该3PA 的身份验证令牌。

然后，3PA可以使用该令牌代表用户行动，直到令牌被取消。

优点：

• 3PA永远不会看到用户凭据，只有在成功批准后才能了解其令牌。
• 令牌是特定的每服务，这意味着您可以撤销一个站点的权限而不撤销所有站点。
• 用户可以跟踪谁有权访问其详细信息。
• 您可以跟踪哪些系统正在对您进行身份验证（取决于您在初始连接时要求的信息量，以及3PA是否必须预先注册并获取ID以便能够请求身份验证）。

我所描述的基本上是一个极简主义的OAuth工作流程。你可以自己去实现它，但是有很多陷阱，我不相信你完全理解你正在尝试的安全含义，所以我肯定建议使用一个已知良好的过程，而不是试图滚动你自己。

假设OAuth适合您的用例......我从来没有必要从Angular那里做到这一点所以不能推荐一个库但是快速的Google会显示几十个......在结果的顶部附近是一个简单的教程：https://devcenter.kinvey.com/angular/tutorials/how-to-implement-safe-signin-via-oauth

还有一个潜在的库：https://github.com/oauthjs/angular-oauth2（虽然一目了然，但似乎并没有很好地处理截获的凭证方案）