Teiid: User authentication for oData v4 query via javascript

[m.monti]

Hi everybody,

I am trying to query a Teiid entity using oData v4 via javascript using following code:

            $.ajax({

                type: 'GET',

                url: 'http://server/odata4/VDB.1/Model/Entity?$format=JSON',

                dataType: 'json',

                beforeSend: function (xhr) {

                    xhr.setRequestHeader("Authorization", "Basic " + btoa("username:password"));

                }

            })

            .done(function (result) {

                $.each(result.value, function () {

                    $("#mySelect").append($("<option />").val(this.EntityID).text(this.EntityDescription));

                });

            })

            .fail(function () {

                $("#mySelect").append($("<option />").val("0").text("ERROR ..."));

            });

I also tried using the datajs 1.1.3 library (https://datajs.codeplex.com/):

            OData.read(

                {

                    headers: {},

                    requestUri: 'http://server/odata4/VDB.1/Model/Entity?$format=JSON',

                    method: 'POST',

                    data: {},

                    user: 'username',

                    password: 'password'

                },

                function (data, response) {

                    $.each(data.value, function () {

                        $("#mySelect").append($("<option />").val(this.EntityID).text(this.EntityDescription));

                    });

                },

                function (err) {

                    $("#mySelect").append($("<option />").val("0").text("... " + err.message + " ..."));

                });

In both cases I get an authentication error.

I also tried to query the reference oData v4 service at http://services.odata.org/V4/Northwind/Northwind.svc (which doesn't require any authentication, so I didn't specify the beforeSend attribute) and the $.ajax() query worked like a charm.

Can you please help me solve this problem? Thank you in advance for any reply.

Regards,

Marco

[shawkins]

Does the user you are authenticating with have the odata role?

[m.monti]

Yes.

If I copy the URL and paste it into the browser I get asked for the authentication and then receive the correct data.

[rareddy]

There are few suggestions here How to use Basic Auth with jQuery and AJAX? - Stack Overflow based on the version you are using. See if these are any help.

[shawkins]

There are also some complications here with the ajax function.  You first have to workaround the cross domain restriction: javascript - jQuery AJAX cross domain - Stack Overflow then if you use the jsonp type, basic auth requires the username/password in the url: Basic Authentication does not work with JSONP · Issue #1781 · jquery/jquery · GitHub

[m.monti]

... Back from vacation ...

I have tried athe the suggestions above:

• From the browser I'm able to query the data using  http://user:password@server/odata4/VDB.1/Model/Entity?$format=JSON  without being asked for credentials.

• Using the same URL as above in my javascript

            $.ajax({

                type: 'GET',

                url: 'http://user:password@server/odata4/VDB.1/Model/Entity?$format=JSON',

                dataType: 'json'

            })

            .done(function (result) {

                $.each(result.value, function () {

                    $("#mySelect").append($("<option />").val(this.EntityID).text(this.EntityDescription));

                });

            })

            .fail(function (message, status) {

                $("#mySelect").append($("<option />").val("0").text(message.statusText));

            });

          I get the message "Error: A security problem occurred."

• Using JSONP in my javascript

            $.ajax({

                type: 'GET',

                url: 'http://user:password@server/odata4/VDB.1/Model/Entity?$format=JSON',

                dataType: 'jsonp'

            })

            .done(function (result) {

                $.each(result.value, function () {

                    $("#mySelect").append($("<option />").val(this.EntityID).text(this.EntityDescription));

                });

            })

            .fail(function (message, status) {

                $("#mySelect").append($("<option />").val("0").text(message.statusText));

            });

          nothing happens.

• Using JSONP without passing username and password in the URL

            $.ajax({

                type: 'GET',

                url: 'http://server/odata4/VDB.1/Model/Entity?$format=JSON',

                dataType: 'jsonp'

            })

            .done(function (result) {

                $.each(result.value, function () {

                    $("#mySelect").append($("<option />").val(this.EntityID).text(this.EntityDescription));

                });

            })

            .fail(function (message, status) {

                $("#mySelect").append($("<option />").val("0").text(message.statusText));

            });

          I get asked for username and password ang receive the expected data back. In this case I get following error message:

                   

          The problem with JSONP is the type of response returned from Teiid: as stated in this article the returned data should be contained within a function.

I hope you can help me further with my problem.

Thanks in advance.

Marco

[rareddy]

You may need this [TEIID-4366] Provide CORS support on OData Service - JBoss Issue Tracker before it works

[m.monti]

Thank you for your hint.

I tried the piece of code suggested in [TEIID-4366]:

<html ng-app=ODataApp>

<head>

<title>Example to Consume web service from AngularJS App</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<script type="text/javascript">

  var app = angular.module('ODataApp', []);

  app.controller('ODataController', function($scope, $http) {

  $http.defaults.headers.common.Authorization = 'Basic ' + btoa("user:password");

        $http.defaults.headers.common.Accept = 'application/json';

  $http({ method: 'GET', url: 'http://server/odata4/VDB.1/model/entity?$format=JSON'})

  .then(function mySucess(response) {

  $scope.data = response.data;

  // this callback will be called asynchronously

  // when the response is available

  }, function myerror(response) {

  alert(response.status);

  // called asynchronously if an error occurs

  // or server returns response with an error status.

  });

  });

</script>

</head>

<body>

  <div ng-controller="ODataController">

  <table>

  <tr>

  <th>ID</th>

  <th>description</th>

  </tr>

  <tr ng-repeat="row in data.value">

  <td>{{ row.EntityID }}</td>

  <td>{{ row.EntityDescription }}</td>

  </tr>

  </table>

  </div>

</body>

</html>

• With Internet Explorer I only get a request to allow scripts/ActiveX on the page, but then the data is displaying correctly.

• With all other browsers (Chrome, Firefox, Opera and Safari) I still get an error message. I analized the session using Chrome developer tools and the message there was "XMLHttpRequest cannot load http://server/odata4/VDB.1/model/entity?$format=JSON. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 401.".

Am I missing some configuration on the server?

Thank you,

Marco

[rareddy]

You would need the fix from the JIRA before it works! So, either you can build from master or wait for next milestone.

[shawkins]

9.1 Beta1 should be available next week.

Ramesh should TEIID-4366 go into other branches as well?

[rareddy]

Sure, already in 9.1, but 9.0 and 8.13 can be candidates.

[m.monti]

Thank you for your replies.

We'll wait the release of 9.1.

[m.monti]

An update to this problem: we now have Teiid 9.1.4 installed, but the CORS problems still persist.

We need a solution to this issue, otherwise our Teiid installation is useless.

Thank you.

[rareddy]

Marco,

I just tested with above HTML code it seems to work fine(chrome, firefox), if you are still seeing 401, then user/password is wrong. If you are seeing 403 then make sure the user you are using has a role "odata".

In general CORS support is there, as you can see here [1], if you can elaborate the error you are seeing now, may be I can help further.

Ramesh..

[1] teiid/CorsFilter.java at master · teiid/teiid · GitHub

[m.monti]

Thank you Ramesh for the quick reply.

When I copy the url in the browser everything works fine and the credentials are correct.

From javascript, instead, i keep getting the response "Error: A security problem occurred.".

There must be something wrong with CORS:

• Is it possible that we are missing some configuration on the Teiid server?
• Where can I check?

Thank you in advance,

Marco.