Rendering the Shibboleth IdP login page on mobile devices
Shibboleth comes with a template login page for IdP's that use username/passwords to authenticate users. This page is usually customised with institutional branding and provides users with advice on which credentials to enter (network/email/library credentials etc.). The template also has placeholders to display information about the service being accessed, including a logo of the service provider, all of which is obtained from the Edugate metadata.
This page can be rendered on a mobile device with just a few adjustments, this zip file includes a template for (Shibboleth 2.4.x) that renders in either a desktop browser with an expanded layout or on mobile devices with a condensed layout.
To apply this template to an existing login page, you should replace the login.css file and make the following adjustments to the login.jsp page.
- Move the ServiceDescription and ServiceLogo placeholders from the 'column one' div to the 'column two' div.
- Add the line containing the 'infobtn' span from the template
- Insert the javascript snippet from the template into the bottom of your login.jsp page.
- Change the dummylogo.png url to the url used by the standard for your desktop login page
Rebuild the idp.war package and deploy it, on most IdP's this is as simple as running the install.sh/bat script (DO NOT choose the option to replace your configuration, DO choose to install in the location of your existing installation -usually /opt/shibboleth-idp or c:Program Files (x86)Internet2Shib2IdP)