it-swarm.com.de

Verwenden Sie die Standardauthentifizierung mit jQuery und Ajax

Ich versuche, über den Browser eine Basisauthentifizierung zu erstellen, komme aber nicht wirklich dahin.

Wenn dieses Skript nicht verfügbar ist, übernimmt die Browserauthentifizierung, aber ich möchte dem Browser mitteilen, dass der Benutzer die Authentifizierung vornehmen 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!');
    }
});
396
Patrioticcow

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

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

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

$.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 sicher zu gehen, dass die Authentifizierung ohne eine 401 Unauthorized -Antwort gesendet wird, verwenden Sie 'headers' anstelle von setRequestHeader (vor -1.7):

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

Verwenden Sie beforeSend callback , um einen HTTP-Header mit den Authentifizierungsinformationen wie folgt 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!'); 
    }
});
61
Adrian Toman

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

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

Referenz: jQuery Ajax API

40
AsemRadhwi

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

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

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

Die btoa Funktion Base64 kodiert einen String.

31
Paul Odeon

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 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-Anforderung OPTIONS, bei der Ihre Authentifizierungsheader fehlen. Fügen Sie Ihre Authentifizierungsanweisungen in das Tag LimitExcept ein, um ordnungsgemäß auf den Preflight zu reagieren.

Senden Sie dann einige Header, um dem Browser mitzuteilen, dass er sich authentifizieren darf, und geben Sie Access-Control-Allow-Origin an, um die Berechtigung für die standortübergreifende Anforderung zu erteilen.

In einigen Fällen gilt der Platzhalter * funktioniert 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.

26
SharkAlley

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

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

JSONP funktioniert nicht mit der Basisauthentifizierung, daher funktioniert der jQuery beforeSend-Rückruf nicht mit JSONP/Script.

Ich konnte diese Einschränkung umgehen, indem ich der Anfrage den Benutzer und das Kennwort hinzufügte (z. B. Benutzer: [email protected]). Dies funktioniert mit so ziemlich jedem Browser außer Internet Explorer , bei dem die Authentifizierung über URLs nicht unterstützt wird (der Aufruf wird einfach nicht ausgeführt).

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

11
arnebert

Laut SharkAlley funktioniert es auch mit Nginx.

Ich war auf der Suche 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. Antworten zu diesem Thema
  2. http://enable-cors.org/server_nginx.html
  3. http://blog.rogeriopvl.com/archives/nginx-and-the-http-options-method/
8
Max

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