Make an HTTP POST authentication basic request using Javascript

Question

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?

see documentation - developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest — Jaromanda X
– Jaromanda X, Commented Jul 17, 2015 at 10:12

LeftyX · Accepted Answer · 2018-05-18 07:34:13Z

30

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.

edited May 18, 2018 at 7:34

answered Jul 17, 2015 at 14:16

LeftyX

35.6k21 gold badges138 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jno Over a year ago

Looks like plain window.btoa should do the job for $.base64.btoa...

Nuhman Over a year ago

What is the difference between clientId and username in the code?

LeftyX Over a year ago

@Nuhman: ClientId identifies your client application: it could be a mobile app, desktop or another web app. You could provide different configurations for each one of those.

Tugrul Yildirim · Accepted Answer · 2022-09-01 14:30:10Z

2

This is a quite old question but I think there is no problem to update answer.

Here FETCH api in JavaScript to post in JavaScript

fetch("https://tugrulyildirim.com/api/post-some-data-uri", {
    method: 'POST',
    headers: new Headers({
        "Authorization": localStorage.getItem('token'),
        "Content-Type": "application/x-www-form-urlencoded",
        "Accept": "application/json",
        "X-Requested-With": "XMLHttpRequest",
    }),
    body: {
        "name": "John",
        "surname": "Doe"
    }
}).then((response) => response.json()).then(responseData => {/* do something with responseData*/}).catch(error => {console.log(error);});

answered Sep 1, 2022 at 14:30

Tugrul Yildirim

5124 silver badges12 bronze badges

Comments

Mark Alvin · Accepted Answer · 2023-05-08 10:07:55Z

This method works for me.

   var authorizationHeader = 'Basic ' + btoa('pk_test_code');

   var reqData = {}; var obj = {}; var obj2a = {}; var obj2b = {}; var obj3 = {};
   obj3['card_number'] = '4343434343434345'; obj3['exp_month'] = 5; obj3['exp_year'] = 26; obj3['cvc'] = '111';
   obj2b['details'] = obj3; obj2a['type'] = 'card';
   obj['attributes'] = {}; Object.assign(obj['attributes'], obj2a, obj2b);
   reqData['data'] = {}; Object.assign(reqData['data'], obj);

   var xmlHTTPReq = new XMLHttpRequest(); xmlHTTPReq.open('POST', 'https://api.paymongo.com/v1/payment_methods', true);
   xmlHTTPReq.setRequestHeader('Authorization', authorizationHeader); xmlHTTPReq.setRequestHeader('Content-Type', 'application/json'); xmlHTTPReq.setRequestHeader('Accept', 'application/json');
   xmlHTTPReq.send(JSON.stringify(reqData));
   xmlHTTPReq.onreadystatechange = function(){
      if(xmlHTTPReq.readyState === 4){
         if(xmlHTTPReq['status'] == '200'){
            alert(xmlHTTPReq.responseText);

         }
         else{
            var errRes = JSON.parse(xmlHTTPReq.responseText); var errMsg = errRes['error'];
            alert(errMsg);
         }
      }
   };

$.ajax also works for me but this convert numeric data into string. I recommend new XMLHttpRequest()

$.post and fetch does not work for me

Collectives™ on Stack Overflow

Make an HTTP POST authentication basic request using Javascript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related