使用普通 Javascript/AJAX 实施基于客户端令牌的身份验证

Question

谁能给我指点一篇解释使用 Javascript 实现客户端令牌身份验证的文章？

我在 Angular 上找到了很多文章，但这不是我要找的。这让我想到了是否可以用 Javascript.

来完成的问题

还有如何处理身份验证服务器抛出 401 的情况。是否有内置异常来检测该响应？或者是否需要实施自定义异常？

Answer 1

我个人在我的一个项目中使用了 JSON 网络令牌。 http://blog.slatepeak.com/creating-a-simple-node-express-api-authentication-system-with-passport-and-jwt 是关于如何在服务器端设置 JSON 网络令牌的教程。

一旦您获得令牌作为对客户端的响应，您就可以将令牌存储在 window.localStorage 上。

var credentials = {
    username : document.getElementById("username").value,
    password : document.getElementById("password").value
};
var url = window.localStorage.getItem('appUrl');
$.ajax({
  url: url + '/register',
  type: 'POST', 
  data: { username: credentials.username, password: credentials.password },
  success: function(Data) {
           window.localStorage.setItem('token', Data.token);
          },
  beforeSend: function(xhr){xhr.setRequestHeader('Authorization', window.localStorage.getItem('token'));},
  error: function() {
          alert('Error occured');
          }
});

});

然后您可以在 AJAX 调用中将其附加为页眉，同时导航到其他页面。

$.ajax
 ({
  type: "GET",
  url: "index1.php",
  data: '{}',
  beforeSend: function (xhr){ 
     xhr.setRequestHeader('Authorization',window.localStorage.getItem('token')); 
  },
 success: function (){
  alert('Thanks for your comment!'); 
 }
});

Answer 2

这对我有用..

var token = gettoken();
function getDatatypes() {
    if (isEmpty(token)) {
        token = gettoken();

    }

    var request = getDatatypesFromApi();
        request.success(function (data) {
            alert('success!');

        });
        request.error(function (httpObj, textStatus) {
            if (httpObj.status == 401)
                gettoken();
        });    
}
function getDatatypesFromApi() {
    var request = $.ajax
 ({
     type: "GET",
     url: "http://yoururl.com/",
     data: '',
     headers:{
         'Authorization': 'Basic ' + token
     },
     dataType: "json",
     timeout: 5000,
 });
    return request;
}
function gettoken() {
    var credentials = {
        username: "userid",
        password: "PASS",
        domain: "",
        extensionsAppId:"{extAppId}"

    };
    var url = "http://thelinktoresource/"
    $.ajax({
        url: url,
        type: 'GET',
        data: { userId: credentials.username, password: credentials.password, domain: credentials.domain, extensionsAppId: credentials.extensionsAppId },
        dataType: "json",
        contentType: 'application/json; charset=UTF-8',
        success: function (Data) {
            console.log(Data);
            token = Data.replace(/"/ig, ''); 
            return token;
        },

        error: function () {
            alert('Error occured');
            return "undefined";
        }
    });

}

function isEmpty(strIn) {
    if (strIn === undefined) {
        return true;
    }
    else if (strIn == null) {
        return true;
    }
    else if (strIn == "") {
        return true;
    }
    else {
        return false;
    }
}

使用普通 Javascript/AJAX 实施基于客户端令牌的身份验证

Implement clientside token-based authentication using plain Javascript/AJAX

javascript

asp.net

ajax

token

http-status-code-401