API Reference - login and logout

The initialization of the script sets the authentication method and credentials you want to use for accessing JasperReports® Server. You can then use the login and logout functions to manage multiple user sessions.

This chapter contains the following sections:

Authentication Properties
Login With Plain Text Credentials
Login With SSO Token
Logging Out
Login With Hooks
UI for Login/Logout
UI for Login/Logout With SSO Token
Sharing Credentials Among Calls
Using Visualize.js Without Authentication

Authentication Properties

The properties argument to the visualize function has all the fields for specifying various authentication methods.

{
    "oneOf": [
        {
            "type": "object",
            "description": "Visualize main properties",
            "properties": {
                "server": {
                    "type": "string",
                    "description": "Url to JRS instance."
                },
                "auth": {
                    "description": "Authentication Properties",
                    "type": "object",
                    "oneOf": [
                        {
                            "properties": {
                                "token": {
                                    "type": "string",
                                    "description": "SSO authentication token"
                                },
                                "headers": {
                                    "type": "object",
                                    "description": "HTTP header parameters"
                                },
                                "queryParams": {
                                    "type": "object",
                                    "description": "HTTP query parameters"
                                }
                            },
                            "additionalProperties" : false,
                            "required": ["token"]
                        },
                        {
                            "properties": {
                                "name": {
                                    "type": "string",
                                    "description": "Name of the user to authenticate"
                                },
                                "password": {
                                    "type": "string",
                                    "description": "Password of the user to authenticate"
                                },
                                "organization": {
                                    "type": "string",
                                    "description": "Organization of the user to authenticate"
                                },
                                "timezone": {
                                    "type": "string",
                                    "description": "Default user timezone to use for this session"
                                },
                                "headers": {
                                    "type": "object",
                                    "description": "HTTP header parameters"
                                },
                                "queryParams": {
                                    "type": "object",
                                    "description": "HTTP query parameters"
                                }
                            },
                            "additionalProperties" : false,
                            "required": ["name", "password"]
                        }
                    ]
                }
            },
            "required": ["server", "auth"]
        },
        {
            "$ref": "#/definitions/func"
        }
    ],
    "definitions": {
        "func" : {
            "title": "Successful callback",
            "type": "object"
        }
    }
}

There are several ways to set the user credentials, based on your environment.

Login With Plain Text Credentials

Specify the username, password, organization (if required), and optional parameters in the authstructure.

visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin",
        organization:"organization_1",
        timezone: "Europe/Helsinki"
    }
}, function (v) {
    ...
}, function () {
    alert("Unexpected error!");
});

Login With SSO Token

If you have single-sign-on (SSO) implemented and have configured JasperReports® Server to use it, you can specify the SSO token for Visualize.js login. This example shows a token from a Central Authentication Service (CAS) server.

visualize({
    auth : { token : "ST-40-CZeUUnGPxEqgScNbxh9l-sso-cas.prod.jaspersoft.com"} 
}, function (v){
    alert("You are now logged into JasperReports Server with your SSO token.");
    ...
}, function(err){
    alert(err.message);
});

Some SSO implementations require encoding, additional parameters, or both. For example, if your server is configured for pre-authentication, you could use the following example to authenticate from Visualize.js. Note that the encoded fields depend on the specifics of your pre-authentication configuration:

var t = encodeURIComponent("u=John|r=Ext_User|o=organization_1|pa1=USA|pa2=1");
visualize({
    auth: {
        token: t,
        preAuth: true,
        tokenName: "pp"
    }
}, function (v){
    ...
});

Logging Out

To log out and destroy the current user session, call the logout function and optionally specify any action to take when done.

visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin",
    }
}, function (v) {
    ...
 
    //destroy session
    $("#logout").click(function () {
        v.logout().done(function () {
            alert("You are now logged out of JasperReports Server.");
        });
    });
});

Login With Hooks

If you have external authentication providers, you can invoke their login and logout URLs.

visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin",
        loginFn: function (properties, request) {
            // Use a customLogin function to authenticate 
            // It must be on the same domain: 'request' works only with JRS instance
            alert("Sending custom login request to 'http://bi.example.com/customLogin'");
            return request({
                url: "http://bi.example.com/customLogin?username=" + properties.name + "&password=" + properties.password
            });
        },
        logoutFn: function (properties, request) {
            // Use a customLogout function to destroy the session
            // It must be on the same domain: 'request' works only with JRS instance
            alert("Sending custom logout request to 'http://bi.example.com/customLogout'");
            return request({
                url: "http://bi.example.com/customLogout"
            });
        }
    }
}, function (v) {
    ...
});

UI for Login/Logout

You can define IDs (#name) with listeners that perform login and logout functions. In your HTML, you can then assign these IDs to the appropriate buttons or links.

visualize(
    function(v){
        $("#selected_resource").change(function () {
            $("#container").html("");
            createReport($("#selected_resource").val(), v);
        });
        $("#login").click(function(){
            v.login(getAuthData()).done(function(){
                createReport($("#selected_resource").val(),v);
                showMessage(".success");
            }).fail(function(){showMessage(".error");});
        });
        $("#logout").click(function(){
            v.logout().done(function(){showMessage(".logout");});
        });
        $(':disabled').prop('disabled', false);
    }
);
 
//create and render report to specific container
function createReport(uri, v) {
    v("#container").report({
        resource: uri,
        error: function (err) {
            alert(err.message);
            }
     });
};
 
function showMessage(selector){
    $(".message").hide();
    $(selector).show();
};
 
function getAuthData(){
    return {name: $("#j_username").val(),
            password: $("#j_password").val(),
            organization:$("#orgId").val(),
            locale:$("#userLocale").val(),
            timezone:$("#userTimezone").val()
           }
};

UI for Login/Logout With SSO Token

The code is slightly different if you have a login/logout UI and use SSO tokens. Note that the logout uses the .always event instead of .done.

visualize(
    function(v){
        $("#selected_resource").change(function () {
            $("#container").html("");
            createReport($("#selected_resource").val(), v);
        });
        $("#login").click(function(){
            v.login(getAuthData()).done(function(){
                createReport($("#selected_resource").val(),v);
                showMessage(".success");
            }).fail(function(){showMessage(".error");});
        });
        $("#logout").click(function(){
            v.logout().always(function(){showMessage(".logout");});
        });
        $(':disabled').prop('disabled', false);
    }
);
 
//create and render report to specific container
function createReport(uri, v) {
    v("#container").report({
        resource: uri,
        error: function (err) {
            alert(err.message);
            }
     });
};
 
function showMessage(selector){
    $(".message").hide();
    $(selector).show();
};
 
function getAuthData(){
    return {token: $("#token").val()};
};

Sharing Credentials Among Calls

Use the visualize.config function to define and store authentication credentials. It uses the same auth structure as the visualize function. You can then create several containers with separate calls to visualize, using the common credentials.

visualize.config({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin",
        organization:"organization_1",
        timezone: "Europe/Helsinki"
    }
});
 
visualize(function (v) {
    v("#container1").report({
        resource: "/public/Samples/Reports/06g.ProfitDetailReport",
        error: function (err) {
            alert(err.message);
        }
    });
});
visualize(function (v) {
    v("#container2").report({
        resource: "/public/Samples/Reports/State_Performance",
        error: function (err) {
            alert(err.message);
        }
    });
});

Using Visualize.js Without Authentication

Internally, Visualize.js uses the REST API to authenticate and interact with the server. However, the REST client receives and reuses the JSESSIONID cookie that identifies it as authenticated, which is also the same cookie used in regular browser clients. Therefore, users who access the JasperReports® Server web app UI and use the same browser to run a visualize.js client before their session expires don't need to authenticate in visualize.js.

If your visualize.js solution includes other browser windows or other authenticated REST calls, then you can simplify your visualize.js and remove the authentication:

// This assumes that authentification was made somehow prior
visualize(function (v) { 
 
    //do what you usally do with 'v'
    console.log(v);
 
});
Version: 
Feedback
randomness