Machen Sie eine HTTP-POST-Authentifizierung grundlegende Anfrage mit Javascript

Question

Ich möchte JavaScript verwenden, um eine POST-Anfrage mit der gemeinsamen "Authorization: Basic" -Methode durchzuführen. Der Server hostet eine OWIN C# App und bei erfolgreicher Authentifizierung sollte er mir ein Token im JSON-Format geben.

Dies ist die wireshark äquivalent, was ich will mit Normalpapier Javascript erreichen:

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

ist es möglich, dies zu tun? Wenn das so ist, wie?

Answer 1

Dies ist die Javascript-Anfrage:

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

und dies ist die jQuery-Version:

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 beide Situation, die ich die clientId und die clientSecret in einem String Base64 codiert habe eine Jquery mit plugin. Ich bin mir ziemlich sicher, dass Sie etwas ähnliches in einfachem Javascript finden können.

Dies ist eine project, wo Sie eine Owin Web Api in einer Konsole und ein Projekt, wo Sie Ihre Anfrage in einer Webseite mit jQuery oder der Plain-Vanilla-Javascript testen können. Möglicherweise müssen Sie die URLs für die Anforderungen ändern.