Liferay Angular Portlet + Headless API

This project consists of a registration form developed with Angular ready to be deployed as a Liferay portlet. A Headless API has also been developed to serve as the backend of the application.

The Service Builder tool has been used to generate the necessary code (classes and interfaces) to provide a persistence layer to the API. In the feature/service-builder-tier branch, as an example, the code generated by the tool is included, since it has not yet been implemented.

Setup

This portlet has been developed using Liferay Portal CE 7.4 GA3. Specifically, the Tomcat Bundle has been used using the Hypersonic embedded database.

To adapt the Angular application, generator-liferay-js has been used.

Angular Portlet

Location: /register-form-liferay

Construction and deployment

1. Access the register-form-liferay directory.
2. Install the dependencies: npm install
3. Set the variable liferayDir (directory where Liferay is installed) to .npmbuildrc.
4. Access the register-form-liferay/src/environments directory and modify the environment.ts and environment.prod.ts files to set the following variables:
   • apiUrl: API URL.
   • storage: persistence type storage="local" if you want the form to store the data in the browser's Local Storage, storage="persistent" if you want the application to send the information to the API.
   • recaptchaSiteKey: key required for Google reCAPTCHA. A valid key is provided for development environments.
5. Run npm run deploy:liferay.

Adding the widget to a Liferay page

To add the widget to a Liferay page you should perform the following steps:

1. Access the desired page and log in with an account with the necessary permissions.
2. Click the edit button.
3. Go to the Widgets section in the right sidebar.
4. Go to the Tools category and drag the 'Registration Form' widget to the desired location.
5. Click on the publish button.

Headless API

Location: /register-headless

If you choose to use "persistent" storage, you need to deploy the API.

Construction and deployment

1. Access the register-headless directory.
2. Set the variable liferay.workspace.home.dir (directory where Liferay is installed) in the gradle.properties file.
3. Execute ./gradlew deploy in the root of the project.

Configuration

To allow requests to the API to be made from the portlet, a series of additional steps must be carried out.

Service Access Policies

1. Go to Control Panel > Security > Service Access Policies.

2. Click on the add button.

3. Fill in the following fields:

   • Name: headless-register-api

   • Enabled: True

   • Default: True

   • Title: Headless Register API

   • Allowed Service Signatures:

     • Service Class: com.darroyo.headless.register.internal.resource.v1_0.FormUserResourceImpl

     • Method Name: getRegisterFormPage

     • Service Class: com.darroyo.headless.register.internal.resource.v1_0.FormUserResourceImpl

     • Method Name: postRegisterForm

4. Click on save.

Web Contexts Cross-Origin Resource Sharing (CORS)

You also need to configure CORS to allow the Angular portlet to be able to communicate with the API.

1. Access the Control Panel > System Settings > Security > Security Tools.
2. Access Web Contexts Cross-Origin Resource Sharing (CORS).
3. Click Add.
4. Check that all the fields are set to default values.
5. Click on save.