The initialization of the script sets the authentication method and credentials that 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 Between Calls |
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 a single-sign-on (SSO) provider 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 mechanisms require encoding, or 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 Between 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, but 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);
}
});
}); |
