How to customize WSO2 Login Page

typical login page of WSO2 IS

If you are using WSO2 IS and if you still couldn’t customize the login page of WSO2 IS according to your requirement, here I am providing you a helping hand on how to do that easily.

Where is this login page?

This login page consist of two jsp pages called “login.jsp” and “basicauth.jsp” which is available in the authenticationendpoint web app inside the <IS_HOME>/repository/deployment/server/webapps folder

How to change this page?

• Currently the login page is using basic Bootstrap.min.css as CSS along with custom-common.css files in css folder inside the authenticationendpoint web app for beautify the login page.

So you can change accordingly and add what ever the css file inside the css folder and link it inside this login.jsp page along with other css files.

<link rel=”icon” href=”images/favicon.png” type=”image/x-icon”/>
 <link href=”libs/bootstrap_3.3.5/css/bootstrap.min.css” rel=”stylesheet”>
 <link href=”css/Roboto.css” rel=”stylesheet”>
 <link href=”css/custom-common.css” rel=”stylesheet”>

• By customizing the login.jsp and basicauth.jsp page along with custom-common.css, you can change the login page as follows. I know my UX is bad!!! :) , but this is only for demonstration. You can make this more better with your own CSS.

• Similarly you can change the text and logos as well.

Furthermore, you can customize all the pages in authenticationendpoint web app along with accountrecoveryendpoint web app which consist of all the jsp web pages which used in all the recovery purposes and Single Sign On scenarios.

Hope this will help you in customizing your web page!!

You also can get more information on customizing your login page based on service providers via [1]

[1] https://docs.wso2.com/display/IS570/Customizing+Login+Pages+for+Service+Providers