AngularJS SPA中推荐的身份验证UX,具有自己和外部(Google,FB ...)配置文件

Question

AngularJS SPA中推荐的身份验证UX,具有自己和外部(Google,FB ...)配置文件

Rob*_*nik 11 authentication asp.net-web-api angularjs single-page-application asp.net-mvc-5

我正在开发一个Asp.net MVC + Web API + AngularJS SPA.我想有几种类型的注册/认证:

自己的个人资料
外部提供商,如谷歌,FB等

可能的情况

因为我有一个SPA,所以如果我可以将我的用户保留在我的页面上,而外部(或内部)将会发生.我会显示一个加载了特定内容的模态层(甚至可能在里面iframe).可以这样做吗？在线示例？
像往常一样实现登录/注册功能Asp.net MVC整页重新加载控制器/视图,然后在成功时重定向回我的SPA.如果用户想要使用外部提供商进行身份验证/注册,也可以重定向到外部提供商.
还有其他可能吗？

问题

您是如何在SPA中执行此类似的方案的,或者您会如何建议这样做？
我是否应该使用特定的身份验证模式 - 例如,提供类似于外部的内部身份验证/注册,以便SAP始终以相同的方式运行
在用户在SPA中进行身份验证之后,我还必须对我的Web API调用进行身份验证.对此有何指导？

Answer 1

Bey*_*ers 12

我只能对自己的经历发表评论,也许它很有帮助.我们使用与您相同的堆栈,Asp.net MVC + Web API + AngularJS.我们使用服务器端MVC进行身份验证(Microsoft.AspNet.Identity),因为我们不会在此阶段公开公共API,而且API的唯一消费者将是我们的SPA,这样可以最轻松地完成工作.

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

总结一下主要的利弊:

优点:

实施起来非常简单快捷.
适用于MVC和Web Api.
客户端代码不需要关心身份验证代码.
在登录期间在服务器端设置一次UserContext Angular服务,使用Angular DI在SPA中轻松共享.见上文提到的演示文稿.
与任何普通的MVC应用程序一样,可以轻松地与外部提供程序集成.

缺点:

由于浏览器不会将URL的散列#部分发送到服务器,因此登录时返回的URL将始终是SPA的根.例如,假设您的SPA根目录是/ app,并且在未经过身份验证时尝试访问/ app#/ client,您将被重定向到登录页面,但返回的URL将是/ app而不是/ app#/ client因为服务器无法知道URL的哈希部分,因为浏览器永远不会发送它.
如果您计划在SPA之外使用Web Api,则不支持设计.想象一下,试图连接到您的API的控制台应用程序？

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

Answer 2

Cor*_*lva 7

我们使用过Beyers之前描述的内容,它适用于大多数应用程序,我经常使用它.

在我们目前的申请中,我们的工作前提是关注点的分离应适用于路径管理.

正常生命周期:

用户访问www.server.com
服务器发送index.html
客户请求缩小资产(.js,.css.等)
角度加载 - 一个指令从主体中删除加载类(显示登录部分)
1. Angular LoginCtrl进行自动登录尝试.(Angular服务中的登录和自动登录).
2. 服务器返回HTTP 401
登录屏幕仍然可见.
用户成功登录(服务器为浏览器提供authToken cookie; angular不知道或不关心)
Angular在BodyCtrl和LoginCtrl中设置了一些isAuthenticated变量
登录部分接收一个.hidden类,内容接收一类.visible(插入ng-hide/show动画以获得乐趣)
用户开始填写表格,但需要从亲戚那里拨打30分钟的电话.
服务器已在10分钟前过期
用户完成并提交表单但服务器未经授权返回(401)
http-auth-interceptor拦截服务器上的401,缓存提交调用并发布"登录所需"事件.
BodyCtrl监听并设置isAuthenticated = false,然后ng-class和ng-show/hide在登录和内容部分工作.
用户重新登录并发布"登录确认"事件
http-auth-interceptor发布缓存调用.
用户很高兴
(内容部分也可以显示一些公共视图,因为我们的rest api有一些公开的路径 - 显示公共视图由类似于isAuthenticated的简单函数处理)

Angular Ctrl结构:

的index.html

<body>
    <!-- I am a fullscreen login element, z-index=2000-->
    <div data-ng-controller="LoginCtrl" data-ng-hide="isAuthenticated()"</div>
    <div data-ng-controller="ContentCtrl">
        <!-- fullscreen class has a z-index=2001 -->
        <section data-ng-view data-ng-class="{fullscreen: isViewPublic()}"></section>
        <!-- header and nav go here -->
    </div>
</body>

Run Code Online (Sandbox Code Playgroud)

我们可以在如何展示公众观点/路线方面获得更多创意,但您可以获得这个想法.我们只有一些公共路线,主要用于注册,密码重置等.

免责声明:我还没有与oauth /外部认证服务集成.希望这个设置仍然可以保持水量.

对此过程的任何批评都是受欢迎的.

Answer 3

vuc*_*lur 4

我对 Microsoft 后端并不熟悉，但我仍然会尝试一下;-)：

\n\n

有关如何在基于 Angular 的 SPA 中完成身份验证/授权的良好资源：

\n\n

https://github.com/fnakstad/angular-client-side-auth
\n现场演示：http://angular-client-side-auth.herokuapp.com/login
\n\n
- 根据您的要求，有两种身份验证方法：\n\n
  - 自己的个人资料
  - 外部提供商。
    \n它会重定向到提供商网站：-/
- 后端的 NodeJS
关于如何在Google Doubleclick Manager应用程序中完成授权的良好 ng-conf 讨论：http://www.youtube.com/watch?
v=62RvRQuMVyg&t=2m29s \n这不完全是您想要的（身份验证），但解决方案开始进入身份验证阶段。此外，它以后可能会有用，而且 Ido 提出的方法看起来确实很合理。
\n幻灯片：https://docs.google.com/file/d/0B4F6Csor-S1cNThqekp4NUZCSmc/edit
最后但并非最不重要的一点：掌握使用 AngularJS 进行 Web 应用程序开发。
\nPawe\xc5\x82 Koz\xc5\x82owski 和 Pete Bacon Darwin 撰写的一本精彩的 Angular 书籍。
\n它有一两章专门讨论身份验证的内容。它展示了一些复杂的解决方案，例如重试和会话过期拦截器。但即使您不会直接使用本书中的方法，这些章节仍然是必读的，因为它们可能会给您设计自己的权威解决方案的灵感。
\n\n
备注 - http-auth-interceptor：正如书中提到的，该securityInterceptor解决方案最初是由Witold Szczerba发明的。请参阅博客文章。
@CorySilva 提到的\nhttp-auth-interceptor代码实际上是帖子中解释的概念的示例代码。
\n\n
顺便说一句：这两章很棒，但我希望社区将来能提出一些更简单的解决方案。每次我读到这个promise api基于拦截器的代码时，我都会感到非常头痛:)
\n\n
顺便说一句：如果有人不认为自己是 Angular 专家，整本书绝对是必读的，也是阅读指南后的一个很好的补充

\n\n

至于使用 ASP 构建登录页面 - 我建议仅使用 ASP 作为后端和中间件，并使用 Angular 绘制整个应用程序。
\n如果您开始需要越来越多的疯狂黑客才能使技术很好地协同工作，您可以从您的方法开始并切换到纯 Angular SPA。
\n但我可能是错的，这种特殊情况不需要应用任何黑客技术。

\n

归档时间：	11 年，7 月前
查看次数：	3518 次
最近记录：	11 年，2 月前