Login with hooks

Visualize.js login with hooks

HTML

<!-- Visualize: login/logout with SSO sample (5.6)
  -->

<script type='text/javascript' src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<select id="selected_resource" disabled="false" name="report">
	<option value="/public/Samples/Reports/AllAccounts">All Accounts (light)</option>
	<option value="/public/Samples/Reports/5g.AccountsReport">All Accounts (dark)</option>
	<option value="/public/Samples/Reports/SalesByMonthReport">Sales By Month Report (light)</option>
	<option value="/public/Samples/Reports/11g.SalesByMonthReport">Sales By Month Report (dark)</option>
	<option value="/public/Samples/Reports/ProfitDetailReport">Profit Detail Report (light)</option>
	<option value="/public/Samples/Reports/06g.ProfitDetailReport">Profit Detail Report (dark)</option>
	<option value="/public/Samples/Reports/9.CustomerDetailReport">Customer Detail Report (light)</option>
	<option value="/public/Samples/Reports/9g.CustomerDetailReport">Customer Detail Report (dark)</option>
	<option value="/public/Samples/Reports/State_Performance">Performance by Store Type (light) </option>
	<option value="/public/Samples/Reports/10g.PerformanceByStoreType">Performance By Store Type (dark) </option>
	<option value="/public/Samples/Reports/14.PerformanceSummary">Performance Summary</option>
</select>
<!--Provide container to render your visualization-->
<div id="container"></div>

CSS

.control {
    display: block;
}
.control.input.text > .wrap {
    display:block;
}
.control > input {
    width: 360px;
}
.error, .logout {
    color: red;
}
.success {
    color: green;
}
.message {
    display: none;
}

JavaScript

// Visualize: Login/Logout with hooks

visualize({
    auth: {
        name: "joeuser",
        password: "joeuser",
        organization: "organization_1",
        loginFn: function (properties, request) {
            //use whatever you want to establish authentication 
            //be aware of same domain policy, 'request' works only with JRS instance
            alert("Send custom login request. To 'https://mobiledemo.jaspersoft.com/jasperserver-pro/rest_v2/login'");
            return request({
                url: "https://mobiledemo.jaspersoft.com/jasperserver-pro/rest_v2/login?j_username=" + properties.name + "&j_password=" + properties.password + "&orgId=" + properties.organization
            });
        },
        logoutFn: function (properties, request) {
            //use whatever you want to destroy session
            //be aware of same domain policy, 'request' works only with  JRS instance
            alert("Send custom logout request. To 'https://mobiledemo.jaspersoft.com/jasperserver-pro/customLogout'");
            return request({
                url: "https://mobiledemo.jaspersoft.com/jasperserver-pro/logout.html"
            });
        }
    }
}, function (v) {

    function createReport(uri) {
        v("#container").report({
            resource: uri,
            error: function (err) {
                alert(err.message);
            }
        });
    };

    //enable report chooser
    $(':disabled').prop('disabled', false);
    createReport($("#selected_resource").val());

    $("#selected_resource").change(function () {
        $("#container").html("");
        createReport($("#selected_resource").val());
    });

    //destroy session
    $("#logout").click(function () {
        v.logout().done(function () {
            alert("Destroy session");
        });
    });

});