带有使用 AngularJS 并连接到 ASP.NET Web API 2 的登录屏幕的 SPA 示例? [英] Example of an SPA with a login screen that uses AngularJS and connects to ASP.NET Web API 2?

问题描述

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

I would like to create a new AngularJS, Web API Single page application. Does anyone have any examples that show how I can set up a user login screen that connects to a WEB API controller for a simple login (no need for google/facebook login etc) that uses ASP.NET Identity and without the need for user registration.

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

Also how can I handle showing a new view once the login has been completed. What I would like is to have a solution that does not show routing in the browser URL. So for example I would like to be able to switch from the login view and a couple of other different views without the url changing from www.abc.com.

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

In other words I would like to avoid showing www.abc.com/login, www.abc.com/screen1, www.abc.com/screen2

任何建议将不胜感激.

推荐答案

因此，我没有尝试寻找示例，而是创建了一个示例(链接位于底部).为了解释该功能的工作原理，我想回顾一下以下几点:

So, instead of trying to find an example, I created one instead (link at the bottom). To explain how the functionality works, I want to go over a few things:

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

• The new ASP.NET Identity system provides an OAuth 2.0 Bearer token implementation which can be used with clients that consume a Web API resource over HTTP. Since the authentication is not stored in a session cookie, the server is not responsible for maintaining the authentication state. The side-effect is that the consumer has to manage authenticating the server and managing the returned token. This is the system that Microsoft uses in the SPA template that it provides with VS 2013.

AngularJS 不对身份验证做任何假设，因此如何进行身份验证取决于您.

AngularJS makes no assumptions about authentication, so it's up to you how to authenticate.

AngularJS 提供了 $http 服务，用于查询基于 HTTP 的远程服务以及构建在 $http<之上的 $resource/代码>.将 Authorization 标头与上面的 Bearer 令牌实现结合使用，您可以将两者结合起来，通过 HTTP 提供对服务器资源的经过身份验证的访问.AngularJS 允许您设置一个默认"Authorization 标头，它将在每个后续 HTTP 事务中使用.

AngularJS provides the $http service for querying remote HTTP-based services as well as $resource which is built on top of $http. Using Authorization headers with the Bearer token implementation above, you can combine both to provide authenticated access to server resources over HTTP. AngularJS allows you to set a 'default' Authorization header which it will use in every subsequent HTTP transaction.

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

With that in mind, the way I accomplished this is by creating a User service that handles all of the authentication details, including setting the HTTP Authorization header, between the Web API server and the SPA. Based on the authentication status of the user, you can hide certain UI elements in order to prevent navigation. However, if you also define the state as requiring authentication as a property of the resolve object for the state, a watcher set on the $stateChangeError event will capture the error and redirect the user to the login form. Upon proper authentication, it will then redirect the user to the state they were trying to navigate to.

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

In order to prevent authentication from being lost between browser sessions (since the client is responsible for maintaining the authentication token, and that token is maintained in memory), I also added the ability for the user to persist the authentication to a cookie. All of this is transparent to the user. For them, it is practically identical to traditional form-and-session based authentication.

我不知道你为什么要阻止用户看到路线，但我已经这样编码了.我要感谢 Sedushi 的 Plunker 示例，该示例说明了如何使用 AngularUI 路由器在不使用 URL 的情况下以有状态的方式导航.不过，我不确定我个人是否可以将它推荐给我自己编写的任何应用程序.

I'm not sure why you want to prevent the user from seeing the routes, but I have coded it as such. I am in debt to Sedushi's Plunker example of how to use AngularUI Router to navigate in a stateful manner without using URLs. Still, I'm not sure I can personally recommend this for any application I would write on my own.

完整的解决方案(WebAPI 和 WebUI)提供分步说明此处.

The full solution (both the WebAPI and the WebUI) is available with step-by-step instructions here.

有不清楚的地方请告诉我，我会尽量在回答中说的更清楚.

Let me know about any specific part that is unclear, and I will try to make it more clear in the answer.

这篇关于带有使用 AngularJS 并连接到 ASP.NET Web API 2 的登录屏幕的 SPA 示例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！