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

Question

我有一个AngularJS 客户端应用程序，它使用javascript（不是coffeescript 或typescript）Oauth2 使用最新的Identity 2 对WebAPI 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#、最新的实体框架和 SQL Server 2012。

要登录，我的客户端调用 WebAPI 的 /Token 方法并传递用户 ID 和密码。 WebAPI 然后用一个令牌响应我存储的客户端。对于 WebAPI 的每个请求，都会发回令牌并进行身份验证：

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

到目前为止，这工作得很好，但就目前而言，应用程序无法区分分配给他们不同角色的用户之间的区别。

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

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

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

提前谢谢你。

Answer 1

这里有另一个答案：

在 ApplicationOAuthProvider.cs

中

  public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
        {
            var userManager = context.OwinContext.GetUserManager<ApplicationUserManager>();

            ApplicationUser user = await userManager.FindAsync(context.UserName, context.Password);


            if (user == null)
            {
                context.SetError("invalid_grant", "The user name or password is incorrect.");
                return;
            }

只需添加一个自定义标题！

 context.OwinContext.Response.Headers.Add("Roles", userManager.GetRoles(user.Id).ToArray());

Answer 2

我的情况与您的情况非常相似，但我没有使用令牌进行身份验证，而是使用身份服务器 (Thinktecture) 来处理我的身份验证。我的应用程序重定向到身份服务器进行身份验证，并返回一些非常基本的声明（用户名和电子邮件）。一旦有人尝试首先浏览该页面，就会发生这种情况。一旦用户通过身份验证并重定向到我的应用程序，我就会再次调用服务器以获取用户的权限。这些权限存储在安全服务 (AngularJS) 中，该服务还公开了“hasPermissions”方法。然后我使用 ng-if 来决定是否要显示页面的某些部分——包括菜单项。大意是这样的：

var service = {
    currentUser: ...,
    isAuthenticated: function() {
        return ...;
    },
    checkAccess: function(permission) {
        return service.isAuthenticated() ?
            !!(service.currentUser.permissions.indexOf(permission) > -1) : false;
    }
}

请记住，所有决定点击开发工具按钮并查看的人都可以看到所有权限和 html 元素。在执行任何操作之前，您必须在服务器端进行相同的检查。我们有一个基于 this 的自定义 Authorization 属性，用于检查用户是否具有执行 MVC/WebAPI 操作所需的权限，然后再执行简单的情况，或者在执行任何操作之前在操作或 HTTP 资源中实际检查它需要提升的权限。

如果您希望客户端看不到任何 html 元素或站点的某些部分，您可以将模板指向 MVC 操作，该操作将进行身份验证，然后返回 HTML 模板或重定向到另一个页面（不是 SPA 领域）并在返回响应之前让它们在服务器上进行身份验证。

Answer 3

您的问题的简短答案是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");

Answer 4

我认为有两种方法可以解决您的问题。

1. 将“角色”信息通过哈希或简单字符串附加到令牌中，因为您是生成令牌的人，然后您可以在角度上对其进行解密。

2. 您似乎想使用 ASP.NET 身份系统并在那里存储和检索角色信息。如果是这种情况，您可以通过this post 注意“初始化数据库以创建管理员角色和管理员用户”部分。

IMO，#1 将使您在如何存储和使用用户数据方面更加灵活，因为 #2 您正在关注 Microsoft 的 IdentityUser ，尽管它有时看起来很神奇，而且它往往会发布限制，您需要花时间了解如何它在幕后工作并使其适用于您的项目。

要了解更多关于您在创建 WebAPI 项目期间选择的“个人用户帐户”，您可以前往http://www.asp.net/visual-studio/overview/2013/creating-web-projects-in-visual-studio#indauth