AJAX JSON Authentifizierung arbeitet nicht korrekt

[tom1bc]

Hallo zusammen,

wie kann ich Daten abrufen per Ajax JSON Authentifizierung?
Über folgendes Skript bekommen ich immer die .htaccess Abfrage:

  
var username_my = 'user-name';  
var password_my = 'user-paasswort';  
  
function make_base_auth(username_my, password_my) {  
  var tok = username_my + ':' + password_my;  
  // var hash = btoa(tok);  
  var hash = base64.encode(tok);  
  return "Basic " + hash;  
}  
var xhr = null;  
try {  
   xhr = new XMLHttpRequest();  
} catch (e){  
   try{  
      xhr = new ActiveXObject("Msxml2.XMLHTTP");  
   } catch (e){  
      try{  
         xhr = new ActiveXObject("Microsoft.XMLHTTP");  
      } catch (e){  
         xhr = null;  
      }  
   }  
}  
$.ajax({  
    type: "GET",  
    url: "https:// meine url /items",  
    cache:true,  
    dataType: 'jsonp',  
    crossDomain: true,  
    contentType: "application/json; charset=utf-8",  
    async: false,  
    xhrFields:{  
      withCredentials: true  
    },  
    status:status,  
    error: function(xhr, status, error) {  
              alert("error: "+error+"\n\n\nstatus: "+status);  
    },  
    data: { "pastdays": "1", "format":"json" },  
    beforeSend: function (xhr){  
        xhr.setRequestHeader("Content-Type","application/json");  
        xhr.setRequestHeader("Accept","application/json");  
        xhr.setRequestHeader('Authorization', make_base_auth(username_my, password_my));  
        xhr.withCredentials = true;  
        xhr.overrideMimeType("application/json");  
    },  
    dataFilter: function(data) {  
    if (typeof (JSON) !== 'undefined' && typeof (JSON.parse) === 'function'){  
          return JSON.parse(data);  
        }else{  
          return eval('(' + data + ')');  
          }  
    },  
    username: username_my ,  
    password: password_my,  
    success: function (status){  
        alert('Thanks for your comment! '+status);  
    }  
  
}).fail(function( status) {  
    var aus = "";  
    jQuery.each(status, function(i, v){  
        aus += i+",\t\t "+v+"\n";  
    });  
    console.log( aus );  
}).done(function( status) {  
    alert( status );  
});  

Wie kann ich die Authentifizierung korrekt „einbauen“?
Damit beim jedem Aufruf die User-Passwort Fenster nicht erscheint?

Gibt es eine andere Möglichkeit der Authentifizierung?

Grüße
Tom

[hotti]

Was ist daran überhaupt sinnvoll wenn jeder das Passwort lesen kann?

[tom1bc]

Was ist daran überhaupt sinnvoll wenn jeder das Passwort lesen kann?

Stimmt, es ist nicht sinnvoll.
Danke für die Rückmeldung, ich stelle das auf »curl« PHP-Ebne um, aber dazu öffne ich eine neuen Thread.

[molily]

Hallo,

wenn du jQuery verwendest, musst du eigentlich nur username und password in der jQuery.ajax()-Konfiguration angeben. Du musst die Header nicht selbst zusammenbauen.
http://api.jquery.com/jQuery.ajax/

function make_base_auth(username_my, password_my) {
  var tok = username_my + ':' + password_my;
  // var hash = btoa(tok);
  var hash = base64.encode(tok);
  return "Basic " + hash;
}

Sollte nicht nötig sein, das macht der Browser automatisch. jQuery setzt Uusername und Passwort einfach beim Aufruf von xhr.open(httpMethod, url, true, username, password).
Hintergrund: https://developer.mozilla.org/de/docs/DOM/XMLHttpRequest#open()

var xhr = null;
try {
   xhr = new XMLHttpRequest();
} catch (e){
   try{
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e){
      try{
         xhr = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e){
         xhr = null;
      }
   }
}

Brauchst du nicht, das Erzeugen des XHR-Objektes übernimmt jQuery für dich.

$.ajax({
    type: "GET",
    url: "https:// meine url /items",
    cache:true,
    dataType: 'jsonp',

Hier steht, du verwendest JSONP. Ist dir klar, dass das einen einfachen GET-Request absendet, der keinen Request-Body hat?

contentType: "application/json; charset=utf-8",

Diese Angabe macht nur für POST- und PUT-Requests Sinn, nicht für GET-Requests.

async: false,

Das ist nicht empfehlenswert, XMLHttpRequests sind standardmäßig asynchron und das ist ein Vorteil.

xhrFields:{
      withCredentials: true
    },

withCredentials bezieht sich nur auf Cross-Domain-Requests. Machst du einen?

status:status,

Die Angabe macht hier keinen Sinn, soweit ich das sehe.
Mögliche Optionen: http://api.jquery.com/jQuery.ajax/

beforeSend: function (xhr){
        xhr.setRequestHeader("Content-Type","application/json");

Diese Angabe für GET-Requests wie gesagt keinen Sinn. Für POST-Requests würde es reichen, die jQuery-Einstellung contentType zu setzen (siehe oben).

xhr.setRequestHeader('Authorization', make_base_auth(username_my, password_my));

Sollte nicht nötig sein, siehe oben.

dataFilter: function(data) {
    if (typeof (JSON) !== 'undefined' && typeof (JSON.parse) === 'function'){
          return JSON.parse(data);
        }else{
          return eval('(' + data + ')');
          }
    },

Sollte nicht nötig sein, denn jQuery parst eine JSON-Response automatisch, sodass du in den Success-Callback automatisch ein JavaScript-Objekt bekommst. Bei JSONP ist sowieso kein Parsing nötig.

Dein Code scheint verschiedene Ansätze und Lösungen zu vermischen. Werde dir einmal klar, was du genau brauchst (JSONP mit GET oder POST oder gar PUT?) und baue dann ein Beispiel mit jQuery, das so einfach wie möglich ist.

Wenn du jQuery Username und Passwort sowie den korrekten Datentyp der Anfrage und der Antwort mitteilst, macht jQuery den Rest automatisch. Normalerweise muss man nicht mit dem XMLHttpRequest-Objekt manuell Header erzeugen.

Viele Grüße
Mathias