AEM Cloud Service - Custom Login Page with Adobe ID IMS to login to Publish Instances

Adobe Experience Manager 2024.4.16145.20240430T082417Z-240400

Authentication on AEM Publish instance for a small set of users (say Asset Share Commons use cases) can be achieved by enabling Adobe ID login using IMS on AEM Publish. Users are added to publish instances via Adobe Admin Console (https://adminconsole.adobe.com/). For using SAML on Publish for authentication check product documentation

In the following steps...

          1) Using Admin Console, add users to Publish

          2) Create a custom login page

          3) Set the custom login page for specific page tree authentication

          4) Use AEM product login page for another page tree authentication 

Demo | Package Install | Package Install Content | Github

1) Create project eaem-publish-ims-login using the following command...

set JAVA_HOME=C:/Progra~1/Java/jdk-11.0.6

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate -D archetypeGroupId=com.adobe.aem 
-D archetypeArtifactId=aem-project-archetype -D archetypeVersion=36 -D aemVersion="cloud" 
-D appTitle="Experience AEM Publish IMS Login" -D appId="eaem-publish-ims-login" -D groupId="apps.experienceaem.sites" 
-D frontendModule=none -D includeExamples=n -D includeDispatcherConfig=y

Add user to Publish

2) The next step is to add user to a Product profile of Publish instance in Admin Console > Products > Adobe Experience Manager as Cloud Service > [Instance]-dev-publish > Product Profiles > AEM Users > Users > [Select a user]

Custom Login Page Authentication

3) Create component eaem-publish-ims-login\ui.apps\src\main\content\jcr_root\apps\eaem-publish-ims-login\components\imslogin with the following code in .content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Component"
    jcr:title="IMS Login"
    componentGroup="Experience AEM Publish IMS Login - Content"/>

4) Add the following code (HTL scripting preferred) in eaem-publish-ims-login\ui.apps\src\main\content\jcr_root\apps\eaem-publish-ims-login\components\imslogin\imslogin.jsp

<%@page session="false"
        contentType="text/html"
        pageEncoding="utf-8"
        import="com.adobe.granite.auth.ims.ImsConfigProvider,
                com.adobe.granite.xss.XSSAPI"%>
<%@taglib prefix="sling" uri="http://sling.apache.org/taglibs/sling/1.0"%>
<%@ taglib prefix="ui" uri="http://www.adobe.com/taglibs/granite/ui/1.0" %>

<sling:defineObjects />

<%
    final XSSAPI xssAPI = sling.getService(XSSAPI.class).getRequestSpecificAPI(slingRequest);
    ImsConfigProvider imsConfigProvider = sling.getService(ImsConfigProvider.class);
    String imsLoginUrl = "test";

    if (imsConfigProvider != null) {
        imsLoginUrl = imsConfigProvider.getImsLoginUrl(slingRequest);
        imsLoginUrl = xssAPI.getValidHref(imsLoginUrl);
    }
%>

<div class="eaem-centered coral--dark">
    <button id="eaem-ims-submit-button" is="coral-button" variant="primary" type="submit"
            data-ims-url='<%=imsLoginUrl%>'
            class="_coral-Button--block _coral-Button _coral-Button--cta" size="M">
        <coral-button-label class="_coral-Button-label"><%= resource.getValueMap().get("buttonText", "Sign-in with Adobe")%></coral-button-label>
    </button>
</div>

5) Add the following style in eaem-publish-ims-login\ui.apps\src\main\content\jcr_root\apps\eaem-publish-ims-login\clientlibs\clientlib-site\ims-login.css

.eaem-centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

6) Add the following code in eaem-publish-ims-login\ui.apps\src\main\content\jcr_root\apps\eaem-publish-ims-login\clientlibs\clientlib-site\ims-login.js

(function(document) {

    document.addEventListener("DOMContentLoaded", function(event) {
        const imsSubmitButton = document.getElementById("eaem-ims-submit-button");

        if (!imsSubmitButton) {
            return;
        }

        document.body.classList.add("coral--dark");

        imsSubmitButton.addEventListener("click", function() {
            document.location.replace(this.dataset.imsUrl);
        });
    })
})(document);

7) Create the custom login page /content/eaem-publish-ims-login/us/en/custom-login.html, drag and drop the IMS Login component, publish page...

8) Create the restricted page /content/eaem-publish-ims-login/us/en/restricted-custom-login.html, open Page Properties > Advanced > Authentication Requirement > Enable, select the login page /content/eaem-publish-ims-login/us/en/custom-login and publish the page. Doing so sets the mixin granite:AuthenticationRequired on page making it (and the sub pages) protected...

9) Access the restricted page on publish and you should be redirected to the custom login page... eg. https://publish-p10961-e880305.adobeaemcloud.com/content/eaem-publish-ims-login/us/en/restricted-custom-login.html

Product Login Page Authentication

10) Add the following rules in dispatcher eaem-publish-ims-login\dispatcher\src\conf.dispatcher.d\filters\filters.any for allowing the Product Login page on publish...

/0501 { /type "allow" /method "GET" /url "/libs/granite/core/content/login.html" }
/0502 { /type "allow" /method "POST" /url "*/j_security_check" }
/0503 { /type "allow" /method "GET" /url "/system/sling/logout.html" }
/0504 { /type "allow" /method "GET" /url "/etc.clientlibs/clientlibs/granite*" }

11) Create the restricted page /content/eaem-publish-ims-login/us/en/restricted-product-login.html, open Page Properties > Advanced > Authentication Requirement > Enable. Leave the Login Page box empty for showing the product login page...

12) Access the restricted page on publish and you should be redirected to the product login page... eg. https://publish-p10961-e880305.adobeaemcloud.com/content/eaem-publish-ims-login/us/en/restricted-product-login.html