Search code examples
javascripthtmlhttpauthenticationowin

Make an HTTP POST authentication basic request using Javascript


I want to use JavaScript to perform a POST request using the common "Authorization: Basic" method. The server hosts an OWIN C# App and on successful authentication it should give me a token in JSON format.

This is the wireshark equivalent of what I want to accomplish using plain 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"}

is it possible to do so? If so, how?


Solution

  • This is the javascript request:

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

    and this is the jQuery version:

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

    In both situation I've encoded the clientId and the clientSecret in a string base64 using a jquery plugin. I am pretty sure you can find something similar in plain javascript.

    This is a project where you have a Owin Web Api running in a console and a project where you can test your request in a web page using jQuery or the plain vanilla javascript. You might need to change the urls for the requests.