ASP.NET Core Custom datasource Pass bearer token

4 posts, 1 answers
  1. Adam Hayden
    Adam Hayden avatar
    17 posts
    Member since:
    Mar 2018

    Posted 25 Apr 2018 Link to this post

    Hi

    I'm try to get data from an external Api (different domain), how can i send an Authentication token with my request   

    e.g

    .DataSource(dataSource => dataSource

      .Custom()
      .PageSize(20)
       .Schema(schema => schema.Model(m => m.Id(p => p.subid)))
       .Transport(transport =>
            {
                transport.Read(read =>
                 read.Url("http://localhost:5000/api/subscriber/getall")
                    .DataType("jsonp")
                    .Type(HttpVerbs.Get)

                     );      

          })}

    ))

  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 27 Apr 2018 Link to this post

    Hi Adam,

    I assume you need to add an authorization header to the request made by the DataSource. Since this is not possible via the DataSource MVC wrapper, you need to manually add it to the underlying client DataSource object before reading the data. This post elaborates on the steps that you should take to implement this:
    How to bind Kendo.MVC DataSource Read in WebApi using Ajax Request on Razor page

    In short:
    1. Set AutoBind(false) in the Grid to prevent initial binding without the authorization header.
    2. In the page where the Grid is, access the DataSource and add a beforeSend handler that adds the authorization header.
    3. Trigger a DataSource read.
    $(function () {
        var grid = $("#grid").data("kendoGrid");
     
        grid.dataSource.transport.options.read.beforeSend = function (xhr) {
            xhr.setRequestHeader('Authorization', '.......');
            .....
        };
        grid.dataSource.read(); // make a DataSource read, which will now use the authorization header
    });


    The exact implementation inside the beforeSend method and in your controller depends on the specifics of the external API requirements. 

    Regards,
    Tsvetina
    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.
  3. Adam Hayden
    Adam Hayden avatar
    17 posts
    Member since:
    Mar 2018

    Posted 08 May 2018 in reply to Tsvetina Link to this post

    Thanks Tsvetina that really helped can i also get the examples for post/destory 
  4. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 09 May 2018 Link to this post

    Hello Adam,

    If I understand correctly, you want to add the bearer token to the destroy and update/create requests as well. To do this, just add the same logic for the transport.create, transport.update and transport.destroy configurations, something like this:
    $(function () {
        var grid = $("#grid").data("kendoGrid");
      
        grid.dataSource.transport.options.read.beforeSend = addToken;
        grid.dataSource.transport.options.create.beforeSend = addToken;
        grid.dataSource.transport.options.update.beforeSend = addToken;
        grid.dataSource.transport.options.destroy.beforeSend = addToken;
     
        grid.dataSource.read(); // make a DataSource read, which will now use the authorization header
     
        function addToken(xhr) {
            xhr.setRequestHeader('Authorization', '.......');
            .....
        }
    });



    Regards,
    Tsvetina
    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.
Back to Top