与使用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，网页API单页的应用程序。有没有人有使用ASP.NET身份和无需用户注册，显示我怎么可以设置连接到Web API控制器，​​一个简单的登录（不需要谷歌/ 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 改变。

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

任何意见将是多少AP preciated。

Any advice would be much appreciated.

推荐答案

因此​​，而不是试图找到一个例子，我创建了一个代替（在底部链接）。为了解释的功能是如何工作的，我想去过的几件事情：

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，服务器不负责维护验证状态。的副作用是，消费者必须管理认证所述服务器和管理返回令牌。这是微软将使用它与V​​S 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 的顶部。使用授权头上面承载的token，你可以结合既提供通过HTTP服务器资源认证访问。 AngularJS允许您设置一个默认授权首部将在每个后续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.

考虑到这一点，我做到了这一点是通过创建处理所有的认证细节，包括设置HTTP 授权头用户服务，网络的方式API服务器和SPA。根据用户的身份验证状态，您可以隐藏以prevent导航某些UI元素。但是，如果您还定义了状态，需要验证作为决心的一个属性对象的状态，在一个观察者集 $ 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.

在为prevent认证被丢失浏览器会话之间（因为客户端负责维护的认证令牌，该令牌保持在内存中），我还增加了能力，为用户保留身份验证到一个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.

我不知道为什么你看不到的路线要prevent用户，但我有codeD它是这样。我在债务如何使用AngularUI路由器的状态内，无需使用URL导航Sedushi的Plunker例子。不过，我不知道我可以亲自推荐此我想对我自己编写的应用程序。

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）是一个可以用一步一步的指示<一个href=\"https://bitbucket.org/david.antaramian/so-21662778-spa-authentication-example/overview\">here.

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屋！