We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon
Starting in 2019, the Reporting control is no longer included in Essential Studio. If you're experiencing issues with the Syncfusion Reporting Platform, Report Viewer, Report Designer, or Report Writer, we recommend migrating to Bold Reports, our dedicated reporting platform.

Bold Reports offers a comprehensive suite of tools and features for all your reporting needs, and we will help you make a smooth transition from the discontinued control. Our support team at https://support.boldreports.com/ is here to assist you with any questions or difficulties you may encounter during the migration process.

We thank you for choosing Syncfusion and appreciate your understanding.

Can ejReportViewer's POST header be modified?

Hello,

I'm working on an HTML5/JS web app that has a .NET WebApi backend.  We are using Basic Authentication and I was wondering if there is a way to have the ejReportViewer pass our authentication token in it's Request header?

Thanks

7 Replies

SR Soundara Rajan S Syncfusion Team May 8, 2015 06:03 AM UTC

Hi Kenneth,

Thanks for using Syncfusion products.

This issue is already fixed in our latest version. We are suggesting you to upgrade to the latest version(13.1.0.21) to resolve this issue, else could you please share your current studio version with us? So that we could provide you the prompt solution at the earliest.


Please let us know, if you have any queries.

Regards,
Soundara Rajan S.


KN Kenneth Newell replied to Soundara Rajan S May 8, 2015 02:07 PM UTC

Hi Kenneth,

Thanks for using Syncfusion products.

This issue is already fixed in our latest version. We are suggesting you to upgrade to the latest version(13.1.0.21) to resolve this issue, else could you please share your current studio version with us? So that we could provide you the prompt solution at the earliest.


Please let us know, if you have any queries.

Regards,
Soundara Rajan S.

Thank you for your reply.

I am using version 13.1.0.21 and I'm trying to follow the example in the InvoiceDemo.html with modifications to use my Web API and SSRS.

From the HTML:
    <div id="container" style="position: absolute; height: 100%; width: 100%;"></div>

From the javascript:
        $(function () {
            $("#container").ejReportViewer(
                {
                    reportServiceUrl: "http://myAPIServer/api/SSRS",
                    processingMode: ej.ReportViewer.ProcessingMode.Remote,
                    reportPath: "/myReports/myReport",
                    reportServerUrl: "http://mySSRServer/reportServer",
                    reportLoaded: "onReportLoaded"
                });
        });

When this code executes, it creates a POST with the following Request Header contents: 

  1. POST /api/SSRS/PostReportAction HTTP/1.1 Host: myAPIServer Connection: keep-alive Content-Length: 178 Accept: application/json, text/javascript, */*; q=0.01 Origin: http://localhost:1337 ejAuthenticationToken: 5AF4E519-5FC3-B6D1-CE26-2A9F0309CF98^container User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Content-Type: application/json; charset=UTF-8 Referer: http://localhost:1337/index.html Accept-Encoding: gzip, deflate Accept-Language: en-US,en;q=0.8,nb;q=0.6

I need to be able to insert the following into this header when ejReportViewer calls the API:
  1. Authorization: Basic myEncodedTokenString

Is this helpful?

Thanks for your time.


SR Soundara Rajan S Syncfusion Team May 11, 2015 03:36 PM UTC

Hi Kenneth,

Thanks for your reply.

Thanks for your phone call. This is what I had posted onto the support form:

I am using version 13.1.0.21 and I'm trying to follow the example in the InvoiceDemo.html with modifications to use my Web API and SSRS.

From the HTML:
When this code executes, it creates a POST with the following Request Header contents:
POST /api/SSRS/PostReportAction HTTP/1.1
Host: myAPIServer
Connection: keep-alive
Content-Length: 178
Accept: application/json, text/javascript, */*; q=0.01
Origin: http://localhost:1337
ejAuthenticationToken: 5AF4E519-5FC3-B6D1-CE26-2A9F0309CF98^container
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36
Content-Type: application/json; charset=UTF-8
Referer: http://localhost:1337/index.html
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8,nb;q=0.6
I need to be able to insert the following into this header when ejReportViewer calls the API:
Authorization: Basic myEncodedTokenString
Is this helpful?
if we set the authorization in control, then windows Authentication credential and other credential authorization keys will be overridden.
So that, we are not modifying default authorization header information in control while invoke the Web API. We can able to achieve your requirement in application to override the doAjaxPost method as shown by below code snippet,

ej.ReportViewer.prototype.doAjaxPost = function (type, url, jsondata, onSuccess) {

var proxy = $('#reportViewer').data('ejReportViewer');

var inVokemethod = onSuccess;

$.ajax({

type: type,

url: url,

crossDomain: true,

contentType: 'application/json; charset=utf-8',

dataType: 'json',

data: jsondata,

beforeSend: function (req) {

if (inVokemethod == "_getPageModel" || inVokemethod == "_getPreviewModel") {

if (!proxy._isToolbarClick) {

proxy._showloadingIndicator(true);

} else {

proxy._showNavigationIndicator(true);

}

}

req.setRequestHeader('ejAuthenticationToken', proxy._authenticationToken);

req.setRequestHeader('Authorization', 'Basic Token');

},

success: function (data) {

if (data && typeof (data.Data) != "undefined") {

data = data.Data;

}

if (typeof (data) == "string") {

if (data.indexOf("Sf_Exception") != -1) {

proxy._renderExcpetion(inVokemethod + ":" + data);

return;

}

}

proxy[inVokemethod](data);

},

});

}


For your convenience, we have prepared sample based on this and it can downloaded from below location,
http://www.syncfusion.com/downloads/support/directtrac/138925/SSRSDemo-2089929963.zip

Please let us know, if you have any queries.

Regards,
Soundara Rajan S.



TV Thomas V. Blomberg December 3, 2015 02:54 PM UTC

Hello Soundara,

This article was very helpful! I was looking to do the exact same thing.

I did get this working, but the export functions do not seem to send the token.

Is there a way to make sure the token is passed with the export functions?

Thank you for your help!

-Tommy


SR Soundara Rajan S Syncfusion Team December 4, 2015 01:11 PM UTC

Hi Tommy,

We have used the Form post action for exporting and we could not set the header value in Form Post back. So, we request you to pass the authorization key in Form Post back hidden fields as shown by below code snippet,

JS Snippet:

ej.ReportViewer.prototype._exportReport = function (exportType) {

if (exportType && exportType.length > 0) {

var requrl = this.model.reportServiceUrl + '/PostReportAction';

if ($('#' + this._id + '_exportForm').length > 0) {

var _exportForm = $('#' + this._id + '_exportForm');

_exportForm.attr("action", requrl);

$('#' + this._id + "_exportKey").val(this._authenticationToken);

$('#' + this._id + "_exportRes").val(exportType);

$('#' + this._id + "_authorizationKey").val('Key@123');

_exportForm.submit();

} else {

var exportForm = document.createElement("form");

$(exportForm).attr({"id":this._id + "_exportForm", "method" : "post", "action": requrl, "data-ajax": "false"});


var exportKey = document.createElement("input");

$(exportKey).attr({ "type": "hidden", "id": this._id + "_exportKey", "name": "controlID", "value": this._authenticationToken });


var exportRes = document.createElement("input");

$(exportRes).attr({ "type": "hidden", "id": this._id + "_exportRes", "name": "resourcetype", "value": exportType });


var exportPrint = document.createElement("input");

$(exportPrint).attr({ "type": "hidden", "id": this._id + "_authorizationKey", "name": "AuthorizationKey", "value": 'Key@123' });


$(exportForm).append(exportKey);

$(exportForm).append(exportRes);

$(exportForm).append(exportPrint);

$('body').append(exportForm);

$(exportForm).hide();

$(exportForm).submit();

}

}

$('#' + this._id + '_toolbar_exportListTip').hide();
}


WebAPI Snippet:

public object PostReportAction(Dictionary<string, object> jsonResult)

{

if (jsonResult != null && jsonResult.Count == 0 &&

!string.IsNullOrEmpty(HttpContext.Current.Request.Form["controlID"]) &&

!string.IsNullOrEmpty(HttpContext.Current.Request.Form["resourcetype"]))

{

var _authoToken = HttpContext.Current.Request.Form["AuthorizationKey"];

}


return ReportHelper.ProcessReport(jsonResult, this);

}


For your convenience, we have prepared a sample base on this and it can be downloaded from below location,
http://www.syncfusion.com/downloads/support/directtrac/138925/SSRSDemo-74254030.zip


Regards,
Soundara Rajan S.


AD adrian May 29, 2018 05:00 PM UTC

Hello,
Could you provide some example please or do you know if there is a way to set the Authorization header on the reportviewer angular component last version ?

Thanks


YD Yuvaraj Devarajan Syncfusion Team May 30, 2018 09:03 AM UTC

Hi Adrian, 

Thanks for contacting Syncfusion support.  

We can achieve your requirement when override the doAjaxPost method for passing the custom authorization key token in request header as shown by below code snippet,  
 
Component.ts: 
import { Component } from '@angular/core'; 
 
declare let ej: any; 
@Component({ 
    selector: 'ej-app', 
    templateUrl: './report.component.html',           
                styleUrls: ['./report.component.css'] 
}) 
 
export class ReportViewerComponent { 
    public serviceUrl: string;   
    public reportPath: string; 
 
    constructor() { 
        this.serviceUrl = 'http://localhost:57658/api/ReportApi';         
        this.reportPath = 'Test.rdl';  
 
        ej.ReportViewer.prototype.doAjaxPost = function (type, url, jsondata, onSuccess) {            
            var proxy = this; 
            var inVokemethod = onSuccess; 
                                                var jsonObj = jQuery.parseJSON(jsondata);                                           
                                                if (proxy._reportViewerToken && proxy._reportViewerToken.length > 0) { 
                                                    jsonObj["reportViewerToken"] = proxy._reportViewerToken; 
                                                }                                               
                                                jsondata = JSON.stringify(jsonObj); 
 
           $.ajax({ 
                type: type, 
                url: url, 
                crossDomain: true, 
                contentType: 'application/json; charset=utf-8', 
                dataType: 'json', 
                data: jsondata, 
                beforeSend: function (req) { 
 
                    if (inVokemethod == "_getDataSourceCredential") { 
                        var _json = jQuery.parseJSON(this.data);                        
                        this.data = JSON.stringify(_json); 
                    } 
 
                    if (inVokemethod == "_getPageModel" || inVokemethod == "_getPreviewModel") { 
                        if (!proxy._isToolbarClick) { 
                            proxy._showloadingIndicator(true); 
                        } else { 
                            proxy._showNavigationIndicator(true); 
                        } 
                    } 
                    req.setRequestHeader("ejAuthorization", "BearerMyToken"); 
                }, 
                success: function (data) { 
                    if (data && typeof (data.Data) != "undefined") { 
                        data = data.Data; 
                    } 
                    if (typeof (data) == "string") { 
                        if (data.indexOf("Sf_Exception") != -1) { 
                            proxy._showException(true, { 
                                title: "ReportViewer", 
                               content: inVokemethod + ":" + data, 
                                description: 'An error occurred in ajax postback' 
                            }); 
                            return; 
                        } 
                    } 
                    if (typeof (data) == "object" && !ej.isNullOrUndefined(proxy.model)) { 
                        proxy._onAjaxSuccess(data); 
                    } 
                    proxy[inVokemethod](data); 
                }, 
            }); 
        }      
    } 
} 
 
WebAPI: 
        public object PostReportAction(Dictionary < string, object > jsonResult)  
        { 
            if (jsonResult != null && !string.IsNullOrEmpty(HttpContext.Current.Request.Headers["ejAuthorization"])) 
            { 
                var _authToken = HttpContext.Current.Request.Headers["ejAuthorization"]; 
            } 
            return ReportHelper.ProcessReport(jsonResult, this); 
        } 

We have prepared a sample and it can be downloaded from below location, 

Regards, 
Yuvaraj D. 


Loader.
Live Chat Icon For mobile
Up arrow icon