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.
Unfortunately, activation email could not send to your email. Please try again.

Can ejReportViewer's POST header be modified?

Thread ID:

Created:

Updated:

Platform:

Replies:

119064 May 7,2015 10:53 AM May 30,2018 05:03 AM JavaScript 7
loading
Tags: ejReportViewer
Kenneth Newell
Asked On May 7, 2015 10:53 AM

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

Soundara Rajan S [Syncfusion]
Replied On May 8, 2015 02:03 AM

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.

Kenneth Newell
Replied On May 8, 2015 10:07 AM

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.

Soundara Rajan S [Syncfusion]
Replied On May 11, 2015 11:36 AM

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.


Thomas V. Blomberg
Replied On December 3, 2015 09:54 AM

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

Soundara Rajan S [Syncfusion]
Replied On December 4, 2015 08:11 AM

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.

adrian
Replied On May 29, 2018 01:00 PM

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

Yuvaraj Devarajan [Syncfusion]
Replied On May 30, 2018 05:03 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;