Customize WSO2 Identity Server AuthenticationEndpoint Web Application

When using the WSO2 Identity Server (IS) as your authentication and authorization for your web applications, there can be many instances that you need to customize the authentication endpoint as mentioned in the official documentation.

• To show their own company theme
• To provide customized theming for different tenants.
• Remove the tenant domains when entering the username

Custom theming

The default authentication endpoint is as follows.

Now lets see how to implement a customized theming logic to change the theming in based on tenants or other attributes as to get a custom theming as follows.

Compile the needed files for each tenant and configure it in Authentication Endpoint web application

1. Clone https://github.com/wso2/identity-apps repo or clone https://github.com/WSO2SADemo/identity-apps and skip step 2.
2. Add the two folders ( customer.com and seller.com ) in java/components/login-portal-layouts/layouts/ as per link
3. Navigate to java/components/login-portal-layouts and execute a mvn clean install
4. Copy the folders in java/components/login-portal-layouts/target/layouts with the same names as ( customer.com and seller.com )
5. Add it to the layouts folder at wso2is-6.1.0/repository/deployment/server/webapps/authenticationendpoint/extensions/layouts

Configure the layout resolver in Authentication Endpoint web application

Edit the wso2is-6.1.0/repository/deployment/server/webapps/authenticationendpoint/includes/layout-resolver.jsp as follows.

This will check the state parameter in the request URL and identify the tenant domain.

The above code will check a query param called “tenantDomain” and fix the lauout file path to the respective folder we copied. If the tenant layout is not found, the default WSO2 IS authenticationendpoint view will be enabled.

Note:

If an file not found error appears in the carbon console or in web console, Add branding-preferences.jsp to wso2is-6.1.0/repository/deployment/server/webapps/authenticationendpoint/includes/

Its possible to change the logic as done in commit with regards to how you read the tenant domain.

Add branding to title of the login page

Its need to edit the 6.1.0/repository/deployment/server/webapps/authenticationendpoint/includes/product-title.jsp as per link so that it reads the tenant domain and change the title and the logo by getting it from the relevant directries.

In the web application, send the authentication URL with the tenantDomain parameter

const url = `${authorizationEndpoint}?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=${responseType}&scope=${scope}&tenantDomain=${authConfig.IS.tenantDomain}`;

Sample authentication request would be as follows

https://localhost:9444/authenticationendpoint/login.do?client_id=mh7_8ewwatpe4hdC_apdcdOaqQUa&commonAuthCallerPath=/oauth2/authorize&forceAuth=false&passiveAuth=false&redirect_uri=https://localhost:9445/devportal/services/auth/callback/login&response_type=code&scope=apim:admin+apim:api_key+apim:app_import_export+apim:app_manage+apim:store_settings+apim:sub_alert_manage+apim:sub_manage+apim:subscribe+openid&state=/home?tenant=domain.com&tenantDomain=carbon.super&tenameDom=seller.com&sessionDataKey=32e9b2ea-f04f-4f1d-8119-fe2b3aa366fa&relyingParty=mh7_8ewwatpe4hdC_apdcdOaqQUa&type=oidc&sp=apim_devportal&isSaaSApp=true&authenticators=BasicAuthenticator:LOCAL

With respective to the tenant domains, the authentication endpoint will take different themes.

When tenameDom is not available

Default Theme

When tenameDom is delivery.com

Delivery Tenant Theme

When tenameDom is seller.com

Seller Tenant Theme

Removing Tenant Domains when entering the usernames

By default the all the non super tenant users have to type in the tenant domain after the username as follows.

This would require a small workaround to increase user experience. And its by handling the query parameter received in the authentication request as well.

In wso2is-6.1.0/repository/deployment/server/webapps/authenticationendpoint/basicauth.jsp

• Add the following to in the $(document).ready(function(){}) in script.
• In the script, changes are in line 12–18 and line 71–79

• Add the following code within the IF statement consist of isIdentifierFirstLogin(inputType))

original username will be a hidden type and it will update on change of the usernamewithoutdomain by appending the query parameter received in the authentication request which will be used in the form submit when clicking on the login button. Please refer to commit if needed

Hope this provided you more clarity on customizing the authentication endpoint in the WSO2 Identity Server authentication endpoint web application.