Angular 2 & dotnet core 集成 windows 身份验证答案

【问题标题】：Angular 2 & dotnet core integrated windows authenticationAngular 2 & dotnet core 集成 windows 身份验证
【发布时间】：2017-06-22 08:53:48
【问题描述】：

我有一个简单的设置。 Angular2 客户端和 dotnet 核心 webapi 服务器。强制 Windows 身份验证，因此没有登录/注册页面。在客户端，我需要知道当前用户是否具有特定权限。假设他可以是用户、高级用户或管理员。这些角色必须通过 Active Directory 分配（特定组的成员？其他？）。问题是我如何在客户端获取用户的角色？

到目前为止，第一个请求（针对 index.html）如下所示：

Request URL:http://localhost:5000/
Request Method:GET
Status Code:200 OK
Remote Address:[::1]:5000

Response Headers:
Accept-Ranges:bytes
Access-Control-Allow-Origin:*
Content-Encoding:gzip
Content-Type:text/html
Date:Sat, 11 Mar 2017 23:00:17 GMT
ETag:"1d29abb3a9b8e62"
Last-Modified:Sat, 11 Mar 2017 23:00:08 GMT
Persistent-Auth:true
Server:Kestrel
Transfer-Encoding:chunked
Vary:Accept-Encoding
WWW-Authenticate:Negotiate oRswGaADCgEAoxIEEAEAAAAgBHIw6Z3ltQAAAAA=
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?QzpcUHJvamVjdHNcSGxyXFplbml0aFxaZW5pdGguV2Vi?=
X-StackifyID:V1|a92d413d-a6f2-41f5-82d4-d561bcfb7ea4|

Request Headers:
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Authorization:Negotiate oXcwdaADCgEBoloEWE5UTE1TU1AAAwAAAAAAAABYAAAAAAAAAFgAAAAAAAAAWAAAAAAAAABYAAAAAAAAAFgAAAAAAAAAWAAAABXCiOIKADk4AAAAD2dOupNeJw531jZD2IvezcmjEgQQAQAAAF0+6pxdYvmTAAAAAA==
Cache-Control:no-cache
Connection:keep-alive
Cookie:_ga=GA1.1.1850763475.1487368913
Host:localhost:5000
Pragma:no-cache
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

第二个：

Request URL:http://localhost:5000/inline.bundle.js
Request Method:GET
Status Code:200 OK
Remote Address:[::1]:5000

Response Headers:
Accept-Ranges:bytes
Access-Control-Allow-Origin:*
Content-Encoding:gzip
Content-Type:application/javascript
Date:Sat, 11 Mar 2017 23:00:18 GMT
ETag:"1d29abb3a9b9a84"
Last-Modified:Sat, 11 Mar 2017 23:00:08 GMT
Persistent-Auth:true
Server:Kestrel
Transfer-Encoding:chunked
Vary:Accept-Encoding
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?QzpcUHJvamVjdHNcSGxyXFplbml0aFxaZW5pdGguV2ViXGlubGluZS5idW5kbGUuanM=?=
X-StackifyID:V1|9ab31082-9a9d-4513-8e8c-ae83e8163117|

Request Headers:
Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Cookie:_ga=GA1.1.1850763475.1487368913
Host:localhost:5000
Pragma:no-cache
Referer:http://localhost:5000/
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

还有一个用于 webapi 的：

Request URL:http://localhost:5000/mymethod
Request Method:GET
Status Code:200 OK
Remote Address:[::1]:5000

Response Headers:
Access-Control-Allow-Origin:*
Content-Type:application/json; charset=utf-8
Date:Sat, 11 Mar 2017 23:00:19 GMT
Persistent-Auth:true
Server:Kestrel
Transfer-Encoding:chunked
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?QzpcUHJvamVjdHNcSGxyXFplbml0aFxaZW5pdGguV2ViXGFwaVxjb25maWd1cmF0aW9uXHZlcnNpb24=?=
X-StackifyID:V1|0f198f5d-a0fe-4e6c-974a-bd31f0d32ec6|

Request Headers:
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Cookie:_ga=GA1.1.1850763475.1487368913
Host:localhost:5000
Pragma:no-cache
Referer:http://localhost:5000/
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

我可以采取什么方法来获取用户权限（并通过...将它们保留在客户端）并将它们用于路由保护？

也可能是页面在加载过程中进行了多次 webapi 调用。我是否授权用户每次通话或以某种方式使用以前的通话结果？

谢谢。

【问题讨论】：

标签： angular asp.net-web-api authorization .net-core

【解决方案1】：

我认为这篇文章是 angularjs 和集成 windows 身份验证的一个很好的起点。

CodeProject : AngularJS-Web-API-Active-Directory-Security

关于您的第二个问题，您可以使用带有用户名、角色、到期时间的加密令牌，并且在每个请求中，解密此令牌服务器端并在服务器端使用它。

您还可以在每次请求时更新令牌并将其重新发送给客户端，以更新其会话信息。

【讨论】：

这是一篇不错的文章，尽管它没有使用 Angular2 或 .net 核心。但我真的在寻找例如如何让客户端知道用户是否具有特定角色/权限，以便我可以保护我的路线。
请告诉我们最终的解决方案，这个问题真的很有趣。

【解决方案2】：

如果您真的想使用 AD 组作为您的授权，您将需要设置一个权限服务，通过 webapi 方法查询 AD，并使用 hot observable 来传播权限，而无需不断地重新查询 AD。

在您的 webapi 方法中：

public List<string> GetUserPermissions(){
    List<string> permissionsList = new List<string>();
    if (User.IsInRole("PowerUsers")){
        permissionsList.Add("PowerUsers");
    }
    if (User.IsInRole("Admin")) {
        permissionsList.Add("Admin");
    }
    if (User.IsInRole("User")) {
        permissionsList.Add("User");
    }
    return permissionsList;
}

基本上，您需要在权限服务中执行以下操作：

permissions: any[] = [];

initPermissions(): void {
    this.getPermissions().subscribe(perms => this.permissions = perms);
}

getPermissions(): Observable<any> {
    return this.http.get(`${this.baseUrl}/api/Permissions/GetUserPermissions`)
             .publishLast().refCount();
}

isInRole(roleName: string): boolean{
    return this.permissions.some(perm => perm === roleName);
}

在您的 app.component ngInit() 中，从您的服务中调用 initPermissions() 方法。

然后你需要将权限服务导入到你想要使用它的组件中，在构造函数private permissions: permissionsService 中创建权限，你可以做一些很酷的事情，比如*ngIf="permissions.isInRole('Admin')" 来隐藏功能并使用内部身份验证保护和什么的。但是，您可能仍希望在您的 Web api 方法上使用授权装饰器来保护您的数据。

请注意，以上不是我的实际权限代码，因此您可能需要对其进行调试才能使其正常工作。你可能也想改进它，它只是给你一些想法。

【讨论】：