我想在使用asp.net mvc webapi作为后端和客户端路由(没有cshtml)的SPA angularjs应用程序中创建一个身份验证和授权示例。以下是可用于设置完整示例的函数示例。但我无法全力以赴。任何帮助表示赞赏。
问题:
示例代码:
登录表单
<form name="form" novalidate>
<input type="text" ng-model="user.userName" />
<input type="password" ng-model="user.password" />
<input type="submit" value="Sign In" data-ng-click="signin(user)">
</form>
身份验证角色控制器
$scope.signin = function (user) {
$http.post(uri + 'account/signin', user)
.success(function (data, status, headers, config) {
user.authenticated = true;
$rootScope.user = user;
$location.path('/');
})
.error(function (data, status, headers, config) {
alert(JSON.stringify(data));
user.authenticated = false;
$rootScope.user = {};
});
};
我的API后端API代码。
[HttpPost]
public HttpResponseMessage SignIn(UserDataModel user)
{
//FormsAuthetication is just an example. Can I use OWIN Context to create a session and cookies or should I just use tokens for authentication on each request? How do I preserve the autentication signed in user on the client?
if (this.ModelState.IsValid)
{
if (true) //perform authentication against db etc.
{
var response = this.Request.CreateResponse(HttpStatusCode.Created, true);
FormsAuthentication.SetAuthCookie(user.UserName, false);
return response;
}
return this.Request.CreateErrorResponse(HttpStatusCode.Forbidden, "Invalid username or password");
}
return this.Request.CreateErrorResponse(HttpStatusCode.BadRequest, this.ModelState);
}
授权 使用JWT库来限制内容。
config.MessageHandlers.Add(new JsonWebTokenValidationHandler
{
Audience = "123",
SymmetricKey = "456"
});
我的API方法
[Authorize]
public IEnumerable<string> Get()
{
return new string[] { "value1", "value2" };
}
答案 0 :(得分:91)
是否使用cookie身份验证或(承载)令牌仍取决于您拥有的应用程序类型。据我所知,还没有最好的做法。但由于您正在使用SPA,并且已经在使用JWT库,我倾向于使用基于令牌的方法。
不幸的是,我无法帮助您使用ASP.NET,但通常JWT库会为您生成并验证令牌。您所要做的就是在凭据(和秘密)上调用generate
或encode
,并在每个请求发送的令牌上调用verify
或decode
。而且您不需要在服务器上存储任何状态,也不需要发送cookie,您可能使用FormsAuthentication.SetAuthCookie(user.UserName, false)
做了什么。
我确定您的库提供了有关如何使用生成/编码和验证/解码令牌的示例。
因此,生成和验证不是您在客户端执行的操作。
流程如下:
第1步和第3步:
app.controller('UserController', function ($http, $window, $location) {
$scope.signin = function(user) {
$http.post(uri + 'account/signin', user)
.success(function (data) {
// Stores the token until the user closes the browser window.
$window.sessionStorage.setItem('token', data.token);
$location.path('/');
})
.error(function () {
$window.sessionStorage.removeItem('token');
// TODO: Show something like "Username or password invalid."
});
};
});
只要用户打开页面, sessionStorage
就会保留数据。如果您想自己处理到期时间,可以使用localStorage
代替。界面是一样的。
第4步:
要将每个请求上的令牌发送到服务器,您可以使用Angular调用的Interceptor。您所要做的就是获取先前存储的令牌(如果有)并将其作为标题附加到所有传出请求:
app.factory('AuthInterceptor', function ($window, $q) {
return {
request: function(config) {
config.headers = config.headers || {};
if ($window.sessionStorage.getItem('token')) {
config.headers.Authorization = 'Bearer ' + $window.sessionStorage.getItem('token');
}
return config || $q.when(config);
},
response: function(response) {
if (response.status === 401) {
// TODO: Redirect user to login page.
}
return response || $q.when(response);
}
};
});
// Register the previously created AuthInterceptor.
app.config(function ($httpProvider) {
$httpProvider.interceptors.push('AuthInterceptor');
});
并确保始终使用SSL!