Effettuare una richiesta di base di autenticazione HTTP POST utilizzando Javascript

Question

Desidero utilizzare JavaScript per eseguire una richiesta POST utilizzando il metodo comune "Autorizzazione: base". Il server ospita un'app OWIN C# e in caso di autenticazione riuscita dovrebbe darmi un token in formato JSON.

Questa è la Wireshark equivalente di ciò che voglio realizzare utilizzando pianura Javascript:

POST /connect/token HTTP/1.1 
    Authorization: Basic c2lsaWNvbjpGNjIxRjQ3MC05NzMxLTRBMjUtODBFRi02N0E2RjdDNUY0Qjg= 
    Content-Type: application/x-www-form-urlencoded 
    Host: localhost:44333 
    Content-Length: 40 
    Expect: 100-continue 
    Connection: Keep-Alive 

    HTTP/1.1 100 Continue 

    grant_type=client_credentials&scope=api1HTTP/1.1 200 OK 
    Cache-Control: no-store, no-cache, max-age=0, private 
    Pragma: no-cache 
    Content-Length: 91 
    Content-Type: application/json; charset=utf-8 
    Server: Microsoft-HTTPAPI/2.0 
    Date: Fri, 17 Jul 2015 08:52:23 GMT 

    {"access_token":"c1cad8180e11deceb43bc1545c863695","expires_in":3600,"token_type":"Bearer"} 

è possibile farlo? Se é cosi, come?

Answer 1

Questa è la richiesta di javascript:

var clientId = "MyApp"; 
var clientSecret = "MySecret"; 

var authorizationBasic = $.base64.btoa(clientId + ':' + clientSecret); 

var request = new XMLHttpRequest(); 
request.open('POST', oAuth.AuthorizationServer, true); 
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); 
request.setRequestHeader('Authorization', 'Basic ' + authorizationBasic); 
request.setRequestHeader('Accept', 'application/json'); 
request.send("username=John&password=Smith&grant_type=password"); 

request.onreadystatechange = function() { 
    if (request.readyState === 4) { 
     alert(request.responseText); 
    } 
}; 

e questa è la versione di jQuery:

var clientId = "MyApp"; 
var clientSecret = "MySecret"; 

var authorizationBasic = $.base64.btoa(clientId + ':' + clientSecret); 

$.ajax({ 
    type: 'POST', 
    url: oAuth.AuthorizationServer, 
    data: { username: 'John', password: 'Smith', grant_type: 'password' }, 
    dataType: "json", 
    contentType: 'application/x-www-form-urlencoded; charset=utf-8', 
    xhrFields: { 
     withCredentials: true 
    }, 
    // crossDomain: true, 
    headers: { 
     'Authorization': 'Basic ' + authorizationBasic 
    }, 
    //beforeSend: function (xhr) { 
    //}, 
    success: function (result) { 
     var token = result; 
    }, 
    //complete: function (jqXHR, textStatus) { 
    //}, 
    error: function (req, status, error) { 
    alert(error); 
    } 
}); 

In entrambe le situazioni che ho codificato il clientId e il clientSecret in Base64 stringhe utilizzando un jQuery plugin. Sono abbastanza sicuro che tu possa trovare qualcosa di simile in semplice javascript.

Questo è un project in cui si dispone di un OML Web Api in esecuzione in una console e un progetto in cui è possibile testare la richiesta in una pagina Web utilizzando jQuery o il semplice vanilla javascript. Potrebbe essere necessario modificare gli URL per le richieste.