Как использовать Basic Auth с jQuery и AJAX?

Я пытаюсь создать базовый 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!'); 
    }
});

Ответы

Ответ 1

Используйте jQuery beforeSend обратный вызов, чтобы добавить HTTP-заголовок с информацией аутентификации:

beforeSend: function (xhr) {
    xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
},

Ответ 2

Как меняются вещи через год. В дополнение к атрибуту заголовка вместо 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!'); 
  }
});

Ответ 3

Используйте перед отправкой обратного вызова, чтобы добавить 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!'); 
    }
});

Ответ 4

Или просто используйте свойство заголовков, введенное в 1.5:

headers: {"Authorization": "Basic xxxx"}

Ссылка: jQuery Ajax API

Ответ 5

Приведенные выше примеры немного запутывают, это, вероятно, лучший способ

$.ajaxSetup({
  headers: {
    'Authorization': "Basic " + btoa(USERNAME + ":" + PASSWORD)
  }
});

Я взял это из комбинации ответов Рико и Йосси

Функция btoa base64 кодирует строку

Ответ 6

Используйте функцию jQuery ajaxSetup, которая может устанавливать значения по умолчанию для всех запросов ajax.

$.ajaxSetup({
  headers: {
    'Authorization': "Basic XXXXX"
  }
});

Ответ 7

Как и другие, вы можете установить имя пользователя и пароль непосредственно в вызове 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 для захвата этого значения.

Ответ 8

JSONP не работает с базовой аутентификацией, поэтому обратный вызов jQuery beforeSend не будет работать с JSONP/ Script.

Мне удалось обойти это ограничение, добавив пользователя и пароль к запросу (например, user: [email protected]). Это работает практически с любым браузером, но IE, где аутентификация через URL-адреса не поддерживается (вызов просто не будет выполнен).

См. http://support.microsoft.com/kb/834489.

Ответ 9

Согласно ответу 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) {
    },

});

Статья, которую я считаю полезной:

эта тема отвечает
http://enable-cors.org/server_nginx.html
http://blog.rogeriopvl.com/archives/nginx-and-the-http-options-method/

Ответ 10

Существует 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 
  },
});