在 Ionic Framework 中使用 ASP.NET Web Api 和 oAuth 的最佳实践是什么？

Question

总结：

假设我有一个 ASP.NET WebAPI2 应用程序作为我的后端，为了安全起见，它使用 oAuth（不记名访问令牌）。现在我想在我的 Ionic 应用程序（使用 AngularJS）中使用此 Web API。在 Ionic Framework 中处理授权和检索以及刷新访问令牌的最佳实践是什么？

更多信息：

假设我有 +100 个不同的 AJAX 调用我的网站 api。我想要的功能是，如果服务器挑战身份验证（即没有访问令牌或已过期），那么我会显示登录表单并最终获取访问令牌并将其保存以供后续调用。而且我还应该以某种方式将访问令牌与其他所有请求一起发送。显然我不能写一些代码并为每个需要授权的请求复制它。所以我正在寻找最好的 practices/implementations 来处理像 Ionic Framework (AngularJS) 中这样的身份验证情况。在此先感谢您的帮助。

Answer 1

您可以使用 AngularJS 拦截器来完成此任务，它会与下面的代码类似：

app.factory('authInterceptorService', ['$q', '$location', 'localStorageService', function ($q, $location, localStorageService) {

var authInterceptorServiceFactory = {};

var _request = function (config) {

    config.headers = config.headers || {};

    var authData = localStorageService.get('authorizationData');
    if (authData) {
        config.headers.Authorization = 'Bearer ' + authData.token;
    }

    return config;
}

var _responseError = function (rejection) {
    if (rejection.status === 401) {
        $location.path('/login');
    }
    return $q.reject(rejection);
}

authInterceptorServiceFactory.request = _request;
authInterceptorServiceFactory.responseError = _responseError;

return authInterceptorServiceFactory;

}]);

我已经写了详细的博客 post 关于如何将访问令牌从 AngularJS 应用程序发送到 Web Api back-end 在您不需要的集中位置复制任何代码。您可以检查 post 标题“AngularJS Token Authentication using ASP.NET Web API 2, Owin, and Identity”