Integrate Liferay Microservice Client Extension Using Spring Boot for Enhanced Development

During a recent implementation, we needed to enhance a Liferay development project by adding a custom reporting feature for a client. To achieve this, we implemented a Liferay Microservice Client Extension using Spring Boot. This approach enabled us to introduce microservices in Liferay without disrupting the core system.

This strategy allowed us to:

• Maintain Stability: The new feature operated independently from Liferay’s core, ensuring the platform remained stable during updates.
• Boost Agility: We quickly adapted to the client’s evolving requirements without affecting other functionalities. Ensure Security: By utilizing OAuth 2.0 for authentication, we protected sensitive data while integrating seamlessly with Liferay's APIs through Liferay Client Extensions. As a result, our client benefited from a tailored solution that improved their reporting capabilities, leading to higher satisfaction and engagement.
• Ensure Security: By utilizing OAuth 2.0 for authentication, we protected sensitive data while integrating seamlessly with Liferay's APIs through Liferay Client Extensions.

As a result, our client benefited from a tailored solution that improved their reporting capabilities, leading to higher satisfaction and engagement.

What are the prerequisites?

• Liferay DXP/Portal 7.4
• Basic knowledge of Liferay
• Liferay Developer Studio or Blade CLI
• Understanding of Liferay workspaces
• Experience with creating and deploying Liferay modules and client extensions

How to Integrate Microservice Client Extension with Liferay?

Microservice Client Extensions operate externally to Liferay but are triggered by specific cues from the platform. To effectively manage requests and communicate securely with Liferay APIs, these extensions require predefined authentication profiles. You can bundle these profiles with the client extensions in the same project for seamless integration.

Hosting Options:

• Liferay Cloud: Once deployed, Microservice Client Extensions are automatically hosted, ensuring quick and easy access.
• Self-Hosted Liferay: For self-hosted setups, microservices linked to these extensions must be hosted independently, offering flexibility in deployment.

By the end of this blog, you will have a solid understanding of how to create microservice client extensions, build and deploy them using Gradle.

Step 1: Create a spring boot project and place it in the Client Extensions folder in Liferay workspace.

Step 2: Create a client-extension.yaml file

assemble:
    - fromTask: bootJar
liferay-spring-boot-oauth-application-user-agent:
    .serviceAddress: localhost:8085
    .serviceScheme: http
    name: Liferay Spring Boot OAuth Application User Agent
    scopes:
        - Liferay.Headless.Admin.Workflow.everything
    type: oAuthApplicationUserAgent
  

Put together the task:

• The project's assembly is predicated on the bootJar task, which is frequently utilized by Spring Boot to package the program as an executable JAR file (fromTask: bootJar).
• liferay-spring-boot-oauth-application-user-agent: The OAuth 2.0 client application goes by this name. It will be used to perform authenticated requests to Liferay's APIs.
• .serviceAddress: localhost:8085:This is the service's address that the OAuth 2.0 client will use to connect. It is being hosted locally on port 58081 in this instance.
• .serviceScheme: http: Indicates that the http protocol will be used for communication. It would be a secure connection if it started with https.
• name: Liferay Spring Boot OAuth Application User Agent: This is the friendly name of the OAuth 2.0 client, used for identification purposes.
• scopes: Liferay.Headless.Admin.Workflow.everything: This is the scope or permission that the OAuth 2.0 client is granted. In this case, it has full access to the Headless Admin Workflow APIs. Scopes define the level of access or permissions the client has over Liferay resources.
• type: oAuthApplicationUserAgent: This specifies that the client is an OAuth 2.0 Application User Agent. It allows the application to authenticate and interact with protected Liferay APIs as a user agent (typically making requests on behalf of user).

Step 3: Create CustomMessageRestController.java class, which extends BaseRestController.

• This class will pass a string message as response to your custom application.
• This class will utilize OAuth 2.0 authentication and process workflow operations, ensuring that only authorized users or applications can perform specific actions.

    @RequestMapping("/custom/microservice/message")
    @RestController
    public class CustomMessageRestController extends BaseRestController {

        @GetMapping
        public ResponseEntity get(@AuthenticationPrincipal Jwt jwt) {
            log(jwt, _log);

            String customMessage = "This message is fetched from Microservice Client Extension";
            return new ResponseEntity<>(customMessage, HttpStatus.OK);
        }

        private static final Log _log = LogFactory.getLog(
                CustomMessageRestController.class);

    }
  

Step 4: Create a react client extension which uses the previously created client extension as backend.

assemble:
    - from: build/static
      into: static
liferay-microservice-custom-message:
    cssURLs:
        - css/main.*.css
    friendlyURLMapping: liferay-microservice-custom-message
    htmlElementName: liferay-microservice-custom-message
    instanceable: false
    name: Liferay Microservice Custom Message
    portletCategoryName: category.client-extensions
    type: customElement
    urls:
        - js/main.*.js
    useESM: true

• assemble: This section defines how to assemble the build outputs of the project. The directive specifies that files from the build/static directory should be placed into the static directory. This means that after the build process, all static resources (like CSS and JavaScript) will be accessible from the static folder of the deployed application.
• liferay-microservice-custom-message: This is the unique identifier for the custom element in Liferay. It serves as a key to define this component within the system, specifically representing a custom message feature for a microservice.
• cssURLs: This property specifies the URLs of the CSS files that should be included with the custom message element. In this case, it uses a pattern css/main.*.css to include any CSS files that match this pattern, allowing for flexibility in file naming.
• htmlElementName: This defines the name of the HTML element that will be created for this custom message component. The value liferay-microservice-custom-message indicates that the component can be used as an HTML element with this name in web pages, making it easily identifiable and usable in HTML markup.

Step 5: Create MicroserviceMessage.js file which utilizes the spring boot api to display the message.

    <div style="margin-bottom:15px; background: #F4F4F6;">
        <pre>
            import React from 'react';
            
            import {Liferay} from '../services/liferay/liferay.js';

            let oAuth2Client;

            try {
                oAuth2Client = Liferay.OAuth2Client.FromUserAgentApplication(
                    'liferay-spring-boot-oauth-application-user-agent'
                );
            }
            catch (error) {
                console.error(error);
            }

            function MicroserviceMessage() {
                const [message, setMessage] = React.useState(null);

                React.useEffect(() => {
                    oAuth2Client
                        ?.fetch('/custom/microservice/message')
                        .then((response) => response.text())
                        .then((message) => {
                            setMessage(message);
                        })
                        .catch((error) => console.log(error));
                }, []);

                if (!message) {
                    return <div>Loading...</div>;
                }

                return <div>{message}</div>;
            }

            export default MicroserviceMessage;
        </pre>
    </div>
    

• Here the oAuth2Client is used to obtain a Bearer token which is then used to call the api.

Step 6: Deploy all the client extensions and start the spring boot server with gradlew bootRun command.

Step 7: Deploy the react client extension on a page in liferay, we can now see the message being displayed from the spring boot microservice.

Conclusion

Integrating microservices with Liferay using Microservice Client Extensions provides a scalable solution for extending your platform. This modular approach, supported by technologies like Spring Boot and OAuth 2.0, allows developers to build secure, independent components that interact with Liferay’s API without disrupting the core system.

By leveraging Liferay Microservice Client Extensions within Liferay development, you can expand Liferay's capabilities while ensuring flexibility and security. For further guidance on developing client extensions, check out this resource: Mastering Liferay Client Extension Development.

Ready to enhance your content management experience with Liferay? Get in Touch with Us Today!