使用AngularJS,WebAPI 2和Oauth 2时,如何将授权信息发送回我的客户端应用程序？

Question

我有一个AngularJS客户端应用程序使用javascript(不是coffeescript或typescript)Oauth2来WebAPI 2使用最新的应用程序进行身份验证Identity 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.

要登录我的客户端,请将/ Token方法调用到WebAPI并传递用户标识和密码.然后WebAPI用令牌响应我存储的客户端.每次向WebAPI发出请求时,都会发送令牌并进行身份验证:

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

到目前为止,这种方法非常有效,但是现在应用程序无法区分分配了不同角色的用户之间的区别.

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

有人能给我一个例子,说明如何使用上面提到的产品套件,我在问题中加上JavaScript Web Tokens,如果它们有助于使解决方案更新.从我理解的角色是由声明处理,但我不明白如何添加这些并将其发送回带有令牌的客户端.我在互联网上做了很多研究,但我找不到任何好的例子,因为我认为大部分都是新的,没有多少人有机会探索SPA如何使用这些最新的软件组件.

在回答这个问题时,请注意我不是在寻找可以告诉社区如何在服务器上设置角色的答案,或者是一个解释在服务器上提供角色检查的重要性的答案.我想几乎每个人都知道这一点.我真正想到的是一些非常详细的技术建议,包括示例代码和解释.为了使答案集中,如果不满足此需求的答案不作为建议的答案发布,那么对每个人来说可能会有所帮助.

先感谢您.

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并且您将获得与访问令牌响应一起发送的用户角色:

{
 "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条件指令根据用户角色显示/隐藏操作.

如果您需要更多说明,请告诉我.

编辑:

使用Authorize属性修饰控制器方法是有效的,因为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:

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

角色分配使用UserManager:

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