Używaj podstawowego uwierzytelniania w jQuery i Ajax

Próbuję utworzyć podstawowe uwierzytelnianie za pomocą przeglądarki, ale tak naprawdę nie mogę tego zrobić.

Jeśli skryptu tu nie będzie, uwierzytelnienie przeglądarki przejmie, ale chcę powiedzieć przeglądarce, że użytkownik zamierza dokonać uwierzytelnienia.

Adres powinien być podobny do:

http://username:[email protected]/

Mam formularz:

<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>

I skrypt:

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!');
    }
});

Użyj beforeSendwywołania zwrotnego jQuery, aby dodać nagłówek HTTP z informacjami uwierzytelniającymi:

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

Jak rzeczy się zmieniają w ciągu roku. Oprócz atrybutu nagłówka zamiast xhr.setRequestHeaderbieżącego jQuery (1.7.2+) zawiera nazwę użytkownika i hasło do $.ajaxwywołania.

$.ajax
({
  type: "GET",
  url: "index1.php",
  dataType: 'json',
  username: username,
  password: password,
  data: '{ "comment" }',
  success: function (){
    alert('Thanks for your comment!'); 
  }
});

EDYCJA na podstawie komentarzy i innych odpowiedzi: Aby być jasnym - w celu prewencyjnego wysłania uwierzytelnienia bez 401 Unauthorizedodpowiedzi, zamiast setRequestHeader(przed -1.7) użyj 'headers':

$.ajax
({
  type: "GET",
  url: "index1.php",
  dataType: 'json',
  headers: {
    "Authorization": "Basic " + btoa(USERNAME + ":" + PASSWORD)
  },
  data: '{ "comment" }',
  success: function (){
    alert('Thanks for your comment!'); 
  }
});

Użyj wywołania zwrotnego beforeSend, aby dodać nagłówek HTTP z informacjami uwierzytelniającymi:

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!'); 
    }
});

Lub po prostu użyj właściwości nagłówków wprowadzonej w 1.5:

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

Odniesienie: jQuery Ajax API

Powyższe przykłady są nieco mylące i jest to prawdopodobnie najlepszy sposób:

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

Wziąłem powyższe z kombinacji odpowiedzi Rico i Yossi.

Btoa funkcja Base64 koduje łańcuch.

Jak sugerują inni, możesz ustawić nazwę użytkownika i hasło bezpośrednio w wywołaniu Ajax:

$.ajax({
  username: username,
  password: password,
  // ... other parameters.
});

LUB użyj właściwości headers, jeśli nie chcesz przechowywać poświadczeń w postaci zwykłego tekstu:

$.ajax({
  headers: {"Authorization": "Basic xxxx"},
  // ... other parameters.
});

Bez względu na to, jak go wyślesz, serwer musi być bardzo uprzejmy. W przypadku Apache plik .htaccess powinien wyglądać mniej więcej tak:

<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

Wyjaśnienie:

W przypadku niektórych żądań między domenami przeglądarka wysyła żądanie OPTIONS inspekcji wstępnej, w którym brakuje nagłówków uwierzytelniania. Zawiń dyrektywy uwierzytelniania w tagu LimitExcept, aby poprawnie reagować na inspekcję wstępną .

Następnie wyślij kilka nagłówków, aby poinformować przeglądarkę, że może się uwierzytelnić, a Access-Control-Allow-Origin, aby udzielić zgody na żądanie między witrynami.

W niektórych przypadkach symbol wieloznaczny * nie działa jako wartość kontroli dostępu-Allow-Origin: musisz zwrócić dokładną domenę odbiorcy. Użyj SetEnvIf, aby przechwycić tę wartość.

Użyj funkcji jQuery ajaxSetup , która może ustawić wartości domyślne dla wszystkich żądań ajax.

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

JSONP nie działa z podstawowym uwierzytelnianiem, więc wywołanie zwrotne jQuery beforeSend nie będzie działać z JSONP / Script.

Udało mi się obejść to ograniczenie, dodając do żądania użytkownika i hasło (np. Użytkownik: [email protected]). Działa to praktycznie z każdą przeglądarką oprócz Internet Explorera którym uwierzytelnianie za pomocą adresów URL nie jest obsługiwane (wywołanie po prostu nie zostanie wykonane).

Zobacz http://support.microsoft.com/kb/834489 .

Istnieją 3 sposoby osiągnięcia tego, jak pokazano poniżej

Metoda 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 
  },
});

Metoda 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 
  },
});

Metoda 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 
  },
});

Według odpowiedzi SharkAlley działa również z Nginx.

Szukałem rozwiązania w celu uzyskania danych przez jQuery z serwera za nginx i ograniczonego przez Base Auth. To działa dla mnie:

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;
    }
}

A kod JavaScript to:

var auth = btoa('username:password');
$.ajax({
    type: 'GET',
    url: 'http://example.com',
    headers: {
        "Authorization": "Basic " + auth
    },
    success : function(data) {
    },
});

Artykuł, który uważam za użyteczny:

1. Odpowiedzi na ten temat
2. http://enable-cors.org/server_nginx.html
3. http://blog.rogeriopvl.com/archives/nginx-and-the-http-options-method/