Authorizing with OAuth2

Authorizing with OAuth2

Use Liferay’s OAuth2 tools to authorize third-party applications to access data. For example, a Delectable Bonsai partner wants to sell the maple syrup products with up-to-date pricing. They request Delectable Bonsai 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* (Global Menu) and navigate to Control PanelSecurityOAuth 2 Administration.

  2. Click Add (Add Icon) 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 (Global Menu), click the Control Panel tab, and go to System SettingsSecurity 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 -O
    cd liferay-c2b6
  2. Verify that node and yarn are installed. If not, run the setup script and follow the prompts:

  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. [email protected]: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.

    The price list is displayed in the React app.

Next: Managing AntiSamy

Relevant Concepts