plain JavaScript/AJAXを使用してクライアント側のトークンベース認証を実装する

Question

Javascriptを使用してクライアント側のトークン認証実装について説明する記事を誰かが指摘できますか？

私はAngularについて多くの記事を見つけましたが、それは私が探しているものではありません。それはJavascriptで行うことが可能かどうかの質問に私をもたらします。

また、認証サーバーが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

自分のプロジェクトの1つでJSON Webトークンを個人的に使用しています。 http://blog.slatepeak.com/creating-a-simple-node-express-api-authentication-system-with-passport-and-jwtは、サーバー側でJSON Webトークンを設定する方法に関するチュートリアルです。

クライアント側への応答としてトークンを取得すると、トークンを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!'); 
} 
});