Use basic authentication with jQuery and Ajax
Solution 1
Use jQuery's beforeSend
callback to add an HTTP header with the authentication information:
beforeSend: function (xhr) {
xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
},
Solution 2
How things change in a year. In addition to the header attribute in place of xhr.setRequestHeader
, current jQuery (1.7.2+) includes a username and password attribute with the $.ajax
call.
$.ajax
({
type: "GET",
url: "index1.php",
dataType: 'json',
username: username,
password: password,
data: '{ "comment" }',
success: function (){
alert('Thanks for your comment!');
}
});
EDIT from comments and other answers: To be clear - in order to preemptively send authentication without a 401 Unauthorized
response, instead of setRequestHeader
(pre -1.7) use 'headers'
:
$.ajax
({
type: "GET",
url: "index1.php",
dataType: 'json',
headers: {
"Authorization": "Basic " + btoa(USERNAME + ":" + PASSWORD)
},
data: '{ "comment" }',
success: function (){
alert('Thanks for your comment!');
}
});
Solution 3
Use the beforeSend callback to add a HTTP header with the authentication information like so:
var username = $("input#username").val();
var password = $("input#password").val();
function make_base_auth(user, password) {
var tok = user + ':' + password;
var hash = btoa(tok);
return "Basic " + hash;
}
$.ajax
({
type: "GET",
url: "index1.php",
dataType: 'json',
async: false,
data: '{}',
beforeSend: function (xhr){
xhr.setRequestHeader('Authorization', make_base_auth(username, password));
},
success: function (){
alert('Thanks for your comment!');
}
});
Solution 4
Or, simply use the headers property introduced in 1.5:
headers: {"Authorization": "Basic xxxx"}
Reference: jQuery Ajax API
Solution 5
The examples above are a bit confusing, and this is probably the best way:
$.ajaxSetup({
headers: {
'Authorization': "Basic " + btoa(USERNAME + ":" + PASSWORD)
}
});
I took the above from a combination of Rico and Yossi's answer.
Comments
-
Patrioticcow over 3 years
I am trying to create a basic authentication through the browser, but I can't really get there.
If this script won't be here the browser authentication will take over, but I want to tell the browser that the user is about to make the authentication.
The address should be something like:
http://username:[email protected]/
I have a form:
<form name="cookieform" id="login" method="post"> <input type="text" name="username" id="username" class="text"/> <input type="password" name="password" id="password" class="text"/> <input type="submit" name="sub" value="Submit" class="page"/> </form>
And a script:
var username = $("input#username").val(); var password = $("input#password").val(); function make_base_auth(user, password) { var tok = user + ':' + password; var hash = Base64.encode(tok); return "Basic " + hash; } $.ajax ({ type: "GET", url: "index1.php", dataType: 'json', async: false, data: '{"username": "' + username + '", "password" : "' + password + '"}', success: function (){ alert('Thanks for your comment!'); } });