Sunday, May 31, 2020

Social Login with LinkedIn - Adobe Experience Manager (AEM)

Social Login with LinkedIn - Adobe Experience Manager (AEM)


Social login is the ability to present the option for a site visitor to sign in with their social accounts like Facebook, Twitter, LinkedIn and etc. AEM supports OOTB Facebook and Twitter Social logins but LinkedIn login is not supported OOTB and need to build custom Provider to support the log in flow for websites. 

AEM internally uses the scribejava module to support the Social login flows, scribejava supports multiple providers and both OAuth 1.0 and OAuth 2.0 protocols. The scribe version shipped with AEM won’t support the LinkedIn OAuth 2.0 authentication flow but OAuth 1.0 is supported.
This tutorial explains the steps and the customization required to support the LinkedIn social login in AEM as Cloud version, the same should work with minimal change for other AEM versions.

Prerequisites

  • LinkedIn Developer Account
  • AEM as Cloud Publisher
  • WKND Sample Website
  • Git Terminal
  • Maven


LinkedIn Login Flow


Linkedin-aem-signin-flow

AEM Login URL 

http://localhost:4503/j_security_check?configid=linkedin

LinkedIn Authorization Page URL

https://www.linkedin.com/oauth/v2/authorization?client_id=&redirect_uri=&scope=&response_type=code 
Access Token URL(GET) - https://www.linkedin.com/oauth/v2/accessToken? grant_type=authorization_code&client_id=&client_secret&code=<authorization code received>&redirect_uri=

Access Token URL(GET)

https://www.linkedin.com/oauth/v2/accessToken? grant_type=authorization_code&client_id=&client_secret&code=<authorization code received>&redirect_uri=

Retrieve Profile Data

https://api.linkedin.com/v2/me?projection=(id,localizedFirstName,localizedLastName)? oauth2_access_token=<Access Token>


Steps

  • LinkedIn App Setup
  • Setup Custom LinkedIn OAuth Provider
  • Configure Service User
  • Configure OAuth Application and Provider
  • Enable OAuth Authentication
  • Test the Login Flow
  • Encapsulated Token Support
  • Sling Distribution user’s synchronization


LinkedIn App Setup

As a first step, we should setup the OAuth app from LinkedIn. Login to https://www.linkedin.com/developers/ and click on Create App

create-oauth-app-linkedin


Enter your app name, link to an existing LinkedIn Company or create new one. Upload a logo for your App, accept the Legal agreement and click on Create App. You should verify the company page(Generate a Verification URL and click on the URL to approve the app association with the Company)

oauth-app-linkedin-conf

Add the redirect URL in Auth tab - http://localhost:4503/callback/j_security_check

oauth-app-linkedin-conf

On product tabs select “Sign in with LinkedIn”

oauth-app-linkedin-conf

This will take some time for approval, once approved you can see the required permissions under 
Auth

oauth-app-linkedin-conf

LinkedIn App is ready now, copy the Client ID and Client Secret(reveal the secret before copying) - these values required to enable the OAuth Authentication handler in AEM.

Configure Service User

Enable the service user with required permissions to manage the users in the system, you can use one of the existing service users with required access, I thought of defining new service user(oauth-linkedin-service – name referred in LinkedinOAuth2ProviderImpl.java, change the name if required) 
Create a system user with name oauth-linkedin-service, navigate to http://localhost:4503/crx/explorer/index.jsp and login as an admin user and click on user administration

aem-service-user-configuration

aem-service-user-configuration


Now enable the required permissions for the user, navigate to http://localhost:4503/useradmin(somehow I am still comfortable with useradmin UI for permission management)

aem-service-user-configuration

Now enable the service user mapping for provider bundle – add an entry into Apache Sling Service User Mapper Service Amendment linkedin.oauth.provider:oauth-linkedin-service=oauth-linkedin-service

aem-service-user-mapping


Setup Custom LinkedIn OAuth Provider

As mentioned earlier AEM won’t support LinkedIn authentication OOTB, define a new provider to support the authentication with LinkedIn. Refer https://github.com/Adobe-Marketing-Cloud/aem-communities-oauth-sample/blob/87539ad4453f6589202c414ee14630382b146030/bundles/aem-communities-oauth-linkedin-provider/src/main/java/com/adobe/social/sample/oauth/impl/LinkedinProviderImpl.java#L350 for sample LinkedIn provider. 

The reference provider supports only OAuth 1.0, to support the OAuth 2.0 the provider should be modified and some extra overridden classes required as the AEM shipped scribe package wont support OAuth 2.0 for LinkedIn Provider. 

The LinkedIn Provider to support the OAuth 2.0 can be downloaded from - https://github.com/techforum-repo/bundles/tree/master/linkedin-oauth-provider

LinkedinOAuth2ProviderImpl.java – Provider class to support the LinkedIn authentication
LinkedinOAuth2Api.java – API class extended from default scribe DefaultApi20 to support LinkedIn OAuth 2.0 API integration
LinkedinOauth2ServiceImpl.java – Service class to get the Access Token from LinkedIn service response
LinkedinOauth2TokenExtracter.java – Extract the access token from LinkedIn authorization response

The provider bundle enabled with aem-sdk-api jar for AEM as Cloud Service, the other AEM versions can use the same bundle by changing aem-sdk-api to uber jar.

Clone the repository - git clone https://github.com/techforum-repo/bundles.git

Deploy linkedin-oauth-provider bundle – change the directory to bundles\linkedin-oauth-provider and execute mvn clean install -PautoInstallBundle -Daem.port=4503

Here I am going to enable the authentication for publisher websites, change the port number and deploy to Author if required. After the successful deployment, you should able to see the LinkedIn provider in config manager.

linkedin-oauth-provider-for-aem

The oauth.provider.id can be changed but the same value should b e used while configuring “Adobe Granite OAuth Application and Provider”.

Configure OAuth Application and Provider

Let us now enable the “Adobe Granite OAuth Application and Provider” for LinkedIn

Config ID – Enter a unique value, this value should be used while invoking the AEM login URL
Client ID – Copy the Client ID value from LinkedIn App
Client Secret - Copy the Client Secret value from LinkedIn App(Copy the secret by reveling the value)
Scope - r_liteprofile r_emailaddress
Provider ID – linkedin
Create users – Select the check box to create AEM users for LinkedIn profiles
Callback URL – the same value configured in LinkedIn App(http://localhost:4503/callback/j_security_check)

linkedin-oauth-provider-for-aem

Enable OAuth Authentication

By default, “Adobe Granite OAuth Authentication Handler” is not enabled by default, the handler can be enabled by opening and saving without doing any changes.
linkedin-oauth-provider-for-aem


Test the Login Flow

Now the configurations are ready, let us initiate the login – access http://localhost:4503/j_security_check?configid=linkedin from browser(in real scenario you can enable a link or button pointing to this URL). This will take the user to LinkedIn login screen

linkedin-oauth-provider-for-aem

The user should allow the access for first time

linkedin-oauth-provider-for-aem

Now you should be able to login to the WKND website

linkedin-oauth-provider-for-aem

The user profile is created in AEM

aem-oauth-user-details

aem-oauth-user-details


Whenever the profile data is changed (e.g firstName and LastName) in LinkedIn the same will be reflected to AEM in subsequent login based on the “Apache Jackrabbit Oak Default Sync Handler” configuration.

AEM creates “Apache Jackrabbit Oak Default Sync Handler” configuration specific to each OAuth provider implementations.

The sync handler syncs the user profile data between the external authentication system and AEM repository.

The user profile data is synced based on the User Expiration Time setting, the user data will get synced on the subsequent login after the synced user data expired(default is 1 hr). Modify the configurations based on the requirement.

apache-jackrabit-oak-default-sync-handler


linkedin-oauth-provider-for-aem

Encapsulated Token Support

By default the authentication token is persisted in the repository under user's profile. That means the authentication mechanism is stateful. Encapsulated Token is the way to configure stateless authentication. It ensures that the cookie can be validated without having to access the repository but the still the user should available in all the publishers for farm configuration.

Refer https://docs.adobe.com/content/help/en/experience-manager-65/administering/security/encapsulated-token.html#StatelessAuthenticationwiththeEncapsulatedToken for more details on Encapsulated Token Support

Enable the Encapsulated Token Support in "Adobe Granite Token Authentication Handler"

aem-encapsulated-token-support

Sling Distribution user’s synchronization

The users created in a publisher should be synced to all the other publishers in the farm to support the seamless authentication. I am not finding good reference document to explain the user sync in AEM as Cloud(AEM Communities features are not enabled in AEM as Cloud Service, the user sync was enabled through the community components for other AEM version), planning to cover the user sync in another tutorial.


Conclusion

This tutorial is mainly focused on enabling the authenticate the website users through LinkedIn profile but the same solution can be used with small changes to support different providers. The user authentication is enabled through OAuth 2.0 protocol as LinkedIn was already deprecated the OAuth 1.0. Custom providers and helper classes are required to support the authentication flow as AEM OOTB don’t support the authentication with LinkedIn but supports twitter and Facebook. Feel free to give your feed back and changes on the provider bundle.


No comments:

Post a Comment