asp.net - 使用 AngularJS、WebAPI 2 和 Oauth 2 时，如何将授权信息发送回我的客户端应用程序？

Question

我有一个 AngularJS 客户端应用程序，它使用 javascript(不是 CoffeeScript 或 typescript )Oauth2 使用最新的 WebAPI 2 应用程序进行身份验证身份2。我的应用程序中的所有软件都是最新的，并且基于 this example 。我的客户端浏览器目标是IE9及以上版本。

请注意，我对上面的示例做了一些细微的更改，因为我没有对使用转换发送到服务器的所有数据进行 urlencode。相反，我仅在下面的验证方法中进行 urlencode:

user.authenticate = function (userName, password, rememberMe, successCallback, errorCallback) {
    var config = {
        method: 'POST',
        url: '/Token',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        data: 'grant_type=password&username=' + encodeURIComponent(userName) + '&password=' + encodeURIComponent(password),
    };

我正在使用 VS2013 Update 2 进行开发，在服务器上，我使用 C#、最新的 Entity Framework 和 SQL Server 2012。

要登录我的客户端，请调用 WebAPI 的/Token 方法并传递用户 ID 和密码。然后，WebAPI 将一个 token 响应给我存储的客户端。每次向 WebAPI 发出请求时，都会发回 token 并进行身份验证:

$http.defaults.headers.common.Authorization = 'Bearer ' + user.data.bearerToken;

到目前为止，这种方法效果很好，但就目前情况而言，应用程序无法区分分配有不同 Angular 色的用户之间的差异。

某些WebAPI方法只能由具有特定 Angular 色的用户执行。我想调整我的前端 AngularJS 应用程序的菜单，以便只有当用户具有此 Angular 色时，相应的链接才会显示可见。我确实意识到这不会阻止用户检查 HTML 和发布，但我并不担心这一点，因为我仍然有方法修饰来限制不处于 Angular 色中的用户执行操作的能力。

有人可以给我一个例子，说明如何使用我在问题中提到的仅上面提到的产品套件以及 JavaScript Web token 来实现此目的(如果它们有助于使解决方案保持最新) 。据我了解， Angular 色是由声明处理的，但我不知道如何添加这些 Angular 色并使用 token 将它们发送回客户端。我在互联网上做了很多研究，但我找不到任何好的例子，因为我认为其中大部分都是非常新的，没有多少人有机会探索 SPA 如何使用这些最新的软件组件。

回答此问题时请注意，我并不是在寻找可以告诉社区如何在服务器上设置 Angular 色的答案，也不是在寻找解释提供 Angular 色的重要性的答案在服务器上进行检查。我想几乎每个人都意识到这一点。我真正认为有用的是一些非常详细的技术建议以及示例代码和解释。为了保持答案的重点，如果不将不满足此需求的答案作为建议答案发布，可能会对每个人都有帮助。

提前谢谢您。

Answer 1

您的问题的简短答案是 ApplicationOAuthProvider.CreateProperties 方法。它默认为您创建，位于 WebApi2/Provider/ApplicationOAuthProvider.cs 下，默认情况下它仅发送 userName

//WepApi2/Providers/ApplicationOAuthProvider.cs
public static AuthenticationProperties CreateProperties(string userName)
{
    IDictionary<string, string> data = new Dictionary<string, string>
    {
        { "userName", userName }
    };
    return new AuthenticationProperties(data);
}

我将进行以下更新(以防我稍后需要发送更多用户数据):

public static AuthenticationProperties CreateProperties(string userName, ClaimsIdentity oAuthIdentity)
{ 
  IDictionary<string, string> data = new Dictionary<string, string>
  {
      { "userName", userName},
      { "roles",string.Join(",",oAuthIdentity.Claims.Where(c=> c.Type == ClaimTypes.Role).Select(c => c.Value).ToArray())}

  };
  return new AuthenticationProperties(data);
}

如果您没有对 WebApi 项目进行重大更改，则仅在两个位置引用 ApplicationOAuthProvider.CreateProperties，只需更新调用代码以传递 oAuthIdentity使用user.UserName，您将获得随访问 token 响应一起发送的用户 Angular 色:

{
 "access_token": "ZpxAZyYuvCaWgShUz0c_XDLFqpbC0-DIeXl_tuFbr11G-5hzBzSUxFNwNPahsasBD9t6mDDJGHcuEqdvtBT4kDNQXFcjWYvFP7U2Y0EvLS3yejdSvUrh2v1N7Ntz80WKe5G_wy2t11eT0l48dgdyak8lYcl3Nx8D0cgwlQm-pePIanYZatdPFP9q5jzhD-_k9SF-ARTHgf0ePnbvhLBi1MCYQjvfgPKlbBHt0M5qjwGAeFg1IhSVj0gb4g9QTXoiPhRmxGBmjOpGgzxXixavmrpM7cCBFLoR3DCGnIJo6pwT-6VArxlB8-ZyyOZqh_6gGtptd0lIu8iJRUIGwO9HFNkROdoE9T4buwLnhPpWpy9geBjPVwsB1K3xnbch26YbklhxIHVybBxeIVXd17QTw_LjlQ5TJdqpAYfiZ5B9Nx2AFYYYe3--aemh4y1XOIvN",
 "token_type": "bearer",
 "expires_in": 1209599,
 "userName": "MK",
 "roles": "Admin,Public",
 ".issued": "Fri, 23 May 2014 17:36:54 GMT",
 ".expires": "Fri, 06 Jun 2014 17:36:54 GMT"
}

现在您已经有了可用的 Angular 色，您可以使用 Angular 条件指令根据用户 Angular 色显示/隐藏操作。

如果您需要更多说明，请告诉我。

编辑:

使用 Authorize 属性修饰 Controller 方法是有效的，因为 HttpContext.Current.User.Identity 实际上是 ClaimsIdentity。但为了不在应用程序内部硬编码安全逻辑，我更喜欢使用 ClaimsAuthorizationManager

public ActionResult Secure()
{
  if(!ClaimsPrincipalPermission.CheckAccess("resource", "action"))
    return new HttpUnauthorizedResult();

  ViewBag.Message = "You are allowed to perform action on resource.";
  return View();
}

使用RoleManager创建 Angular 色:

RoleManager roleManger = new RoleManager<IdentityRole>(new RoleStore<IdentityRole>());
roleManager.Create(new IdentityRole() { Name = "Admin" });

使用UserManager进行 Angular 色分配:

userManager.AddToRole(user.Id, "Admin");