0
私は以下のことを行っています。 HTTPセッション認証 Jhipster - Jqueryを使用したセッション認証
- 作成しJhipsterアプリケーション。
私はJquery ajaxを使用して認証しようとしています。しかし、私は次のエラーが発生します。
{
"timestamp" : "2017-01-04T14:09:59.257+0000",
"status" : 403,
"error" : "Forbidden",
"message" : "Invalid CSRF Token '16254aa2-e49d-41df-9602-ea32559617bd' was found on the request parameter '_csrf' or header 'X-XSRF-TOKEN'.",
"path" : "/api/authentication"
}
私は、Jqueryを使用してログインする方法を理解するために2日以上を費やしました。あなたができるなら、私を助けてください... :(
私は認証を検証するために作成したサンプルHTML以下。
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script src="jquery-cookie.js"></script>
<script lang="javascript">
var domain = "127.0.0.1";
// A $(document).ready() block.
$(document).ready(function() {
// This request will get the CSRF-TOKEN from the server and add it in the cookies
$.ajax({
type: 'GET',
url:"http://"+domain+":8080/",
success: function(data, textStatus, request){
console.log("Get Request fired successfully.");
},
error: function (request, textStatus, errorThrown) {
console.log(request);
console.log(request.getResponseHeader('Access-Control-Allow-Credentials'));
}
});
/**
* Function to get the cookie
*/
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
console.log("Cookie Value: " + cookieValue);
console.log("Document Cookie Value: " + document.cookie);
return cookieValue;
}
// This ajax setup will add the XSRF-TOKEN saved in cookies to eery POST, PUT, DELETE request.
// You dont need the tokens for GET request.
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (settings.type == 'POST' || settings.type == 'PUT' || settings.type == 'DELETE') {
// if ((/^http:.*/ //.test(settings.url) || /^https:.*/.test(settings.url))) {
// Only send the token to relative URLs i.e. locally.
xhr.setRequestHeader("X-XSRF-TOKEN", getCookie('XSRF-TOKEN'));
// }
}
}
});
});
// Use this function for login
function login(){
var url = "http://"+domain+":8080/api/authentication";
var username = $("#username").val();
var password = $("#password").val();
var data = 'j_username=' + encodeURIComponent(username) +
'&j_password=' + encodeURIComponent(password) + '&remember-me=true' + '&submit=Login';
console.log("Calling Login");
$.ajax({
type: "POST",
url: url,
data: data,
dataType: 'json',
xhrFields: {
withCredentials: true
},
success: function(){
console.log("User logged in.");
},
error: function(response){
console.log("Error in Login in.");
console.log(response.responseText);
}
});
}
</script>
</head>
<body>
<h1>Login Example</h1>
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" id="username" value="admin" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" id="password" value="admin" required>
<button type="button" onclick="login();">Login</button>
</div>
</body>
</html>