SSO login screen ui-extension examples

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

jQuery is currently included in most pages by default as it is used by the default pages.

For SSO version 8.9.0 and later, jQuery is version managed in the SSO build process. It is not advised to overload it as overloading 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.

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();
		}                           
	}
})


Related articles