OAuth2によるユーザーの認証¶
OAuth 2.0の認証プロトコルを使用してLiferayのヘッドレスREST APIにアクセスするアプリケーションを作成することができます。 提供されているサンプルReactアプリは、OAuth2トークンベースの3種類の認証フロー（認証コードフロー、クライアント認証フロー、パスワードフロー）をデモしています。 OAuth2 管理パネルの詳細については、 OAuth2 アプリケーションの作成を参照してください。
Liferay DXPのセットアップ¶
新しいLiferay DXPインスタンスを起動し、以下を実行します。
docker run -it -m 8g -p 8080:8080 liferay/dxp:7.4.13-u55。
メールアドレス_test@liferay.com_とパスワード_test_を使用して、http://localhost:8080でLiferayにサインインしてください。 プロンプトが表示されたら、パスワードを _learn_に変更します。
グローバルメニュー (
)を開き、［コントロールパネル］ → ［セキュリティ］ → *［OAuth 2 管理］*に移動します。追加 (
)をクリックして、新規のOAuth2アプリケーションを作成します。アプリケーションに名前をつけます（例：foo）。 WebサイトのURLを
http://localhost:3000に、コールバックURIをhttp://localhost:3000/grant-type-authorization-codeに設定します。 ［保存］をクリックします。
クライアントIDとクライアントシークレットをクリップボードにコピーします。 クライアントシークレットを取得するには、*［編集］*をクリックします。 ポップアップウィンドウから値をコピーします。
これらの値は、サンプルのReactアプリで後ほど必要になります。
ページの上部にある［Scopes］タブをクリックします。 下にスクロールして、_LIFERAY.HEADLESS.ADMIN.USER_をクリックし、［read data on your behalf］のチェックボックスをオンにします。
［Save］ をクリックします。 OAuth2アプリケーションに、管理者ユーザーAPIカテゴリの読み取り権限が付与されました。
次に、グローバルメニュー (
)を開き、［コントロールパネル］タブをクリックして、［システム設定］ → *［セキュリティツール］*に移動します。*［Portal Cross-Origin Resource Sharing (CORS)］*タブで、 *［Default Portal CORS Configuration］*をクリックしてください。
*［URLパターン］に
/o/headless-admin-user/*という値を追加し、［保存］*をクリックします。 これにより、APIのheadless-admin-userカテゴリーのCORSが有効になります。
サンプルReactアプリのデプロイ¶
OAuth2 React Appをダウンロードし、解凍してください。
curl https://learn.liferay.com/dxp/latest/en/headless-delivery/using-oauth2/liferay-c2b6.zip -O
unzip liferay-c2b6.zip
cd liferay-c2b6.zipノードとヤーンがインストールされていることを確認します。 そうでない場合は、セットアップスクリプトを実行し、プロンプトに従います。./setup_tutorial.sh
アプリの設定ファイルに、Liferay OAuth Client IDとClient Secretを追加します。
grant-type-authorization-codeのutilsフォルダに移動する。cd liferay-c2b6.zip/c2b6-remote-app/src/grant-type-authorization-code/utilsconfig.jsファイルを開き、Client ID と Client Secret の値を追加します。config.jsfile ingrant-type-client-credentialsfolder andgrant-type-passwordfolder にも同じことをします。アプリのルートディレクトリに戻り、Reactサーバーを起動します。
cd liferay-c2b6.zip/c2b6-remote-appyarn start
認証コードのフロー¶
認可コードフローでは、アプリに許可を与える前に、ユーザーが認証情報でログインし、認可を承認する必要があります。 他のフローでは、この追加ステップを回避することができます。
http://localhost:3000で動作しているReactアプリを開き、ページ上部の Authorization Code Flow をクリックします。 Authorizeをクリックします。
まだログインしていない場合、認証ページに飛ぶ前にLiferayのログインページにリダイレクトされます。 ユーザー名とパスワード（例： test@liferay.com:learn）を入力し、 サインインをクリックします。 認証ページで、 認証するをクリックします。 すでにログインしている場合は、直接認証ページに移動します。
Reactアプリにリダイレクトされます。 Get Authorization Codeをクリックし、 Get Tokenをクリックします。 アプリケーションは Liferay にアクセストークンを要求します。
Get Usersをクリックします。 React アプリは、トークン・ベースの認証を使用して Liferay に REST API 呼び出しを行い、Liferay ユーザーのリストを返します。
クライアント認証フロー¶
クライアント認証フローは、通常、サーバー間のやり取りに使用され、ユーザーは関与しない。
http://localhost:3000で実行中のReactアプリを開き、ページ上部の Client Credentials Flow をクリックします。
Get Tokenをクリックします。 アプリケーションは Liferay にアクセストークンを要求します。
Get Usersをクリックします。 React アプリは、トークン・ベースの認証を使用して Liferay に REST API 呼び出しを行い、Liferay ユーザーのリストを返します。
パスワードの流れ¶
パスワードフローの認証では、Reactアプリはユーザー名とパスワードをリクエストで直接渡します。
警告
パスワードフローでは、ユーザー名とパスワードはアプリケーションに直接公開されます。 そのため、ユーザーはアプリケーションを信頼する必要があります。 APIリクエストでユーザー名とパスワードを渡すこともリスクを伴います。 パスワードフローを使用することは推奨されません。
http://localhost:3000で動作しているReactアプリを開き、ページ上部の パスワードフロー をクリックします。
Get Tokenをクリックします。 アプリケーションは Liferay にアクセストークンを要求します。
Get Usersをクリックします。 React アプリは、トークン・ベースの認証を使用して Liferay に REST API 呼び出しを行い、Liferay ユーザーのリストを返します。
コードを調べる¶
Reactアプリには3つのルートがあり、それぞれ異なる認証フローにつながります。 各経路/フローの設定ファイルは、別々のフォルダーにあります。 各ルートの components フォルダには、ボタンをクリックしたときに発生するイベントを処理するための UI 要素が定義されています。 例えば、 Authorize.js ファイルは認証ページにリダイレクトし、 Token.js はアクセストークンを取得し、 Users.js はユーザーのリストを取得します。 各ルートの utils フォルダには、 config.js と requests.js ファイルが格納されています。
src
├── grant-type-authorization-code
│ ├── components
│ | ├── Authorize.js
│ | ├── Token.js
│ | └── Users.js
│ ├── utils
│ | ├── config.js
│ | └── Requests.js
│ └── AuthorizationCode.js
├── grant-type-client-credentials
│ ├── components
│ | ├── Token.js
│ | └── Users.js
│ ├── utils
│ | ├── config.js
│ | └── Requests.js
│ └── ClientCredentials.js
├── grant-type-password
│ ├── components
│ | ├── Token.js
│ | └── Users.js
│ ├── utils
│ | ├── config.js
│ | └── Requests.js
│ └── Password.js
├── App.js
└── index.js
承認 補助金の種類¶
grant-type-authorization-codeでは、最初のステップは Authorize.js ファイルによって処理される。 Authorize ボタンをクリックすると、認証要求が行われます。
標準の clientId と clientSecretに加えて、 redirectUri も config.js ファイルに必要です。 アプリケーションを認証した後、Liferayサーバーはユーザーをアプリの認証コードフローページにリダイレクトさせます。 リダイレクトと同時に、ワンタイム認証コードがURL内でアプリに引き渡されます（例： http://localhost:3000/grant-type-authorization-code?code={code}）。
Get Authorization Code をクリックすると、 getCode 関数が呼び出され、認証コードが解析されます。 そして、アクセストークンのリクエストで渡すことができる。
Get Token をクリックすると、 Requests.js ファイル内の getAuthToken 関数が呼び出されます。
このAPIリクエストでは、パラメータ client_id, client_secret, code, grant_type, and redirect_uri が送信されます。 パラメータが有効な場合、Liferay はアクセストークンを含む JSON 応答を返します。
回答例
{
"access_token": "2fda85abec524112dae612d35e9f9abd71650d364dee47c645b7574c6bffe91",
"token_type": "Bearer",
"expires_in": 600,
"scope": "Liferay.Headless.Admin.User.everything.read"
}
Users.js ファイルは、 access_tokenのレスポンスを解析しています。
最後に、 Get Users をクリックすると、 Requests.js ファイル内の getUsers 関数が呼び出されます。
アクセストークンは、APIリクエストのヘッダーに 'Authorization': 'Bearer' type authorizationとして渡されます。
クライアント認証情報 グラントタイプ¶
grant-type-client-credentialsにおいて、 Request.js ファイルの getAuthToken 関数は、 Get Token ボタンがクリックされたときに呼び出されます。
このAPIリクエストでは、パラメータ client_id, client_secret, grant_type が送信されます。 パラメータが有効な場合、Liferay はアクセストークンを含む JSON 応答を返します。
Users.js ファイルは、 access_tokenのレスポンスを解析しています。
最後に、 Get Users をクリックすると、 Requests.js ファイル内の getUsers 関数が呼び出されます。
アクセストークンは、APIリクエストのヘッダーに 'Authorization': 'Bearer' type authorization として渡されます。
パスワード付与の種類¶
grant-type-passwordにおいて、 Request.js ファイルの getAuthToken 関数は、 Get Token ボタンがクリックされたときに呼び出されます。
client_id, client_secret, grant_type, password, username が、この API リクエストのパラメーターとして送信されます。 パラメータが有効であれば、Liferayサーバーはアクセストークンを含むJSONレスポンスを返します。
Users.js ファイルは、 access_tokenのレスポンスを解析しています。
最後に、 Get Users をクリックすると、 Requests.js ファイル内の getUsers 関数が呼び出されます。
アクセストークンは、APIリクエストのヘッダーに 'Authorization': 'Bearer' type authorization として渡されます。