This is a migrated thread and some comments may be shown as answers.

How to set Authorization header for transport read?

9 Answers 1888 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 20 Dec 2011, 10:49 PM
I need to supply basic auth to my server and this can be done using jQuery $.ajax and using the "beforeSend" option like this :-

$.ajax({
       url: "http://someserver:8554/search",
       type: 'POST',
       beforeSend: function(req) {
           req.setRequestHeader('Authorization', auth);
       },
       success: function(data) {
           log(data);
       }
   });

auth is a base64 encoded string that I create that contains the user and password.

Can this be done with the Kendo DataSource?

9 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 21 Dec 2011, 10:29 AM
Hi John Wilcox,

As you probably know, when remote requests are used, DataSource by default will use jQuery ajax to make those requests. Having this in mind you may use the transport's read options to pass additional parameters which will be then assign to the $.ajax. For example:

new kendo.data.DataSource({
    transport: {
        read: {
            url: "http://someserver:8554/search",
            type: 'POST',
            beforeSend: function(req) {
                req.setRequestHeader('Authorization', auth);
            }
        }
    },
    change: function() {
        log(this.data());
    }
}).read();

Regards,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sergiu
Top achievements
Rank 1
answered on 03 Dec 2014, 03:57 PM
How can this be set for all datasources in the application whithout having to add it for each datasource individually?
0
Ryan
Top achievements
Rank 1
answered on 24 Dec 2014, 06:45 PM
No matter WHAT I do, I cannot get the DataSource to send an authentication header:

The Auth string is correct and works fine in "Advanced Rest Client" in my browser.

==================================================================
define(function () {   

    var dataSource = new kendo.data.DataSource({
        transport: {
            read: window.apiRoot + 'accounts',
            type: "GET",
            beforeSend: function (xhr) {
                xhr.setRequestHeader('Authorization', window.auth);
            }
        }
    });

    return dataSource;
});

The Network tab shows a RED request, and when I look at it, the Authentication header is NOT there.

I'm going out of my mind in frustration - I've been at this for 2 hours.

I know the datasource works because when I populate it with dummy data I can use it - the problem HAS to be that the transport is not sending the header.

Any ideas?









0
Alex Gyoshev
Telerik team
answered on 25 Dec 2014, 09:23 AM
Hello Ryan,

The beforeSend option should be passed to transport.read, not to the transport directly:

    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: window.apiRoot + 'accounts',
                type: "GET",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('Authorization', window.auth);
                }
            }
        }
    });

Regards,
Alex Gyoshev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Grahame
Top achievements
Rank 1
answered on 16 Mar 2017, 10:12 AM
I'm also looking to secure a .NET MVC Core API with JWT can you point in the direction of a .NET ASP Core way of injecting a JWT into the client request using TagHelpers/HtmlExtensions or similar; I was hoping the datasource events would allow this ?  
0
Rosen
Telerik team
answered on 20 Mar 2017, 10:01 AM

Hello Grahame,

I'm afraid that we do not have example of how to use JWT with UI for ASP.NET MVC. However, the approach for sending the auth token as a custom request header similar as describe in this issue can be used. Unfortunately, the current way of setting custom request headers via the wrappers is a bit cumbersome.

If you need further assistance please feel free to open a separate support request, as your question is not directly related to the one discussed in this thread. 

Regards,
Rosen
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
n/a
Top achievements
Rank 1
answered on 30 Apr 2018, 04:19 PM

I've tried this every way I could think of... nothing seems to put the token in the request header.  If I set the server to allow anonymous access then the method returns data as expected.

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
    <div class="BoxAthletes">
        <h3>#:username#</h3>
    </div>
</script>

<script>
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "https://wodmodeapi.azurewebsites.net/api/v/p/athletes",
                dataType: "jsonp",
                //headers: { 'Authorization': 'Bearer 5bY8Ot8X-m4tYoF_rjVjFdYwtt_LQfzS6yqgy-c4jzUzDxwnajRKChNU7m_NxSbu4eaLQAoMzNc-lPBvIUWaZdIeACabECoK44QdU8fnlrJAkdBa9aQiCTUuxUhuAL1VWQv5T-OfALPGFA96E9Y0-ZBxwZlhawVHcWDRGP2378WzF3gX35L1c5d0k_5KegT97t7-_fOTakLWN4kCk6QwG_-gSCGoBTSjktl5tKGXXgE' }
                beforeSend: function (req) {
                    req.setRequestHeader("Authorization", "Bearer 5bY8Ot8X-m4tYoF_rjVjFdYwtt_LQfzS6yqgy-c4jzUzDxwnajRKChNU7m_NxSbu4eaLQAoMzNc-lPBvIUWaZdIeACabECoK44QdU8fnlrJAkdBa9aQiCTUuxUhuAL1VWQv5T-OfALPGFA96E9Y0-ZBxwZlhawVHcWDRGP2378WzF3gX35L1c5d0k_5KegT97t7-_fOTakLWN4kCk6QwG_-gSCGoBTSjktl5tKGXXgE");
                }
            }
        },
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { type: "number" },
                    email: { type: "string" },
                    username: { type: "string" },
                    tagline: { type: "string", nullable: true },
                    url: { type: "string", nullable: true },
                    created_dt: { type: "date" },
                    edited_dt: { type: "date" },
                    birth_dt: { type: "date" },
                    crossfit_dt: { type: "date" },
                    gender: { type: "string" },
                    img_guid: { type: "string" },
                    score_privacy: { type: "string" },
                    banned_flag: { type: "number" }
                }
            }
        }
    });

    $("#listView").kendoListView({
        dataSource: dataSource,
        pageable: true,
        template: kendo.template($("#template").html())
    });
</script>

 

0
n/a
Top achievements
Rank 1
answered on 30 Apr 2018, 06:56 PM
It appears the issue is due to the request being cross domain.  I've updated the API to accept CORS requests.
0
Dimitar
Telerik team
answered on 03 May 2018, 06:57 AM
Hello Shawn,

You can also check out the following documentation article on CORS data fetching for additional information:


Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Data Source
Asked by
John
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Sergiu
Top achievements
Rank 1
Ryan
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Grahame
Top achievements
Rank 1
n/a
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or