AngularJS + ASP.NET Web API + ASP.NET MVC 身份验证

Posted 2023-03-09

【中文标题】AngularJS + ASP.NET Web API + ASP.NET MVC 身份验证

【英文标题】：AngularJS + ASP.NET Web API + ASP.NET MVC Authentication

【发布时间】：2014-06-02 00:07:37

【问题描述】：

我是 AngularJS 的新手，正在尝试为我的新 Web 应用程序评估它。

要求：

我将拥有一个 ASP.NET Web API，它将被 android、iPhone 和 Web 应用程序 (ASP.NET MVC) 使用。 ASP.NET Identity 将在 Web API 中实现。三个应用都会调用Web API的login方法来获取auth token。

问题：

我的问题是如何让 ASP.NET MVC 服务器端身份验证 工作（与 Web API 同步，因此我不必单独登录 ASP.NET MVC）同时 Angular 进行调用获取 html 模板/视图、javascript 文件或其他资源。我浏览了很多关于 AngularJS 的文章和博客，但仍然找不到符合我要求的安全模型。

可能的解决方案：

直接调用 ASP.NET MVC 应用程序而不是 Web API 是一个好主意吗？ASP.NET MVC 应用程序将调用 Web API 进行登录，一旦通过身份验证，将身份验证令牌保存在会话中再加上创建一个 FormsAuthentication cookie 并在 cookie 数据中保存加密的身份验证令牌。此外，在 HTML 中的某处设置 auth 令牌在 ng-init 中，以使令牌在 AngularJS 范围内。现在，当 AngularJS 尝试调用 ASP.NET MVC 应用程序以获取 HTML 时，然后通过将 cookie 解密数据与会话中的身份验证数据匹配来对用户进行身份验证/授权。此外，AngularJS 将在标头中发送 auth 令牌以直接调用 Web API 方法，以便所有后续调用通过 Web API 进行数据操作。

【参考方案1】：

我用一个非常严格的解决方案解决了这个问题。我只是确保在 WebApiConfig 的 Register 方法中有以下两行代码：

config.SuppressDefaultHostAuthentication();
config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));

就是这样。现在，我的 MVC 控制器查找会话 cookie 以进行授权，而我的 Web API 控制器在每个请求的标头中查找身份验证令牌。此外，Web API 本身会发送一个令牌 (JSON) 和一个会话 cookie 以响应登录/身份验证请求，例如http:\\www.mydomain.com\token.

所以现在我将我的登录请求发送到 Web API 以获取令牌以及会话 cookie。每个请求都会自动发送会话 cookie，因此我不必担心 MVC 控制器的授权。对于 Web API 调用，我在每个请求的标头中发送身份验证令牌，因为 Web API 控制器不关心随请求一起发送的会话 cookie。

【讨论】：

你能解释一下你的http:\\www.mydomain.com\token控制器怎么样？

您不必编写控制器来获取令牌。它是 asp.net 身份的一部分。所以我的源代码中没有任何控制器。 ASP.NET 身份负责处理这个问题。

@Haider - 我面临着类似的情况。你最终是如何将令牌传递给 AngularJS 应用程序的。你是用 ng-init 设置的吗？

ng-init 在服务器端输入值时使用，例如使用 Razor，而我对 Web API 进行登录调用，它以 json 格式返回令牌。一旦你有 json 中的令牌，你就可以将它存储在 cookie 或浏览器内存中。

@Haider，你是怎么知道的？一些具体的书籍，一些例子的经验？

【参考方案2】：

也值得一看：

https://bitbucket.org/david.antaramian/so-21662778-spa-authentication-example/overview

（基于this SO question）

警告：不适合胆小的人...

ASP.NET Web API 2 HTML5 + AngularJS + $ngRoute NuGet 脚手架 约曼（咕噜/鲍尔） Owin 框架 (OAuth 2.0) CORS

【讨论】：

谢谢。这是我见过的最好的例子。很好的解释

【参考方案3】：

我认为你走在正确的道路上。我会将令牌存储在 Angular 服务中，以便您自己使用 (http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app)。我对“AngularJS 尝试调用 ASP.NET MVC 应用程序以获取 HTML”的意思有点困惑，你不需要保护 MVC 应用程序，它只是在运行你的 Angular 对吗？ API 也是您要保护的部分。