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

前端之家收集整理的这篇文章主要介绍了具有使用AngularJS并连接到ASP.NET Web API 2的登录屏幕的SPA的示例?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想创建一个新的AngularJS,Web API单页应用程序。任何人都有任何示例,显示我如何可以设置一个用户登录屏幕连接到WEB API控制器的简单登录(不需要google / facebook登录等),使用ASP.NET身份,而不需要用户注册

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

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

任何意见将不胜感激。

所以,而不是试图找到一个例子,我创建了一个(链接底部)。为了解释这个功能是如何工作的,我想讨论几件事情:

>新的ASP.NET Identity系统提供了一个OAuth 2.0 Bearer令牌实现,可以与通过HTTP使用Web API资源的客户端一起使用。由于认证不存储在会话cookie中,所以服务器不负责维护认证状态。副作用是消费者必须管理认证服务器和管理返回的令牌。这是Microsoft在VS 2013提供的SPA模板中使用的系统。
> AngularJS不对认证做假设,所以由你来认证。
> AngularJS提供了$ http服务来查询远程的基于HTTP的服务以及基于$ http构建的$ resource。将授权标头与上面的Bearer令牌实现结合使用,您可以将两者结合使用,以通过HTTP提供对服务器资源的经过身份验证的访问。 AngularJS允许您设置一个“默认”授权头,它将在每个后续的HTTP事务中使用。

考虑到这一点,我实现这一点的方式是创建一个用户服务,处理所有的认证细节,包括设置HTTP授权头,在Web API服务器和SPA之间。基于用户的身份验证状态,您可以隐藏某些UI元素,以防止导航。但是,如果您还将状态定义为需要认证作为状态的resolve对象的属性,则在$ stateChangeError事件上设置的观察器将捕获错误并将用户重定向登录表单。在正确的身份验证后,它会将用户重定向到他们尝试导航到的状态。

为了防止在浏览器会话之间丢失认证(由于客户端负责维护身份验证令牌,并且该令牌在内存中维护),我还添加用户将身份验证持久化到cookie的能力。所有这一切对用户都是透明的。对于它们,它实际上与传统的基于形式和会话的认证相同。

我不知道你为什么要阻止用户看到路由,但我已经编码它这样。我负责Sedince的Plunker示例如何使用AngularUI路由器以有状态的方式导航,而不使用URL。仍然,我不知道我可以亲自推荐这个任何应用程序,我会写我自己。

完整的解决方案(WebAPI和WebUI)均提供分步说明here

让我知道任何具体部分不清楚,我会尽力使答案更清楚。

猜你在找的Angularjs相关文章