我正在使用 Angular.js 和 ASP.NET 构建一个 SPA，我想知道保护它的最佳方法是什么。
这是我需要的：
我想使用 MVC 框架仅对登录用户隐藏我的应用程序。因此，用户在启动 SPA 之前要做的第一件事就是使用简单的登录表单登录网站。
当 Angular 应用启动时，它将使用 REST 请求与我的 ApiController 通信。
我还希望我的用户在 20 分钟不活动后自动注销。
我知道 REST 应该是无状态的……但我不知道如何在没有会话的情况下实现我所需要的一切……
但另一方面，我希望能够将我的 WebAPI 与未来的移动应用程序一起使用。我将不得不在此应用程序上使用令牌进行身份验证。
对我来说，实现这种身份验证的最佳方式是什么？
感谢您的宝贵时间！
【问题讨论】：
标签： angularjs asp.net-mvc asp.net-web-api single-page-application
我按照这篇文章here 中很好解释的内容开发了一个与您的条件相同的完整安全层。
顺便说一句，令牌将在 20 分钟后自动过期，因为当您创建它时，您将立即设置它的过期日期；每次您要发出请求时，系统都会检查令牌到期日期和当前日期，如果时间过去则拒绝您的令牌。例如，这是一个带有令牌和刷新令牌设置的典型 oauth 服务器配置：
internal static OAuthAuthorizationServerOptions GetAuthorizationServerOptions(IComponentContext scope)
{
OAuthAuthorizationServerOptions oAuthServerOptions = new OAuthAuthorizationServerOptions
{
AllowInsecureHttp = true,
ApplicationCanDisplayErrors = true,
TokenEndpointPath = new PathString(Constants.PublicAuth.OAUTH_TOKEN_PATH),
AuthorizeEndpointPath = new PathString(Constants.ExternalAuth.AUTH_ENDPOINT),
AccessTokenExpireTimeSpan = TimeSpan.FromMinutes(Constants.PublicAuth.TOKEN_EXPIRATION_IN_MINUTES),
Provider = scope.Resolve<AuthorizationServerProvider>(),
AccessTokenFormat = new CustomJwtFormat(),
RefreshTokenProvider = scope.Resolve<SimpleRefreshTokenProvider>()
};
return oAuthServerOptions;
}
刷新令牌也很有用，但您必须自己管理令牌替换；例如，在我们的应用程序中，我们通过单个服务传递每个 API 调用，如果服务器响应 401 (unauthorized)，它将尝试使用刷新令牌请求新令牌，然后再次尝试相同的调用。只有在第二次失败后，您才会被重定向到登录页面。
例如：
function executeCallWithAuth(method, url, payload, params) {
var defer = $q.defer();
debug.logf('{0}: {1}', method.toUpperCase(), url);
$http({ method: method, url: url, data: payload, headers: createHeaders(), params: params }).then(
function(results) { defer.resolve(results); },
function(error) {
if (error.status !== 401) defer.reject(error);
else {
debug.warn(`Call to: ${method}:${url} result in 401, try token refresh...`);
auth.refreshToken().then(
function() {
debug.warn('Token refresh succesfully, retry api call...');
$http({ method: method, url: url, data: payload, headers: createHeaders() }).then(
function(results) { defer.resolve(results); },
function(errors) { defer.reject(errors); });
},
function(tokenError) {
debug.warn('Token refresh rejected, redirect to login.');
$state.go('login');
defer.reject(tokenError);
});
}
});
return defer.promise;
}
和
function createHeaders() {
var headers = {
};
var authData = storage.get('authorizationData');
if (authData) {
headers.Authorization = 'Bearer ' + authData.token;
}
return headers;
}
使用Angular 保护路由的最佳方式是“不创建路由”。基本上，您需要加载用户配置文件，然后才能创建仅到他可以导航到的页面的路由。如果您不为页面创建路由，则不需要保护该页面：Angular 会自动将用户发送到 404。
【讨论】：
我会使用 OAuth2 保护您的 WebAPI 调用（您甚至可以使用内置的 Identity 2.0 提供程序，它随附）。保持您的 WebAPI 无状态，使用 SSL（考虑使用过滤器强制它），并使用 [Authorize] 标签来保护您的服务。在 MVC 方面，这将必须维护状态，并且您将希望登录表单从您的 WebAPI 层获取 OAuth2 令牌并将其传递给 Angular。将此到期时间设置为 20 分钟。您还可以在此处使用 cookie 身份验证模型，因为它需要在 MVC 端是有状态的，但是 Angular 对 WebAPI 层进行的所有 ajax 调用都需要将 OAuth2 令牌作为授权请求标头中的不记名令牌传递。
【讨论】：