Customizing IDM User Experience

0 Likes
Just about every client wants to be able to customize their web presence. For IDM, this includes several different points of customization for IDM Home. SSPR has one, User Application has another, OSP has a third. Each is different. There is no single point to customization for the IDM Home presentation.

User Application was the first app to be included with IDM. When it first came out, many clients did not want it used for customer functions due to the inability to make conform to their branding specifications. Now, the application suite has expanded to include the One SSO Provider OAuth based product and the Self Service Password Reset password management product. Both these products introduce their own methods of presentation customization.

The purpose of this article is to begin to consolidate those customization processes. It is not intended to be a comprehensive how‑to document, but rather to start the thought process, and promote your own investigations. Think about it, consider what you, or your client, want the presentation to look like. Then start digging. You will probably find what you need.

User Application



User Application(UA) is the original IDM application. Customization has not changed, much, from the original theme based methods. The real difference in UA between 4.0.2 and 4.5 is the use of OSP as a login front end, and using SSPR for password management. The other change to consider is the expansion of the configupdate program to include the addition of some, heretofor “secret” settings into the mainstream. The internal theme based customization has not changed, but has gotten a little easier to setup.  Rob Schneider wrote an excellent article on how to setup a separate WAR file theme (the preferred method). https://www.netiq.com/communities/cool-solutions/managing-custom-userapp-themes-all-instructions-one-place/

This article was written in the IDM 4.0 days, and there is one update that needs to be mentioned. Where Rob says to modify an attribute in eDirectory (step 12), it is no longer a deep dark secret. In IDM 4.5, you can now use configupdate to make the change (do not forget to apply the latest configupdate patch). Look under User Application, click on Show Advanced Options, and under Miscellaneous (at the bottom), there is a setting called Custom Themes Context Name. Enter there what you would put in the value for the XML data that is called for in Rob’s article. As usual, save configupdate and restart Tomcat for it to take effect. While you are there, check out the handy way to create the eDirectory Indexes needed by IDM, using Configupdate.

By using a separate WAR file to hold the customizations, it is made transportable. When it comes time to deploy to production, copy the WAR file to the new environment, make the configupdate change, and then select the new theme in User App. Since it is a WAR file, Tomcat will deploy it as any other WAR file.

The other means of customizing UA is to use the Theme Administration pages. This is where you can modify the existing Themes. There, you can change the web presentation in many ways. You can add graphics, change colors and modify text. While this may provide the necessary changes, it is not portable. Any change you do in one environment must be repeated in subsequent environments.

Self Service Password Reset



Self Service Password Reset (SSPR) has its own customization. Since this app started out as a stand-alone application, this is not unexpected. The means to customize SSPR are fairly well documented, but do require some knowledge of CSS files. SSPR Documentation covers it rather well;

https://www.netiq.com/documentation/sspr3/adminguide/data/b14kmw4t.html

Additional details are found in TID 7017727; https://www.netiq.com/support/kb/doc.php?id=7017727

The one item that tripped me up, initially, was the entry for the custom.css file. When you enter that, remember, it is relative to the web page document root in the file system.

One SSO Provider



One SSO Provider (OSP) actually has two different methods of customization available. The first uses a custom CSS that defines the web presentation. This article does not go into how to make that work. Why? Because I am not a Web Designer, nor do I play one on TV. I am an IDM Engineer. There are better people who can explain CSS modifications for you. I will point out where you can add your custom CSS files to the mix, if that is your preferred method.

The second method is touched on in the OSP 6.0.0.4 patch readme (the latest at the time of this writing). That patch delivers something that is called OSP-Extras, which includes an osp‑custom‑resources.jar file. The readme only talks about this file in terms of customizing strings, but there is much more in this file.

To gain access to the files inside the jar, follow the instructions in the OSP 6.0.0.4 patch readme:

Note: You will need a JDK to unpack and update the jar file.


  1. Log on to the server where you installed OSP 6.0.

  • Close all browsers currently running the Identity Applications or Identity Reporting.

  • Back up your currentosp-custom-resources.jar file located by default in the osp-installation-path/osp/osp-extras/l10n-resources For example, /opt/netiq/idm/apps/osp_sspr/osp/osp-extras/l10n-resources .

  • Copy the currentosp-custom-resources.jar file to a temporary directory.

  • Extract theosp-custom-resources.jar file in the temporary directory. For example, “jar xf osp-custom-resources.jar”.



When extracting the files, ensure that you maintain the original directory structure.

You will get a directory structure that should look like this;

Top level jar folder

css

images

jsp

META-INF

resources

The css and jsp folders will be empty.  The images folder will have a sample logo in it.  META‑INF has the jar manifest, and resources has a whole lot of localization files.  We are only concerned with the resources/oidp_enduser_custom_resources_en_US.properties file

In a text editor (NOT Notepad), open the resources/oidp_enduser_custom_resources_en_US.properties file.

My editor of preference is PSPad. A free editor, it handles many different file formats and can easily convert between DOS and Unix line terminations. You might also try notepad which shares many of the same features.

Once you have this file opened, go to the very bottom and you will find gold. Look for this comment block;

################################################################################

## L10N note: The properties from this point onward must not be localized, and

## they must not appear uncommented in any .properties file other than the base

## _en_US.properties file (unless the customer wants a different appearance for

## the web pages based on client language).

################################################################################


From this point on, this is where we will be working.

There are three sets of properties that can be set based on the page(s) to be customized:


  1. Common: These apply to both login and authenticated pages.

  • Login: These apply only to login pages.

  • Auth: These apply only to authenticated pages.



Each property setting has comments, that begin with “##”, that describe what they do. To activate a setting, remove the single “#” from the property attribute line and set the values appropriately.

To add a logo, look for these settings in both the Login page properties and Authorized page properties;

## An image to display in the login page banner.

OIDPENDUSER.LoginProductImage=companylogo.png

## Height of the login banner image in pixels

OIDPENDUSER.LoginProductImageHeight=77

## Width of the login banner image in pixels

OIDPENDUSER.LoginProductImageWidth=272


## An image to display in the authenticated page banner.

OIDPENDUSER.AuthProductImage=companylogo.png

## Height of the login banner image in pixels

OIDPENDUSER.AuthProductImageHeight=77

## Width of the login banner image in pixels

OIDPENDUSER.AuthProductImageWidth=272


In this example, the logo file is companylogo.png, and the logo size is 77 pixels high x 272 pixels wide.

You can use a different logo for each page should you desire. There is no rule that says they must be the same.

While you are in the file, check out the other settings that can be done here. There are many more settings that can be made to customize the user presentation.

One other item you may want to change is the Banner Title in these settings;

## Organization name [nbsp], [reg], [tm], [amp], [br], [plus], [apos] are pseudo-tags

## that are converted at runtime into appropriate HTML.

OIDPENDUSER.LoginProductName=<CompanyName>[nbsp]<CompanyApplicationName>


## Organization name [nbsp], [reg], [tm], [amp], [br], [plus], [apos] are pseudo-tags

## that are converted at runtime into appropriate HTML.

OIDPENDUSER.AuthProductName=<CompanyName>[nbsp]<CompanyApplicationName>


Here we change the product name in the banner from the NetIQ default to <CompanyName> <CompanyApplicationName>. Those strings being whatever you, or your client, decide is appropriate.

The client I was working with has a logo with a background color.  To set the banner to match the color, you set these values in the common section.  The default settings had a gradient color banner. In order to make the color match, I set both ends of the gradient to the same value so it would appear as a solid color, matching the logo background. In the Common Properties section, set the following;

## Banner gradient start color

OIDPENDUSER.CommonBkgdOneCustomizableSpace=#002655

## Banner gradient end color

OIDPENDUSER.CommonBkgdTwoCustomizableSpace=#002655


This will set the background color to 0x002655, a dark blue color.

As mentioned, you can use CSS files to perform many of the same operations.  You still need to modify this file, to add your custom CSS file to the chain.  To do this, there is a property to be modified in both the Login page properties and Authorization page properties;

## Ordered list of CSS stylesheets to apply to login pages

#OIDPENDUSER.LoginCss=reset.css,uistyles.css,uistyles_loginselect.css


## Ordered list of CSS stylesheets to apply to authenticated pages

#OIDPENDUSER.AuthCss=reset.css,uistyles.css


Notice that these lists are different.  The Login properties has an additional CSS file in the list.  Add your custom CSS file to the end of the list to make it operational.

These files can be found in the /opt/netiq/idm/apps/tomcat/webapps/osp/css folder.  The disadvantage of this method is, that folder is inside the osp.war file. The folder could be overwritten by any number of war file deployment operations, including patch or version updates.

Save the file in your working directory structure.

Now, copy your companylogo.png file to the images folder in your expanded jar structure.

Referring back to the OSP 6.0.0.4 patch readme, update the jar file and deploy it.

NOTE: It is preferable to use the JAR application from a JDK to perform the update to preserve the jar file integrity.


  1. Update the osp-custom-resources.jar with the customized properties files in the temporary directory.


Ensure that you maintain the original directory structure.

For example:

jar -uf osp-custom-resources.jar resources/oidp_enduser_custom_resources_en_US.properties


add this step, not in the readme

 

jar -uf osp-custom-resources.jar images/companylogo.png



  1. Copy the updated osp-custom-resources.jar to the tomcat/lib directory and replace the one that is there, (if it exists). NOTE: Set file permissions to match the other jars in that folder.

  • Stop Tomcat.

  • Delete the contents of the following directories:





      • Default locations on Linux:

        1. /opt/netiq/idm/apps/tomcat/temp

      • /opt/netiq/idm/apps/tomcat/work/Catalina



  • Default locations on Windows:

    1. C:\NetIQ\IdentityManager\apps\tomcat\temp

  • C:\NetIQ\IdentityManager\apps\tomcat\work\Catalina







  1. Start Tomcat.

  • To verify the changes, complete the following steps:





      • In a browser, open one of the applications that you updated.

    1. Verify that the login page displays the customized strings.




You should now see your Company Logo on the login screen.

One item to mention. IDM is not the only application to use OSP. The * Access products (Cloud Access, Mobile Access, Social Access) also utilize OSP. The documentation sites for these applications may provide other ideas for customization. These applications have Web Based administration that provide some measure of customization.  Perhaps, those pages could be ported into the IDM world to make life easier for the IDM Engineers of the world.

The Cloud Access documentation regarding Customizing Branding on User‑Facing Pages can be found here;

https://www.netiq.com/documentation/cloudaccess-2-3/install_config/data/user_custom_login.html

It is worth a read as it may have some information not found in IDM Documentation.

 

Labels:

How To-Best Practice
Comment List
  • We've been struggling for a couple of months to get the image size set to an acceptable size in OSP that ships with IDM 4.6. Modifying the image sizes using the values in the resources/oidp_enduser_custom_resources_en_US.properties file seems to be limited to a range between 72 and 300 pixels in both width and height so in order to get our branding to use a larger image size we had to take the following additional steps.

    1. Copy the file /opt/netiq/idm/apps/tomcat/webapps/osp/jsp/inc_common_java.jsp to jsp folder in osp-custom-resource.jar

    2. Change these properties in this copied file. All are set to 300 by default. That is why the image size is limited to that. Increase them as per your need
    int LOGIN_PRODUCT_IMAGE_WIDTH_MAX = 300;
    int LOGIN_PRODUCT_IMAGE_HEIGHT_MAX = 300;
    int AUTH_PRODUCT_IMAGE_WIDTH_MAX = 300;
    int AUTH_PRODUCT_IMAGE_HEIGHT_MAX = 300;

    3. Update the jar file to include this new jsp file

    4. Remove the localhost directory, copy this file to tomcat/lib and restart tomcat.
  • Great article on a relevant subject that customers always take up. Really good explanations on what to do and how to.
Related
Recommended