Реализовать аутентификацию на основе маркеров на клиентской основе с использованием простого Javascript/AJAX

Question

Может ли кто-нибудь указать мне на статью, объясняющую реализацию аутентификации клиентского токена с использованием Javascript?

Я нашел много статей об Угловом, но это не то, что я ищу. Это подводит меня к вопросу, если это можно сделать с помощью Javascript.

Также как обрабатывать сценарии, когда сервер auth выбрасывает 401. Есть ли встроенное исключение для обнаружения этого ответа? Или это настраиваемое исключение, которое требуется реализовать?

Answer 1

Это работает для меня ..

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; 
    } 
} 

Answer 2

Я лично использовал токены 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!'); 
} 
});