Fatal编程技术网
  • angularjs/
  • 具有使用AngularJS并连接到ASP.NET Web API 2的登录屏幕的SPA示例？

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

angularjs

具有使用AngularJS并连接到ASP.NET Web API 2的登录屏幕的SPA示例？,angularjs,Angularjs,我想创建一个新的AngularJS，WebAPI单页应用程序。有没有人举过任何例子来说明我如何设置一个用户登录屏幕，该屏幕连接到一个WEB API控制器，用于使用ASP.NET身份的简单登录（不需要google/facebook登录等），而不需要用户注册 此外，我如何处理登录完成后显示新视图的问题。我希望有一个在浏览器URL中不显示路由的解决方案。因此，例如，我希望能够从登录视图和其他几个不同的视图切换，而不必从www.abc.com更改url 换句话说，我希望避免显示www.abc.com/l

我想创建一个新的AngularJS，WebAPI单页应用程序。有没有人举过任何例子来说明我如何设置一个用户登录屏幕，该屏幕连接到一个WEB API控制器，用于使用ASP.NET身份的简单登录（不需要google/facebook登录等），而不需要用户注册

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

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

如果您有任何建议，我们将不胜感激。

请参阅以下博客，了解由Marlabs团队开发的针对ASP.NET Web API 2和AngularJS的单页应用程序（SPA）演示

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

  • ASP.NET Web API 2
  • EF 6代码优先
  • 汽车制造商
  • 自动传真
  • 语义用户界面
  • AngularJS 1.1.5
该应用程序发布在github上。

因此，我没有尝试查找示例，而是创建了一个示例（底部的链接）。为了解释功能是如何工作的，我想回顾几件事：

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

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

  • AngularJS提供用于查询基于http的远程服务的
    $http
    服务，以及构建在
    $http
    之上的
    $resource
    。将
    Authorization
    头与上面的承载令牌实现结合使用，您可以将两者结合起来，通过HTTP提供对服务器资源的经过身份验证的访问。AngularJS允许您设置一个“默认”
    授权
    头，它将在每个后续HTTP事务中使用该头

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

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

我不知道为什么要阻止用户查看路由，但我已经将其编码为这样。我要感谢Sedushi的Plunker示例，该示例演示了如何使用AngularUI路由器以有状态的方式导航，而不使用URL。尽管如此，我不确定我个人是否能将其推荐给我自己编写的任何应用程序

完整的解决方案（WebAPI和WebUI）提供了分步说明

让我知道任何不清楚的具体部分，我会在回答中尽量说得更清楚。

@DavidAntaramian给出了一个很好的例子。但是如果你想要一个简单的，你可以看看这个。
他们在github上的最新示例使用.NET Core，但您可以从2015年10月开始下载发布版。

您的web api端点表面JSON数据，您可以使用angular处理的所有其他内容，angular中的路由简单直观，是的，angular的默认ng路由就足够了，ui路由器用于更复杂的嵌套路由。首先学习angular，您会发现集成WebAPI并没有什么大不了的，它很像在mvc中使用jQueryAjax，只是您有angular的$http.CD。谢谢你的更正。我现在将更新问题。为了避免显示路由，您可能必须使用ng switch或ng include。这将允许您根据已按下的链接显示不同的内容，并且不会更改路由。@Sedushi-我不能100%确定这一点，但我认为AngularUI路由器将允许我在不显示路由的情况下执行此操作。希望其他人可以发表评论，让我知道这是不是真的，如果这是唯一的选择，你的建议。我会有点担心使用ng switch做任何事情，因为我认为这会导致一个非常大的页面。也许包括ng，但让我们看看其他人有什么建议。谢谢您的评论。@SamanthaJ我查看了ui路由器，看起来您确实可以在不显示url的情况下更改路由。我修改了文档中的一个示例，该示例显示了这一点。它的url中仍然有#/，你可以通过启用html5模式来摆脱它，但是由于某些原因，plunker不喜欢html5模式，所以我把它注释掉了。当我在本地尝试时，即使启用了html5模式，一切都很好