web-dev-qa-db-fra.com

Faire une requête de base d'authentification HTTP POST authentification en utilisant Javascript

Je souhaite utiliser JavaScript pour effectuer une demande POST en utilisant la méthode "Authorization: Basic" courante. Le serveur héberge une application OWIN C # et une fois l'authentification réussie, il doit me donner un jeton au format JSON.

Ceci est l'équivalent de wirehark de ce que je veux accomplir en utilisant du Javascript simple:

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

est-il possible de le faire? Si c'est le cas, comment?

javascripthtmlhttpauthenticationowin
12
Gianluca Ghettini

Voici la requête javascript:

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

// var authorizationBasic = $.base64.btoa(clientId + ':' + clientSecret);
var authorizationBasic = window.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);
    }
};

et voici la version jQuery:

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

// var authorizationBasic = $.base64.btoa(clientId + ':' + clientSecret);
var authorizationBasic = window.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);
    }
});

Dans les deux cas, j'ai encodé le clientId et le clientSecret dans une chaîne base64 en utilisant un jquery plugin . Je suis sûr que vous pouvez trouver quelque chose de similaire en javascript simple.

Il s'agit d'un projet où vous avez un Owin Web Api en cours d'exécution dans une console et un projet où vous pouvez tester votre demande dans une page Web en utilisant jQuery ou le simple Javascript Vanilla. Vous devrez peut-être modifier les URL des demandes.

22
LeftyX