使用 AngularJs、WebAPI 和 OAuth2 时，以明文形式获取用户角色以及 JWT

Question

我在 WebAPI 项目中使用 OAuth2。我在 OWIN 中间件中验证用户请求。身份验证成功后，我将向客户端发送 JWT 访问令牌。现在我可以在服务器上验证后续请求并在 Api 控制器上使用 [Authorize(Roles="myRole")] 属性。

但是如何在 AngularJs 中显示验证客户端内容并根据用户角色显示页面？我在客户端有 JWT，不知道如何从中获取用户角色？

这是从 JWT 中提取信息的好方法吗？

Answer 1

目前我们不提供任何可以帮助您在客户端上利用该信息的东西。另请注意：由于今天我们不在客户端验证令牌，我们不能真正信任其内容......而服务器端的 [Authorize] 属性仅在管道之后才有机会验证角色信息之前获取角色信息签名并确定令牌有效。我们可能会在未来引入一些有助于解决这种情况的内容，但目前您需要编写自定义代码或依赖服务器端回显内容。

Answer 2

您将需要解析该 JWT 并获取值。您可以在 angular-jtw 库的帮助下做到这一点。

1) 下载 angular-jwt.min.js (https://github.com/auth0/angular-jwt)

2) 将 "angular-jwt" 的依赖项放在应用程序模块上：

var app = angular.module("YOUR_APP", ["angular-jwt"]);

3) 将 jwtHelper 传递给您的服务或控制器或您希望使用它的任何地方。

    app.module.factory("YOUR_SERVICE", function(jwtHelper){
    ...
});

4) 使用你传入的jwtHelper的decodeToken方法解码你的token

例如，下面的代码从我的服务端点返回的 jwt 中解析出角色对象。从服务器成功 return 后，角色将从 jwt 中提取并 returned.

return $http.post(serviceEndPoints.tokenUrl, data, config)
                    .then(function (response) {
                        var tokenPayLoad = jwtHelper.decodeToken(response.data.access_token);

//Now do whatever you wish with the value. Below I am passing it to a function: (determineRole)

                        var userRole = determineRoles(tokenPayLoad.role);


            return userRole;
        });
    };

希望对您有所帮助

//胡迪尼

使用 AngularJs、WebAPI 和 OAuth2 时，以明文形式获取用户角色以及 JWT

Get user role in clear text along with JWT when using AngularJs, WebAPI and OAuth2

oauth

jwt

asp.net-web-api

angularjs

owin