Authorization header information

Question

Hello,We are using token Authentication and I was wondering if there is a way to set the Authorization header on the reportviewer angular component.If so, Could you provide some example , please?Thanks

Yuvaraj Devarajan · Answer

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, 
Angular: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Angular-1269543125.zip  
Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/ReportService-1795068297.zip  

Regards, 
Yuvaraj D.

Yuvaraj Devarajan · Answer

Hi Adrian, 

In previous update, we have provided the code to send the custom token in WebAPI control for rendering the report. For exporting, we have used the Form post action and could not set the header value in Form Post back. So, we request you to pass the authorization key in Form Post back fields as shown in the below code snippet. 
  




      ej.ReportViewer.prototype._exportReport = function (exportType) {             
             var _exportFormObj = null; 
            if (exportType && exportType.length > 0) { 

                if (this._serviceType == "NETCore") { 
                    var requrl = this.model.reportServiceUrl + '/PostFormReportAction'; 
                } else { 
                    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._reportViewerToken); 
                    $('#' + this._id + "_authorizationToken").val(this.model.serviceAuthorizationToken); 
                    $('#' + this._id + "_exportRes").val(exportType); 
                    $('#' + this._id + "_Authorization ").val('Bearer MyToken'); 
                    _exportFormObj = { exportAction: _exportForm }; 
                    this._onReportExport(_exportFormObj); 
                    _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._reportViewerToken }); 

                    if (this.model.serviceAuthorizationToken.length > 0) { 
                        var exportAuth = document.createElement("input"); 
                        $(exportAuth).attr({ "type": "hidden", "id": this._id + "_authorizationToken", "name": "serviceAuthorizationToken", "value": this.model.serviceAuthorizationToken }); 
                        $(exportForm).append(exportAuth); 
                    } 

                    var exportToken = document.createElement("input"); 
                    $(exportToken).attr({ "type": "hidden", "id": this._id + "_Authorization", "name": "Authorization", "value": 'BearerMyToken ' }); 


                    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 + "_exportPrint", "name": "isPrint", "value": false }); 

                    var exportName = document.createElement("input"); 
                    $(exportName).attr({ "type": "hidden", "id": this._id + "_exportfileName", "name": "reportName", "value": "" }); 

                    $(exportForm).append(exportKey); 
                    $(exportForm).append(exportRes); 
                    $(exportForm).append(exportPrint); 
                    $(exportForm).append(exportName); 
                    $(exportForm).append(exportToken); 
                    $('body').append(exportForm); 
                    $(exportForm).hide(); 
                    _exportFormObj = { exportAction: exportForm }; 
                    this._onReportExport(_exportFormObj); 
                    $(exportForm).submit(); 
                } 
            } 
            $('#' + this._id + '_toolbar_exportListTip').hide(); 
        } 





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 _token = HttpContext.Current.Request.Form["Authorization"]; 
            } 
            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, 
Angular: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Angular561374257.zip  
Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/ReportService-1795068297.zip  

Regards, 
Yuvaraj D.

adrian · Answer

Hi Yuvaraj. thanks for your answer. It was a great help.

Now we need to set authorization header value when trying to retrieve an image from the server.

GetResource is the endpoint is being called for this.

Do you know if there is a way to pass authorization token when this endpoint is called?

thanks

Adrian

Yuvaraj Devarajan · Answer

Hi Adrian, 

We are not able to send the authentication token value for the GetResource method in WebAPI service. Since the “GetResource” method will be called using the image tag source as shown in below screenshot. We can authenticate the whole WebAPI method in PostReportAction method itself as like as previously shared update.  

   

Regards, 
Yuvaraj D.