angularjs - AngularJS SPA 中推荐的身份验证 UX，带有自己的和外部(Google、FB ...)配置文件

Question

我正在开发一个 Asp.net MVC + Web API + AngularJS SPA。我想要几种类型的注册/身份验证:

自己的资料提供者

外部供应商即谷歌、FB 等

可能的情况

由于我有一个 SPA，如果我可以将我的用户留在我的页面上，而外部(或内部)将会发生，那将是最好的。我会显示一个加载了特定内容的模态层(甚至可能在 iframe 内)。 这可以做到吗？ 网上例子？

像往常一样实现登录/注册功能 Asp.net MVC 整页重新加载 Controller / View ，然后在成功时重定向回我的 SPA。如果用户想使用外部提供者进行身份验证/注册，也重定向到外部提供者。

还有其他可能吗？

问题

您是如何在您的 SPA 中执行此类似场景的，或者您建议如何执行此操作？

我是否应该为此使用特定的身份验证模式 - 例如，提供类似于外部身份验证/注册的内部身份验证/注册，以便 SAP 始终以相同的方式运行

在用户在 SPA 中对自己进行身份验证后，我还必须随后对我的 Web API 调用进行身份验证。对此有什么指导吗？

Answer 1

我只能评论我自己的经历，也许它会有所帮助。我们使用与您相同的堆栈，Asp.net MVC + Web API + AngularJS。我们使用服务器端 MVC 进行身份验证(Microsoft.AspNet.Identity)，因为我们在这个阶段没有公开公共(public) API，API 的唯一使用者将是我们的 SPA，这可以用最少的努力完美地工作。

这也使我们能够在登录后在服务器上设置一个 UserContext Angular 服务，该服务可以通过您的整个 Angular 应用程序共享，Google Doubleclick Manager 人员在 ng-conf presentation 期间介绍了这种方法的一些好处.由于 Web Api 支持 Asp.Net Identity，身份验证和授权在 MVC 和 Web Api 之间无缝工作。

总结一下主要的优缺点:

优点:

实现起来非常简单快捷。

跨 MVC 和 Web Api 工作。

客户端代码不需要关心身份验证代码。

在登录期间在服务器端设置一次 UserContext Angular 服务，使用 Angular DI 在整个 SPA 中轻松共享。见 presentation正如刚才提到的。

与任何普通 MVC 应用程序一样轻松地与外部提供程序集成。

缺点:

由于浏览器不会将 URL 的哈希 # 部分发送到服务器，因此登录时返回的 URL 将始终是您的 SPA 的根。例如。假设您的 SPA 根目录是/app，并且您在未通过身份验证时尝试访问/app#/client，您将被重定向到登录页面，但返回 URL 将是/app 而不是/app#/client服务器无法知道 URL 的哈希部分，因为浏览器从不发送它。

如果您打算让您的 Web Api 在您的 SPA 之外可用，则不是真正支持的设计。想象一个控制台应用程序试图连接到您的 API？

简而言之，我们用来引导 SPA 的 MVC View 受到 [Authorize] 以及我们的 Web Api 方法的保护。在 MVC View 中，我们还使用 Razor 初始化我们的 UserContext Angular 服务，以注入(inject)我们想要公开的任何用户属性。通过单个 Razor View 加载 SPA 后，其他所有内容都通过 Angular 处理。