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/utils
config.js
ファイルを開き、Client ID と Client Secret の値を追加します。config.js
file ingrant-type-client-credentials
folder andgrant-type-password
folder にも同じことをします。アプリのルートディレクトリに戻り、Reactサーバーを起動します。
cd liferay-c2b6.zip/c2b6-remote-app
yarn 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 として渡されます。