Level 3

How to get the sign in button while login

Forum|Forum|1 year ago
June 12, 2024
5 replies
1796 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

h_kataria

Community Advisor

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

Community Advisor

@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.

HrishikeshKagne

Community Advisor

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

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.
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:

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.
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.
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.

Hrishikesh Kagane

S

Srinivas_OptiAuthor

Level 3

Hello @hrishikeshkagne

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

HrishikeshKagne

Community Advisor

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.

Hrishikesh Kagane

BrianKasingli

Community Advisor and Adobe Champion

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.

S

Srinivas_OptiAuthor

Level 3

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

Community Advisor and Adobe Champion

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

kautuk_sahni

Community Manager

@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!

Kautuk Sahni

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

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

Detailed Steps for Implementation:

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded