javascript - Bruk grunnleggende autentisering med jQuery og Ajax

Jeg prøver å lage en grunnleggende autentisering gjennom nettleseren, men jeg klarer egentlig ikke å få det til.

Hvis dette skriptet ikke er her, vil nettleserautentiseringen ta over, men jeg vil fortelle nettleseren at brukeren er i ferd med å utføre autentiseringen.

Adressen bør være noe slik som:

http://username:[email /

Jeg har et skjema:

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

Og et manus:

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

Svar #1

Bruk jQuerys beforeSend-callback for å legge til en HTTP-header med autentiseringsinformasjonen:

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

Svar #2

Hvordan ting endrer seg på et år. I tillegg til header-attributtet i stedet for xhr.setRequestHeader, inkluderer nåværende jQuery (1.7.2+) et brukernavn- og passordattributt med $.ajax-kallet.

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

REDIGER fra kommentarer og andre svar: For å være tydelig - for å sende autentisering på forhånd uten en 401 Unauthorized-respons, i stedet for setRequestHeader (før 1.7) bruk 'headers':

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

Svar #3

Bruk beforeSend-callbacken for å legge til en HTTP-header med autentiseringsinformasjonen slik:

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

Svar #4

Eller, bruk ganske enkelt headers-egenskapen som ble introdusert i 1.5:

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

Referanse: jQuery Ajax API

Svar #5

Eksemplene ovenfor er litt forvirrende, og dette er sannsynligvis den beste måten:

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

Jeg tok det ovenstående fra en kombinasjon av Rico og Yossis svar.

Funksjonen btoa Base64-koder en streng.

Svar #6

Som andre har foreslått, kan du sette brukernavn og passord direkte i Ajax-kallet:

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

ELLER bruk headers-egenskapen hvis du heller ikke vil lagre legitimasjonen din i klartekst:

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

Uansett hvordan du sender det, må serveren være svært høflig. For Apache bør .htaccess-filen din se omtrent slik ut:

<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

Forklaring:

For noen kryssdomene-forespørsler sender nettleseren en preflight OPTIONS-forespørsel som mangler autentiseringsheaderne dine. Pakk inn autentiseringsinstruksjonene dine inne i LimitExcept-taggen for å svare riktig på preflight.

Send deretter noen få overskrifter for å fortelle nettleseren at det er tillatt å autentisere, og Access-Control-Allow-Origin for å gi tillatelse for tverrsidestudentforespørselen.

I noen tilfeller fungerer ikke * jokertegn som en verdi for Access-Control-Allow-Origin: Du må returnere det eksakte domenet til den som kaller. Bruk SetEnvIf for å fange denne verdien.

Svar #7

Bruk jQuery ajaxSetup-funksjonen, som kan sette opp standardverdier for alle ajax-forespørsler.

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

Svar #8

Det finnes 3 måter å oppnå dette på, som vist nedenfor

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

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

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

Svar #9

JSONP fungerer ikke med grunnleggende autentisering, så jQuery beforeSend-callbacken vil ikke fungere med JSONP/Script.

Jeg klarte å omgå denne begrensningen ved å legge til brukeren og passordet i forespørselen (f.eks. bruker:[email ). Dette fungerer med omtrent alle nettlesere bortsett fra Internet Explorer hvor autentisering gjennom URL-er ikke støttes (kallet vil rett og slett ikke bli utført).

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

Relaterte artikler