具有使用AngularJS并连接到ASP.NET Web API 2的登录屏幕的SPA示例？

Question

我想创建一个新的AngularJS,Web API单页面应用程序.有没有人有任何示例显示我如何设置连接到WEB API控制器的用户登录屏幕,以便使用ASP.NET身份进行简单登录(无需google/facebook登录等),无需用户注册.

此外,如何在登录完成后处理显示新视图的方法.我想要的是一个没有在浏览器URL中显示路由的解决方案.因此,例如,我希望能够从登录视图和其他几个不同的视图切换而不更改URL www.abc.com.

换句话说,我想避免显示www.abc.com/login, www.abc.com/screen1,www.abc.com/screen2

任何建议将不胜感激.

Answer 1

因此,我没有尝试找到一个例子,而是创建了一个(底部链接).为了解释功能如何工作,我想谈谈以下几点:

• 新的ASP.NET Identity系统提供了OAuth 2.0 Bearer令牌实现,可以与通过HTTP使用Web API资源的客户端一起使用.由于身份验证未存储在会话cookie中,因此服务器不负责维护身份验证状态.副作用是消费者必须管理对服务器的身份验证和管理返回的令牌.这是Microsoft在VS 2013中提供的SPA模板中使用的系统.

• AngularJS不做任何关于身份验证的假设,因此由您决定如何进行身份验证.

• AngularJS提供了$http用于查询基于HTTP的远程服务以及$resource构建在其上的服务$http.使用Authorization带有上述承载令牌实现的标头,您可以将两者结合使用,以通过HTTP提供对服务器资源的经过身份验证的访问.AngularJS允许您设置一个"默认" Authorization标头,它将在每个后续HTTP事务中使用.

考虑到这一点,我完成此操作的方法是创建一个用户服务,处理AuthorizationWeb API服务器和SPA之间的所有身份验证详细信息,包括设置HTTP 标头.根据用户的身份验证状态,您可以隐藏某些UI元素以防止导航.但是,如果您还将状态定义为要求身份验证作为resolve状态对象的属性,则$stateChangeError事件上设置的观察程序将捕获错误并将用户重定向到登录表单.经过适当的身份验证后,它会将用户重定向到他们尝试导航到的状态.

为了防止在浏览器会话之间丢失身份验证(因为客户端负责维护身份验证令牌,并且该令牌在内存中维护),我还添加了用户将身份验证持久保存到cookie的功能.所有这些对用户都是透明的.对于他们来说,它几乎与传统的基于形式和会话的身份验证相同.

我不确定你为什么要阻止用户查看路由,但我已经将其编码.我欠了Sedushi的Plunker示例,该示例说明如何使用AngularUI路由器以有状态的方式导航而不使用URL.尽管如此,我不确定我是否可以为我自己编写的任何应用程序亲自推荐这个.

完整的解决方案(WebAPI和WebUI)可通过此处的分步说明获得.

让我知道任何不清楚的具体部分,我会尽量在答案中说清楚.

Answer 2

请参阅以下博客,了解由Marlabs团队开发的ASP.NET Web API 2和AngularJS的单页面应用程序(SPA)演示.

http://weblogs.asp.net/shijuvarghese/archive/2014/01/25/demo-spa-app-for-asp-net-web-api-2-and-angularjs.aspx

该应用程序采用以下技术构建:

• ASP.NET Web API 2
• EF 6 Code First
• AutoMapper
• Autofac
• 语义UI
• AngularJS 1.1.5

该应用程序发布在github上,网址为https://github.com/MarlabsInc/webapi-angularjs-spa.