Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 15 Current »

It is possible to include JavaScript in the User Interface pages created by Ubisecure SSO. See also Ubisecure SSO Management guide.

Step-by-step guide  

  1. Include the following line in the template configuration file custom/templates/templatename.properties

    custom/templates/templatename.properties
    javascript = /resource/script/ui-extension.js


    multiple files can be specified using a comma as a separator:

    custom/templates/templatename.properties
    javascript = /resource/script/ui-extension.js, /resource/script/brandA.js

  2. Create ui-extension.js in custom/resources/script directory containing

    custom/resources/script/ui-extension.js
    // ui-extension.js v1.0.0

$(document).ready(function() {

 	// $("#helptext").hide(); -> Hide the helptext DIV
	// alert(view.getMethod()); -> Shows the method name
	// alert(view.getTemplateName()); -> "Default" etc.
	// alert(view.getConversationName()); -> this is "authn" for authentication pages, "error" in error pages, and "logout" when logging out. Use this value to target changes to certain page types
	// alert(view.getViewServerPage()); -> Prints the server jsp page, use this value to target changes to certain pages
	// alert(view.obj.locale); -> Show currently chosen locale

	// e.g. Move the 'Cancel' -button (#exit div) to end of the #login div dialog box and make it visible. 	
	// Hides the introtext DIV completely.
	if ( $( "#loginerror" ).length ) {
		$("#login").append($("#exit"));
		$("#exit").css({'display': 'inline'});
		$("#introtext").hide();
	}

 })

  3. Add references to any scripts used in custom/resource.index

    custom/resource.index
    ui-extension.js = resources/script/ui-extension.js
jslibrary-X.X.X.js = resources/script/jslibrary-X.X.X.js
brandA.js = resources/script/brandA.js

  4. In Ubisecure SSO Management, add the template name to Agent being used.


Example 2

The following code will

  • detect that the user is will displayed a user not found error,
  • replace the page HTML with a page with a spinning wait logo in the middle of the page and then
  • redirect the user to the URL configured as registration.url in the template links file
  • the registration link will have an appended return URL to send the user back to the login process for the same target application


ui-extension.js
if (view.getStatus() == 'INVALID' && view.getSubStatus() == 'NOTFOUND') {
    document.write('<html style="height:100%;width:100%;background:url(/uas/resource/loading.gif) center center no-repeat;"/>');
    view.navigate2('registration');
}

Example 3

Invoking specific behaviour on error pages.

ui-extension.js
if (view.getConversationName() == 'error') {
	// do something only on error pages
}

Example 4

Invoking specific behaviour on the logout page.

 

ui-extension.js
if (view.getConversationName() == 'logout') {
	// do something only on the logout pages
}

Example 5

Invoking specific behaviour on the authentication pages.

ui-extension.js
if (view.getConversationName() == 'authn') {
	// do something only on the authentication pages
}

Example 6

For a specific agent, with the EntityID 7b8d3ae7-8ab9-41bd-9819-b7a99bd77c47, when the user is logging in, automatically select the logo for the method "tupas.test.1" when the template name is "default". If User Driven Federation is occurring, and the template name is "federation", hide other external methods from the user.

$(document).ready(function() {
	if(view.obj.conversation.agentRef == '7b8d3ae7-8ab9-41bd-9819-b7a99bd77c47') {                                                        
		if(view.getTemplateName() == 'default') {
			$('#login').hide();
			$('span.tupas\\.test\\.1').find('img').click()                                                 
		}                                                  
	if(view.getTemplateName() == 'federation') {
		$('#external').hide();
		}                           
	}
})



jQuery is currently included in most pages by default as it is used by the default pages. It's version is managed in the build process and it is not advised to overload it as it may result in incompatibility.

Beware browser caching of JavaScript and CSS files. When testing, clear your cache aggressively.

It is recommend to include version numbers in any JavaScript files to help determine which version is used by the browser.



  • No labels

Ubisecure Privacy Policy & Cookie Statement