Verwenden Sie die Basisauthentifizierung mit jQuery und Ajax

Ich versuche, eine grundlegende Authentifizierung über den Browser zu erstellen, komme aber nicht wirklich dorthin.

Wenn dieses Skript nicht hier ist, übernimmt die Browserauthentifizierung, aber ich möchte dem Browser mitteilen, dass der Benutzer die Authentifizierung durchführen wird.

Die Adresse sollte ungefähr so ​​lauten:

http://username:[email protected]/

Ich habe ein Formular:

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

Und ein Drehbuch:

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

Verwenden Sie den beforeSendRückruf von jQuery , um einen HTTP-Header mit den Authentifizierungsinformationen hinzuzufügen:

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

Wie sich die Dinge in einem Jahr ändern. Zusätzlich zum Header-Attribut anstelle von enthält die xhr.setRequestHeaderaktuelle jQuery (1.7.2+) ein Benutzername- und Kennwortattribut mit dem $.ajaxAufruf.

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

BEARBEITEN von Kommentaren und anderen Antworten: Um klar zu sein - um die Authentifizierung präventiv ohne 401 UnauthorizedAntwort zu senden , anstatt setRequestHeader(vor -1,7) zu verwenden 'headers':

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

Verwenden Sie den beforeSend-Rückruf , um einen HTTP-Header mit folgenden Authentifizierungsinformationen hinzuzufügen:

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

Oder verwenden Sie einfach die in 1.5 eingeführte Eigenschaft headers:

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

Referenz: jQuery Ajax API

Die obigen Beispiele sind etwas verwirrend, und dies ist wahrscheinlich der beste Weg:

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

Ich habe das Obige einer Kombination aus Rico und Yossis Antwort entnommen.

Die btoa- Funktion Base64 codiert eine Zeichenfolge.

Wie andere vorgeschlagen haben, können Sie den Benutzernamen und das Passwort direkt im Ajax-Aufruf festlegen:

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

ODER verwenden Sie die Eigenschaft headers, wenn Sie Ihre Anmeldeinformationen lieber nicht im Klartext speichern möchten:

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

Unabhängig davon, wie Sie es senden, muss der Server sehr höflich sein. Für Apache sollte Ihre .htaccess-Datei ungefähr so ​​aussehen:

<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

Erläuterung:

Bei einigen domänenübergreifenden Anforderungen sendet der Browser eine Preflight- OPTIONS- Anforderung, bei der Ihre Authentifizierungsheader fehlen. Wickeln Sie Ihre Authentifizierungsanweisungen in das LimitExcept- Tag ein, um ordnungsgemäß auf den Preflight zu reagieren.

Senden Sie dann einige Header, um dem Browser mitzuteilen, dass er sich authentifizieren darf, und die Zugriffssteuerung , die Origin zulässt , um die Berechtigung für die standortübergreifende Anforderung zu erteilen.

In einigen Fällen funktioniert der Platzhalter * nicht als Wert für Access-Control-Allow-Origin: Sie müssen die genaue Domäne des Angerufenen zurückgeben. Verwenden Sie SetEnvIf, um diesen Wert zu erfassen.

Verwenden Sie die Funktion jQuery ajaxSetup , mit der Standardwerte für alle Ajax-Anforderungen festgelegt werden können.

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

JSONP funktioniert nicht mit der Basisauthentifizierung, sodass der Rückruf von jQuery beforeSend nicht mit JSONP / Script funktioniert.

Ich habe es geschafft, diese Einschränkung zu umgehen, indem ich der Anforderung den Benutzer und das Kennwort hinzugefügt habe (z. B. Benutzer: [email protected]). Dies funktioniert mit so ziemlich jedem Browser außer Internet Explorer, in dem die Authentifizierung über URLs nicht unterstützt wird (der Aufruf wird einfach nicht ausgeführt).

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

Es gibt 3 Möglichkeiten, dies zu erreichen, wie unten gezeigt

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

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

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

Laut SharkAlley Antwort funktioniert es auch mit Nginx.

Ich suchte nach einer Lösung, um Daten von jQuery von einem Server hinter nginx abzurufen, der von Base Auth eingeschränkt wurde. Das funktioniert bei mir:

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

Und der JavaScript-Code lautet:

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

Artikel, den ich nützlich finde:

1. Die Antworten dieses Themas
2. http://enable-cors.org/server_nginx.html
3. http://blog.rogeriopvl.com/archives/nginx-and-the-http-options-method/