When working a CQ job for a client, it’s always nice to personalise the login screen for them. The following is a guide on how to make simple customisations of the login UI, leaving the underlying logic behind it intact.
The login UI code is located in the JCR at /libs/cq/core/content/login. As with any general overriding, we need to copy the parts we want to update from the /libs folder to the /apps folder. Generate the folder structure /apps/cq/core/content. If you take note of these folders under /libs, you’ll notice that the cq and core folders are of type nt:folder, while the content folder is of type sling:orderedFolder. To avoid complications, it’s best to keep these folder types intact when recreating the structure in the /apps directory. Also note, that the core folder has a property of jcr:mixinTypes, type Name, value rep:AccessControllable.
Hmmmmm not what we expected! Notice in the address bar that the URL still points to /libs. Open a browser debugging tool and have a look at the traffic. Everything is still being served from /libs, including our ‘new’ image, but now the css is being served from /apps, but it’s forbidden!
Luckily, there’s an OSGi setting that defines where the default login page is located. Log into the OSGi console, select the Configuration tab, and open the Day CQ Login Selector Authentication Handler. Update the Default Login Page setting from /libs/cq/core/content/login to /apps/cq/core/content/login and save. Have a look at the change in the browser (after clearing your cache).
OK, the css is back to normal, but now our new image is missing. Note the URL in the address bar though – we’re now serving the login from /apps as we want. But if you look at the web traffic, you see that all of the resources are coming from /apps, except backgroundimage.png which is still coming from /libs.
If you take a look at the file /libs/cq/core/components/login/login.jsp and search for backgroundimage.png, you’ll see the cause – the path to the resource has been hard coded:
Resource bgImg = resourceResolver.getResource(“/libs/cq/core/content/login/bg/background.png”);
Now there’s a couple of ways around this. We could copy the /libs/cq/core/components/login folder to /apps/cq/core/components/login like we did for the content and change the value there. But this would mean that we also need to maintain the other logic that is in the component. If the component is updated in a service pack etc, we would not automatically get the update, since we’re using our own custom version of the login component. Luckily, Sling provides a way around this, and lets us achieve our goal via another setting in the OSGi console.
On the Configuration tab, open the Apache Sling JCR Resource Resolver, and add the following to the URL Mappings:
What this does is say any path in the first part (/libs/cq/core/content/login/), if it’s an outgoing mapping (<), map it to the second path (/apps/cq/core/content/login/). Since the code in the login.jsp component is an outgoing mapping, this will force the resource to be found in /apps instead of /libs. Save the configuration, clear your browser cache, and view the login page again.
All going well, you should see your new image on the login screen, and all other css and images are being served from /apps instead of /libs. Now you can move forward and change the other images and styles to suit the branding you desire.
Coming soon – Customising the Welcome Screen…
Hope you are good. I have couple of questions. Could you please help me on this –
1) I have to implement authentication mechanism same as how author instance works. For example, if any user request for any page http:somehost:someport/content/geometrixx/en.html then system should open the page http:somehost:someport/content/geometrixx/en/toolbar/account/login.html and only after successful login sling should redirect to required page.
I looked into Login Selector Authentication Handler and Sling Authentication Service but it seems there is no configuration here. Could you please let me know your thoughts on how to proceed on this? How it will be possible without CUG and how similer mechanism works in Author instance?
2) My requirement is, user will enter userid in CQ based form and this userid will be validated by 3rd party system using REST call from CQ. Now once user is validated in 3rd party system then user should be able to login to CQ. We do not store user information in CQ.
So, for the purpose of implementation I was thinking about a custom login module or a custom authentication handler, but I am confused on which one to implement.
Actually i want to know that when i give some input type in my CQ jsp page, how will i map that value to the backend java code?
I am actually delighted to read this webpage posts which contains lots of helpful data, thanks for providing such information.
Hi, Same way i can change logo of aem on starting page as well as aem/start.html in 6.4?
Pingback: What does it take to customize the AEM login page? | 约瑟