Я пытаюсь создать базовый auth через браузер, но я не могу туда попасть.
Если этого script здесь не будет, авторизация браузера возьмет верх, но я хочу сообщить браузеру, что пользователь собирается выполнить аутентификацию.
Адрес должен выглядеть примерно так:
http://username:[email protected]/
У меня есть форма:
<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>
И 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!');
}
});
Используйте jQuery beforeSend
обратный вызов, чтобы добавить HTTP-заголовок с информацией аутентификации:
beforeSend: function (xhr) {
xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
},
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',
async: false,
username: username,
password: password,
data: '{ "comment" }',
success: function (){
alert('Thanks for your comment!');
}
});
ИЗМЕНИТЬ из комментариев и других ответов: Чтобы быть понятным - чтобы предварительно отправить аутентификацию без ответа 401 Unauthorized
вместо setRequestHeader
(pre -1.7), используйте 'headers'
:
$.ajax
({
type: "GET",
url: "index1.php",
dataType: 'json',
async: false,
headers: {
"Authorization": "Basic " + btoa(USERNAME + ":" + PASSWORD)
},
data: '{ "comment" }',
success: function (){
alert('Thanks for your comment!');
}
});
username
а не user
? Кроме того, это не совсем то же самое: из онлайн-документации и моего опыта, похоже, что это не является преимуществом, как того требуют некоторые API. Другими словами, он отправляет заголовок Authorization
только тогда, когда возвращается код 401.
Используйте перед отправкой обратного вызова, чтобы добавить 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!');
}
});
Или просто используйте свойство заголовков, введенное в 1.5:
headers: {"Authorization": "Basic xxxx"}
Ссылка: jQuery Ajax API
Приведенные выше примеры немного запутывают, это, вероятно, лучший способ
$.ajaxSetup({
headers: {
'Authorization': "Basic " + btoa(USERNAME + ":" + PASSWORD)
}
});
Я взял это из комбинации ответов Рико и Йосси
Функция btoa base64 кодирует строку
$.ajaxSetup()
говорится: «Установите значения по умолчанию для будущих запросов Ajax. Его использование не рекомендуется ».
Используйте функцию jQuery ajaxSetup, которая может устанавливать значения по умолчанию для всех запросов ajax.
$.ajaxSetup({
headers: {
'Authorization': "Basic XXXXX"
}
});
Как и другие, вы можете установить имя пользователя и пароль непосредственно в вызове ajax:
$.ajax({
username: username,
password: password,
// ... other params.
});
ИЛИ используйте свойство заголовков, если вы предпочитаете не хранить свои кредиты простым текстом:
$.ajax({
headers: {"Authorization": "Basic xxxx"},
// ... other params.
});
Каким бы способом вы его не отправили, сервер должен быть очень вежлив. Для 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 предпросмотра, в котором отсутствуют заголовки заголовков. Оберните свои директивы auth внутри тега LimitExcept, чтобы правильно реагировать на предполетную проверку.
Затем отправьте несколько заголовков, чтобы сообщить обозревателю, что он разрешен для аутентификации, и Access-Control-Allow-Origin, чтобы предоставить разрешение для запроса на межсайтовый сайт.
В некоторых случаях подстановочный символ * не работает как значение для Access-Control-Allow-Origin: вам нужно вернуть точную область вызываемого абонента. Используйте SetEnvIf для захвата этого значения.
JSONP не работает с базовой аутентификацией, поэтому обратный вызов jQuery beforeSend не будет работать с JSONP/ Script.
Мне удалось обойти это ограничение, добавив пользователя и пароль к запросу (например, user: [email protected]). Это работает практически с любым браузером, но IE, где аутентификация через URL-адреса не поддерживается (вызов просто не будет выполнен).
Согласно ответу 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;
}
}
И JS:
var auth = btoa('username:password');
$.ajax({
type: 'GET',
url: 'http://example.com',
headers: {
"Authorization": "Basic " + auth
},
success : function(data) {
},
});
Статья, которую я считаю полезной:
Существует 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
},
});