OAuth2による認証

LiferayのOAuth2ツールを使って、サードパーティのアプリケーションにデータへのアクセスを許可します。 例えば、クラリティ・ビジョン・ソリューションズのパートナーが、眼鏡製品を最新の価格で販売したいとします。 クラリティ・ビジョン・ソリューションズに価格リストAPIへのアクセスを要求します。 以下の手順で、実際に見てみよう。

OAuth2の設定

1. Global Menu () を開き、* Control Panel → Security → OAuth 2 Administration_に移動します。

2. Add() をクリックして、新しい OAuth2 アプリケーションを作成します。

3. アプリケーションに名前をつけます（例：foo）。 ウェブサイトのURLを http://localhost:3000 に、コールバックURIを http://localhost:3000/grant-type-authorization-codeに設定する。 ［Save］ をクリックします。

4. クライアントIDとクライアントシークレットをクリップボードにコピーします。 クライアント・シークレットを取得するには、 Edit をクリックします。 ポップアップウィンドウから値をコピーします。 これらの値は、サンプルのReactアプリで後ほど必要になります。

5. ページ上部の Scopes タブをクリックします。 下にスクロールし、 LIFERAY.HEADLESS.COMMERCE.ADMIN.PRICING をクリックし、 read data on your behalf にチェックを入れる。

   

   ［Save］ をクリックします。 これで、OAuth2 アプリケーションに commerce pricing API カテゴリの読み取り権限が付与されました。

6. 次に、 Global Menu() を開き、 Control Panel タブをクリックし、 System Settings → Security Tools に進みます。

7. ［Portal Cross-Origin Resource Sharing (CORS)］ タブで、 ［Default Portal CORS Configuration］ をクリックしてください。

8. /o/headless-commerce-admin-pricing/* の値で URL パターン を追加し、 保存 をクリックします。 これにより、 headless-commerce-admin-pricing カテゴリのAPIのCORSが有効になります。

サンプルReactアプリをデプロイする

1. 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. nodeとyarnがインストールされていることを確認します。 そうでない場合は、セットアップスクリプトを実行し、プロンプトに従います。

   ./setup_tutorial.sh
   

3. アプリのルート・ディレクトリに移動し、Reactサーバーを起動する。

   cd c2b6-custom-element
   

   yarn install && yarn start
   

4. http://localhost:3000で実行中のReactアプリを開く。 認証コードフロー をクリックする。

5. Liferay authorize URL には http://localhost:8080/o/oauth2/authorize と入力します。 クリップボードからクライアントIDを貼り付けます。 ［Authorize］ をクリックします。

6. まだログインしていない場合、認証ページに移動する前にLiferayのログインページにリダイレクトされます。 ユーザー名とパスワード（例： [e-mail]:learn）を入力し、 ［サインイン］ をクリックします。 認証ページで、 ［認証する］ をクリックします。 すでにログインしている場合は、認証ページに直接送られます。

7. Liferay トークンの URL には http://localhost:8080/o/oauth2/token と入力してください。 クライアントIDとクライアントシークレットをクリップボードから貼り付けます。 ［Get Token］ をクリックします。

8. リクエストURLには http://localhost:8080/o/headless-commerce-admin-pricing/v1.0/priceLists と入力する。 Get Data をクリックする。

   

次へ アンチサミーの管理

関連コンセプト

• OAuth 2.0を使用する
• OAuth2アプリケーションの作成