c# - Knockout 中的 ASP.Net WebAPI Owin 身份验证 token

Question

我正在尝试创建一个使用 .Net ASP.Net WebAPI 和 KnockoutJs 作为前端的演示项目。我已经创建了 Controller 方法来监听/token post，验证用户，并返回一个 token 。这是通过 Knockout View Model 的 Ajax Post 完成的。

此代码有效。但是，当我从 webApi 返回 200(成功)时，我会重定向到一个 Controller 方法，并用 [Authorize] 装饰。这就是我遇到 401 - 未授权的地方。

Login()
    {
        var data = {
            username : this.login.emailAddress(),
            password : this.login.password(),
            RememberMe: this.login.rememberMe(),
            grant_type: "password"
        }

        return $.ajax({
            type: "POST",
            data: data,
            dataType: "json",
            url: "/token",
            contentType: "application/json"
        }).done((reply) => {
            window.location.href = "/Home/AnotherThing";
        });

    }

我认为问题在于 - 我从我的/token(登录)调用中得到了响应，但没有对其进行任何操作。我不确定如何处理 token 。我愚蠢地认为 OAuth 会以某种方式将 token 放入我的 header 中，它们会神奇地出现在那里。我错了。

所以，我一直在寻找一个例子，然后我能找到的最好的是 Here

但这意味着我将在每个 View 模型上有很多重复的代码

摘录:

function ViewModel() {  
    var self = this;  

    var tokenKey = 'accessToken';  
    var RefTokenKey = 'refreshToken';  
    self.result = ko.observable();  
    self.user = ko.observable();  

    self.token = ko.observable();  
    self.refreshToken = ko.observable();  

    function showError(jqXHR) {  
        self.result(jqXHR.status + ': ' + jqXHR.statusText);  
    }  

    self.callApi = function () {  

        self.result('');  

        var token = sessionStorage.getItem(tokenKey);  

        var headers = {};  
        if (token) {  
            headers.Authorization = 'Bearer ' + token;  
        }  

        $.ajax({  
            type: 'GET',  
            url: '/api/values',  
            headers: headers  
        }).done(function (data) {  
            self.result(data);  
        }).fail(showError);  
    }  

    self.callToken = function () {  
        self.result('');  
        var loginData = {  
            grant_type: 'password',  
            username: self.loginEmail(),  
            password: self.loginPassword()  
        };  

        $.ajax({  
            type: 'POST',  
            url: '/Token',  
            data: loginData  
        }).done(function (data) {  
            self.user(data.userName);  
            // Cache the access token in session storage.  
            sessionStorage.setItem(tokenKey, data.access_token);  
            var tkn = sessionStorage.getItem(tokenKey);  
            $("#tknKey").val(tkn);  
        }).fail(showError);  
    }  

}  

var app = new ViewModel();  
ko.applyBindings(app);

这似乎是我所缺少的一部分:

sessionStorage.setItem(tokenKey, data.access_token);  
                var tkn = sessionStorage.getItem(tokenKey);  
                $("#tknKey").val(tkn);  

我是否需要每个 View 模型都有代码，然后转到 sessionStorage 并获取 token ？

所以，这个:

var token = sessionStorage.getItem(tokenKey);  

        var headers = {};  
        if (token) {  
            headers.Authorization = 'Bearer ' + token;  
        }  

        $.ajax({  
            type: 'GET',  
            url: '/api/values',  
            headers: headers  
        }).done(function (data) {  
            self.result(data);  
        }).fail(showError);  
    } 

看起来代码很多..这是正确的方法吗？

Answer 1

好的，所以您可以将不记名 token 附加到每个 HTTP 请求。我假设你在那里使用 jQuery？如果是这样的话，你可以 leverage the beforeSend config param .

提取一个可重复使用的方法，例如:

function onBeforeSend(xhr, settings) {    
  var token = sessionStorage.getItem(tokenKey);  

  if (token) {  
    xhr.setRequestHeader('Authorization', 'Bearer ' + token ); 
  }  
}

然后只需将该方法附加到每个需要 token 的 $.ajax 调用，如下所示:

$.ajax({  
  type: 'GET',  
  url: '/api/values',  
  headers: headers,
  beforeSend: onBeforeSend
}).done(function (data) {  
  self.result(data);  
}).fail(showError);  

onBeforeSend 函数显然需要通过您的 ajax 调用访问(我不是 knockout 的人所以我不知道它是否有任何结构，例如服务，但如果没有，您例如，可以为其命名空间以避免使其成为全局函数，但您的代码组织由您决定)。

这样，您只需将 beforeSend: onBeforeSend 位添加到每个需要身份验证的请求，这将避免不必要的代码重复。