Login HTTP client by JavaScript form to ElasticSearch (readonlyrest)

Question

I want to login to my ElasticSearch via HTTP (with readonlyrest plugin installed).

¿Is there any way to do this thing with an HTML form and JavaScript (Angular) code?

<form class="form-horizontal">
      <div class="form-group">
        <label class="control-label col-sm-2" for="email">Username:</label>
        <div class="col-sm-10">
          <input class="form-control" ng-model="username" placeholder="Enter username">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="pwd">Password:</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" placeholder="Enter password" ng-model="password">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-default" ng-click="login()">Submit</button>
        </div>
      </div>
</form>

Code of the login (I want to save the login in the browser for future actions):

$scope.login = function(){
console.log("Login: ", $scope.username, $scope.password)

var clientId = "sample";
var clientSecret = "sample";

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

var request = new XMLHttpRequest();
request.open('POST', "https://localhost:5601/omu/elasticsearch/_msearch", 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=sample&password=sample&grant_type=password");

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

Thx

Answer 1

If you're using basic authentication, try to include the credentials in the path

GET http:// user:password @elastichost:9200/endpoint