Использовать базовую аутентификацию с JQuery и Ajax
Я пытаюсь создать базовую аутентификацию через браузер, но я не могу туда добраться.
Если этот скрипт не будет здесь, аутентификация браузера вступит во владение, но я хочу сказать браузеру, что пользователь собирается сделать аутентификацию.
Адрес должен быть примерно таким:
http://username:password@server.in.local/
У меня есть форма:
<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>
И скрипт:
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!');
}
});
11 ответов
Используйте jQuery's beforeSend Обратный вызов для добавления заголовка HTTP с информацией аутентификации:
beforeSend: function (xhr) {
xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
},
Как все меняется за год. В дополнение к атрибуту заголовка вместо xhr.setRequestHeaderтекущий jQuery (1.7.2+) включает в себя атрибут имени пользователя и пароля с $.ajax вызов.
$.ajax
({
type: "GET",
url: "index1.php",
dataType: 'json',
username: username,
password: password,
data: '{ "comment" }',
success: function (){
alert('Thanks for your comment!');
}
});
РЕДАКТИРОВАТЬ из комментариев и других ответов: чтобы быть ясным - для того, чтобы превентивно отправить аутентификацию без 401 Unauthorized ответ, а не setRequestHeader (до -1,7) использования 'headers':
$.ajax
({
type: "GET",
url: "index1.php",
dataType: 'json',
headers: {
"Authorization": "Basic " + btoa(USERNAME + ":" + PASSWORD)
},
data: '{ "comment" }',
success: function (){
alert('Thanks for your comment!');
}
});
Используйте обратный вызов beforeSend для добавления HTTP-заголовка с информацией аутентификации, например:
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!');
}
});
Или просто используйте свойство headers, представленное в 1.5:
headers: {"Authorization": "Basic xxxx"}
Справка: API jQuery Ajax
Приведенные выше примеры немного сбивают с толку, и это, вероятно, лучший способ:
$.ajaxSetup({
headers: {
'Authorization': "Basic " + btoa(USERNAME + ":" + PASSWORD)
}
});
Я взял вышесказанное из комбинации ответа Рико и Йосси.
Как предлагали другие, вы можете установить имя пользователя и пароль непосредственно в вызове Ajax:
$.ajax({
username: username,
password: password,
// ... other parameters.
});
ИЛИ используйте свойство headers, если вы не хотите хранить свои учетные данные в виде простого текста:
$.ajax({
headers: {"Authorization": "Basic xxxx"},
// ... other parameters.
});
Какой бы способ вы ни отправили, сервер должен быть очень вежливым. Для Apache ваш файл.htaccess должен выглядеть примерно так:
<LimitExcept OPTIONS>
AuthUserFile /path/to/.htpasswd
AuthType Basic
AuthName "Whatever"
Require valid-user
</LimitExcept>
Header always set Access-Control-Allow-Headers Authorization
Header always set Access-Control-Allow-Credentials true
SetEnvIf Origin "^(.*?)$" origin_is=$0
Header always set Access-Control-Allow-Origin %{origin_is}e env=origin_is
Объяснение:
Для некоторых междоменных запросов браузер отправляет предварительный запрос OPTIONS, в котором отсутствуют ваши заголовки аутентификации. Оберните ваши директивы аутентификации внутри тега LimitExcept, чтобы правильно ответить на предпечатную проверку.
Затем отправьте несколько заголовков, чтобы сообщить браузеру, что ему разрешено проходить аутентификацию, и Access-Control-Allow-Origin, чтобы предоставить разрешение для межсайтового запроса.
В некоторых случаях подстановочный знак * не работает как значение для Access-Control-Allow-Origin: вам необходимо вернуть точный домен вызываемого. Используйте SetEnvIf для захвата этого значения.
Используйте функцию jQuery ajaxSetup, которая может устанавливать значения по умолчанию для всех запросов ajax.
$.ajaxSetup({
headers: {
'Authorization': "Basic XXXXX"
}
});
JSONP не работает с базовой аутентификацией, поэтому обратный вызов jQuery beforeSend не будет работать с JSONP/Script.
Мне удалось обойти это ограничение, добавив в запрос имя пользователя и пароль (например, user:pw@domain.tld). Это работает практически с любым браузером, кроме Internet Explorer, где аутентификация через URL не поддерживается (вызов просто не будет выполнен).
Есть 3 способа добиться этого, как показано ниже
Способ 1:
var uName="abc";
var passwrd="pqr";
$.ajax({
type: '{GET/POST}',
url: '{urlpath}',
headers: {
"Authorization": "Basic " + btoa(uName+":"+passwrd);
},
success : function(data) {
//Success block
},
error: function (xhr,ajaxOptions,throwError){
//Error block
},
});
Способ 2:
var uName="abc";
var passwrd="pqr";
$.ajax({
type: '{GET/POST}',
url: '{urlpath}',
beforeSend: function (xhr){
xhr.setRequestHeader('Authorization', "Basic " + btoa(uName+":"+passwrd));
},
success : function(data) {
//Success block
},
error: function (xhr,ajaxOptions,throwError){
//Error block
},
});
Способ 3:
var uName="abc";
var passwrd="pqr";
$.ajax({
type: '{GET/POST}',
url: '{urlpath}',
username:uName,
password:passwrd,
success : function(data) {
//Success block
},
error: function (xhr,ajaxOptions,throwError){
//Error block
},
});
Согласно ответу SharkAlley, он работает и с nginx.
Я искал решение для получения данных с помощью jQuery с сервера, расположенного за nginx и ограниченного Base Auth. Это работает для меня:
server {
server_name example.com;
location / {
if ($request_method = OPTIONS ) {
add_header Access-Control-Allow-Origin "*";
add_header Access-Control-Allow-Methods "GET, OPTIONS";
add_header Access-Control-Allow-Headers "Authorization";
# Not necessary
# add_header Access-Control-Allow-Credentials "true";
# add_header Content-Length 0;
# add_header Content-Type text/plain;
return 200;
}
auth_basic "Restricted";
auth_basic_user_file /var/.htpasswd;
proxy_pass http://127.0.0.1:8100;
}
}
И код JavaScript:
var auth = btoa('username:password');
$.ajax({
type: 'GET',
url: 'http://example.com',
headers: {
"Authorization": "Basic " + auth
},
success : function(data) {
},
});
Статья, которую я считаю полезной:
Позвольте мне показать вам и альтернативу Apache - IIS, который нужен перед запуском реальной аутентификации JQuery Ajax.
Например, если у нас есть путь /secure/*. Нам нужно создать web.config и запретить доступ. Только после того, как приложение перед отправкой должно иметь доступ к страницам в /secure путях
<?xml version="1.0"?>
<configuration>
<system.web>
<!-- Anonymous users are denied access to this folder (and its subfolders) -->
<authorization>
<deny users="?" />
</authorization>
</system.web>
</configuration>
<security>
<authentication>
<anonymousAuthentication enabled="false" />
<basicAuthentication enabled="true" />
</authentication>
</security>