Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Using AEM as a Frontend with a REST API

Avatar

Avatar
Validate 1
Level 1
Aeshian
Level 1

Likes

0 likes

Total Posts

3 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile

Avatar
Validate 1
Level 1
Aeshian
Level 1

Likes

0 likes

Total Posts

3 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile
Aeshian
Level 1

17-05-2020

We are a set of Fullstack developers who are using Java Springboot and MySQL to develop backends with JWT authentication and use VueJS / ReactJS to develop single page frontend. We have also used Laravel views to develop our frontend applications to work with external APIs. 

 

Recently we have been provided with a project that enforces to use AEM for the development of a customer portal that allows customers to register with mobile number and OTP, view and manage their profile, send service requests to administrators and there has to be a separate admin portal which allows the administrators to log in and see customer requests and other administration work.

 

The system utilizes a lot of third party API from different services and we want to manage everything using a single backend. Following is the architecture we are planning to develop

 

HighLevel Stack.jpg

 

My questions are,

1. Is this a correct approach when developing with AEM as we are not utilizing many CMS features of it? 

2. Since REST APIs are being used, what are the methods that we can use which also caters JWT based authentication? (eg: how to save the user token, manage state etc)

 

Based on the client policies, we have to use AEM for any frontends and Managed SQL (provided by them) for the database.

 

TIA

AEM API jwt rest api

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 1
MVP
Umesh_Thakur
MVP

Likes

147 likes

Total Posts

157 posts

Correct Reply

53 solutions
Top badges earned
Validate 1
Applaud 25
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Validate 1
MVP
Umesh_Thakur
MVP

Likes

147 likes

Total Posts

157 posts

Correct Reply

53 solutions
Top badges earned
Validate 1
Applaud 25
Ignite 3
Ignite 1
Give Back 5
View profile
Umesh_Thakur
MVP

18-05-2020

One solution can work in your scenario:

1. Use AEM only as CMS not for the frontend. From AEM side make API call to get the vary little data to be consumed by the server side and for the rest of the data, provide required information in the form of window object to frontend.

2. Use React to make the API call based on the data provided by AEM to generate the look and fill of the frontend.

Serverside call is expensive.

 

You can use some middle ware like APIGEE accomplish your API security needs.

Answers (1)

Answers (1)

Avatar

Avatar
Give Back 5
Employee
Andrew_Khoury
Employee

Likes

75 likes

Total Posts

93 posts

Correct Reply

33 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 10
Give Back
Boost 50
View profile

Avatar
Give Back 5
Employee
Andrew_Khoury
Employee

Likes

75 likes

Total Posts

93 posts

Correct Reply

33 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back 10
Give Back
Boost 50
View profile
Andrew_Khoury
Employee

18-05-2020

1. See the Single Page Application (SPA) feature set for AEM, here is the React tutorial:

https://helpx.adobe.com/experience-manager/kt/sites/using/getting-started-spa-wknd-tutorial-develop/...

 

If that is too tightly integrated then see the headless CMS features of AEM:

https://docs.adobe.com/content/help/en/experience-manager-learn/getting-started-with-aem-headless/ov...

https://www.adobe.com/experience-cloud/topics/headless-cms.html

https://www.hcltech.com/blogs/understanding-how-adobe-aem-delivers-headless-content

https://www.conexiogroup.com/getting-started-with-headless-architecture-in-aem/

http://aempodcast.com/2017/aem-resources/aem-headless-cms/#.XsKX9BNKjVs

 

2. Cookies are usually the simplest way to store a session.  However, I didn't read up much on JWT.  I would suggest doing research on existing implementations of Sling+JWT.

 

Some sample code on working with JWT tokens here:

https://www.aemquickstart.in/2017/08/validate-jwt-token-and-secret-key.html