Authorizing with OAuth2

Use Liferay’s OAuth2 tools to authorize third-party applications to access data. For example, a Clarity Vision Solutions’ partner wants to sell the eyewear products with up-to-date pricing. They request Clarity Vision Solutions to provide access to the price list API. Follow the steps below to see this in action.

Setting Up OAuth2

1. Open the _Global Menu* () and navigate to Control Panel → Security → OAuth 2 Administration.

2. Click Add () to create a new OAuth2 application.

3. Give the application a name (e.g., foo). Set the Website URL as http://localhost:3000 and the Callback URI as http://localhost:3000/grant-type-authorization-code. Click Save.

4. Copy the Client ID and Client Secret to your clipboard. To get the Client Secret click Edit. Copy the value from the pop-up window. These values are needed later in the sample React app.

5. Click the Scopes tab at the top of the page. Scroll down, click LIFERAY.HEADLESS.COMMERCE.ADMIN.PRICING, then check the box for read data on your behalf.

   

   Click Save. Your OAuth2 Application now has read privileges for the commerce pricing API category.

6. Next, open the Global Menu (), click the Control Panel tab, and go to System Settings → Security Tools.

7. Go to the Portal Cross-Origin Resource Sharing (CORS) tab and click Default Portal CORS Configuration.

8. Add a URL Pattern with the value /o/headless-commerce-admin-pricing/* and click Save. This enables CORS for the headless-commerce-admin-pricing category of APIs.

Deploy the Sample React App

1. Download and unzip the OAuth2 React App.

   curl https://resources.learn.liferay.com/dxp/latest/en/headless-delivery/using-oauth2/liferay-c2b6.zip -O
   

   unzip liferay-c2b6.zip
   

   cd liferay-c2b6
   

2. Verify that node and yarn are installed. If not, run the setup script and follow the prompts:

   ./setup_tutorial.sh
   

3. Navigate into the app’s root directory and start the React server.

   cd c2b6-custom-element
   

   yarn install && yarn start
   

4. Open the React app running at http://localhost:3000. Click Authorization Code Flow.

5. Enter http://localhost:8080/o/oauth2/authorize for the Liferay authorize URL. Paste the client ID from your clipboard. Click Authorize.

6. If you’re not already logged in, you are redirected to the Liferay login page before being sent to the authorization page. Enter your username and password (e.g. [e-mail]:learn) and click Sign In. On the authorization page, click Authorize. If you are already logged in, you are sent directly to the authorization page.

7. Enter http://localhost:8080/o/oauth2/token for the Liferay token URL. Paste the client ID and client secret from your clipboard. Click Get Token.

8. Enter http://localhost:8080/o/headless-commerce-admin-pricing/v1.0/priceLists for the request URL. Click Get Data.

   

Next: Managing AntiSamy

Relevant Concepts

• Using OAuth2
• Creating an OAuth2 Application