How to get the sign in button while login

[Srinivas_Opti]

Hello,

While logging in to adobe cloud we are getting the button "Sign in with Adobe"

But the same does not appear on  vanilla AEM instance .

Can you please provide the code that is doing this change. How can i add this "Sign in with Adobe" to my local

Regards,

Srinivas

[h_kataria]

Not sure what your use case is or why you need to use SSO on local but "Sign in with Adobe" is visible on the cloud instances due to the IMS integration which is not present for your local instance, hence you cannot see that button.
The responsible config for the same is com.adobe.granite.auth.ims.impl.ImsConfigProviderImpl 

You can check the implementation for login screen at /libs/granite/core/components/login/login.jsp 

[Harwinder-singh]

@Srinivas_Opti  Sign in  with Adobe uses your Adobe account Org's IMS credentials that you dont have access to in your local instance. You can log into your local instance using a valid AEM user stored locally in your AEM environment's JCR.

[HrishikeshKa]

Hi @Srinivas_Opti ,

To integrate the "Sign in with Adobe" button for Adobe IMS (Identity Management System) into a local AEM instance, you need to configure your AEM instance to use Adobe IMS for authentication. This involves several steps, including configuring OAuth with Adobe IMS and updating the AEM login page to display the "Sign in with Adobe" button.

Steps to Add "Sign in with Adobe" Button in AEM

1. Set Up Adobe IMS Configuration in AEM:

   • Create OAuth Integration in Adobe Developer Console:

     • Go to the Adobe Developer Console.
     • Create a new project or select an existing one.
     • Add a new OAuth 2.0 API to the project.
     • Configure the OAuth client by providing the required redirect URI (e.g., http://localhost:4502/aem/j_security_check).

   • Get IMS Configuration Details:

     • Client ID
     • Client Secret
     • Redirect URI
     • Authorization Endpoint
     • Token Endpoint

   • Configure OAuth in AEM:

     • Go to AEM Web Console ConfigMgr (http://localhost:4502/system/console/configMgr).
     • Configure Adobe Granite OAuth IMS Provider with the details from the Adobe Developer Console.

2. Update AEM Login Page to Include "Sign in with Adobe" Button:

   • Create or Update Custom Login Page:

     • Navigate to your AEM login page, typically found under /libs/granite/core/content/login.
     • Overlay this login page to your project's apps folder (e.g., /apps/myproject/core/content/login).

   • Add "Sign in with Adobe" Button to Login Page:

     • Edit the HTML of the login page to include the "Sign in with Adobe" button.
     • Add the necessary JavaScript to handle the OAuth flow.

Example Code to Add "Sign in with Adobe" Button:

HTML Update for Login Page:

<sly data-sly-use.clientLibs="core.wcm.components.clientlibs" data-sly-call="${clientLibs.css @ categories='granite.ui.login'}" />
<sly data-sly-call="${clientLibs.js @ categories='granite.ui.login'}" />

<form action="${redirectUrl}" method="post" id="login" class="coral-Form--vertical">
    <coral-panelstack>
        <coral-panel>
            <coral-panel-content>
                <!-- Existing AEM login fields -->
                <coral-form-fieldset>
                    <coral-form-fieldwrapper>
                        <label class="coral-Form-fieldlabel" for="username">Username</label>
                        <coral-textfield id="username" name="j_username" class="coral-Form-field" required></coral-textfield>
                    </coral-form-fieldwrapper>

                    <coral-form-fieldwrapper>
                        <label class="coral-Form-fieldlabel" for="password">Password</label>
                        <coral-password id="password" name="j_password" class="coral-Form-field" required></coral-password>
                    </coral-form-fieldwrapper>
                </coral-form-fieldset>
                
                <!-- Add the "Sign in with Adobe" button -->
                <coral-button variant="primary" type="button" id="adobe-signin" class="coral-Button">Sign in with Adobe</coral-button>
            </coral-panel-content>
        </coral-panel>
    </coral-panelstack>
</form>

<script>
    document.getElementById('adobe-signin').addEventListener('click', function() {
        var clientId = 'YOUR_CLIENT_ID';
        var redirectUri = 'YOUR_REDIRECT_URI';
        var authEndpoint = 'YOUR_AUTHORIZATION_ENDPOINT';
        var url = authEndpoint + '?client_id=' + clientId + '&redirect_uri=' + redirectUri + '&response_type=code&scope=AdobeID,openid';
        window.location.href = url;
    });
</script>

Detailed Steps for Implementation:

1. Overlay the Login Page:

   • Create a new login page at /apps/myproject/core/content/login.
   • Copy the existing login page from /libs/granite/core/content/login to your new location.

2. Modify the Overlayed Login Page:

   • Update the HTML to include the "Sign in with Adobe" button.
   • Ensure the button triggers the OAuth flow when clicked.

3. Test the Integration:

   • Deploy your changes to your AEM instance.
   • Access the login page and click the "Sign in with Adobe" button.
   • Ensure the OAuth flow redirects back to your AEM instance and logs you in.

By following these steps, you can integrate the "Sign in with Adobe" button into your local AEM instance, allowing users to authenticate using Adobe IMS.

[Srinivas_Opti]

Hello @HrishikeshKa 

Thanks for the detailed input. 

In my local under /libs/granite/core/content/login

I hardcoed  the  imsLoginUrl="/j_security_check", then can see the "Sign in with Adobe" button coming up.

My query:-

I modified the below  

• Configured Adobe Granite OAuth IMS Provider with the details from the Adobe Developer Console.
• Adobe Granite OAuth IMs Configuration Provider

Now with the existing code I noticed that " imsLoginUrl = imsConfigProvider.getImsLoginUrl(slingRequest);"

is coming up as null,

QUESTION:-

Any idea do you have as why imsLoginUrl is coming up as null the login.jsp??

Regards,

Srinivas

[HrishikeshKa]

Hi @Srinivas_Opti ,

If the `imsLoginUrl` is coming up as null in the `login.jsp` file, there could be a few possible reasons for this:

1. Configuration Issue: Double-check the configuration of the Adobe Granite OAuth IMS Provider in AEM. Ensure that you have correctly entered the details from the Adobe Developer Console, such as the Client ID, Client Secret, and Redirect URI. Any misconfiguration in these settings can cause the `imsLoginUrl` to be null.

2. Missing Dependencies: Verify that all the required dependencies for the Adobe Granite OAuth IMS Provider are correctly installed and available in your AEM instance. Make sure that the necessary OSGi bundles and packages are present and active.

3. Request Context: Check if the `slingRequest` object is properly initialized and passed to the `imsConfigProvider.getImsLoginUrl()` method. If the request context is not set correctly, it can result in a null value for `imsLoginUrl`.

4. Customization or Overrides: If you have made any customizations or overrides to the default behavior of the Adobe Granite OAuth IMS Provider or the `login.jsp` file, ensure that they are implemented correctly and not causing any conflicts or issues.

It is recommended to review the configuration, dependencies, and code implementation related to the Adobe Granite OAuth IMS Provider and the `login.jsp` file. Additionally, check the AEM logs for any error messages or warnings that might provide more insights into the issue.

[AEMWizard]

Thanks ChatGPT, I've been following you, and this is considered spamming, I am reporting you. 

You should have a word with the administrators, this is getting out of hand. It's just very disrespectful to the community... You should really stop.. Spamming is not good, and also shows us that you are not a professional because anyone can use chat GPT to post questions on the query.

[AEMWizard]

Thanks ChatGPT

[BrianKasingli]

Q: Can you please provide the code that is doing this change. How can i add this "Sign in with Adobe" to my local.

As an AEM developer on your local machine, you should ALWAYS sign in as
username: admin
password: admin

This gives you the full capabilities of an admin to implement AEM solutions for what you need. And if you have a requirement to test a specific user group or type of user, you can use the AEM tools to create a new user, and sign in as another user. Basic Auth is the way to go with Local AEM Development. 

Please don't waste your time trying to setup Single Sign On for your local machine, it's not worth it. To find the sign in page, just click on this link here http://localhost:4503/libs/granite/core/content/login.html.

[Srinivas_Opti]

Hello @BrianKasingli ,

Thanks for your input.

I actually need it for one of our authoring AEM servers. It was not showing up "Sign in with Adobe" ,so was checking what probably I need to change to make it available.

Thanks,

Srinivas

[BrianKasingli]

Weird, is this AEMaaCS? if it his, shoot Adobe a support ticket.

[Srinivas_Opti]

Hello @BrianKasingli ,

After doing the changes to  required configuration 

• Configured Adobe Granite OAuth IMS Provider with the details from the Adobe Developer Console.
• Adobe Granite OAuth IMs Configuration Provider

it is showing up the "Sign in with Adobe" button. On clicking it hits the url hostname/j_security_check?provider=xxxxxx&configid=xxx
but does not redirect and stays on the same sing up page.

Any input What could I look across to resolve this issue.

Regards,
Srinivas

[kautuk_sahni]

@Srinivas_Opti Did you find the suggestion helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!