Your users, staff and students will regularly be viewing your IdP login page. They will also be using other sites within your organisation. To ensure that your users will be comfortable entering their username and password the login page should have the same corporate logos, images and branding as the rest of your site.
Recommendation: The AAF Recommends that your IdP user interface has similar corporate branding to the rest of your site.
A number of organisations have just replaced the Shibboleth logos with their corporate logos and stop there. Your web team should be consulted on the design and layout of your IdP to ensure it is consistent with your entire site so your users are comfortable using the site.
You also need to remember that your IdP presents a number of pages to users, not only the login page. Each of these pages needs to have consistent branding. The following tables list the majority of pages your users may experience when logging in;
|Shibboleth IdP pages|
|login.jsp||Main login page|
|login.css||Cascading Style Sheets associate with the login page|
|error-404.jsp||Error page - Invalid URL entered|
|error.jsp||Error page – General IdP error|
|login-error.jsp||Error page – An error occurred while logging in|
|logout.jsp||Page shown on successful completion of the logout|
|images/||Directory for images used by the IdP UI|
|attribute-release.jsp||uApprove user consent of attribute release main page|
|header.jsp||Header for uApprove pages|
|footer.jsp||Footer for uApprove pages|
|styles.css||Cascading Style Sheets associate with the uApprove pages|
|logo.png||Logo that appears on the uApprove pages|
|attribute-release.properties||If you want to change the titles on the uApprove page concatenate this file to /opt/shibboleth-idp/conf/uApprove.properties. Then modify as required.|
|Web Server Error pages|
|503.html||Error – Connection between Apache and Tomcat down – generally Tomcat is not running|
|404.html||Error – Missing file|
|500.html||Error – Server problem|
All error pages should provide suitable information the use can pass onto your support desk that will aid in trouble shooting the issue.
- Customizing the Username/Password Login Page