Documentation

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_に変更します。

  1. グローバルメニュー (グローバルメニュー)を開き、[コントロールパネル][セキュリティ] → *[OAuth 2 管理]*に移動します。

  2. 追加 (アイコンの追加)をクリックして、新規のOAuth2アプリケーションを作成します。

  3. アプリケーションに名前をつけます(例:foo)。 WebサイトのURLをhttp://localhost:3000に、コールバックURIをhttp://localhost:3000/grant-type-authorization-codeに設定します。 [保存]をクリックします。

    OAuth2アプリケーションの新規作成フォームに必要事項を入力します。

  4. クライアントIDとクライアントシークレットをクリップボードにコピーします。 クライアントシークレットを取得するには、*[編集]*をクリックします。 ポップアップウィンドウから値をコピーします。

    これらの値は、サンプルのReactアプリで後ほど必要になります。

  5. ページの上部にある[Scopes]タブをクリックします。 下にスクロールして、_LIFERAY.HEADLESS.ADMIN.USER_をクリックし、[read data on your behalf]のチェックボックスをオンにします。

    LIFERAY.HEADLESS.ADMIN.USERの読み取り権限を有効にします。

    [Save] をクリックします。 OAuth2アプリケーションに、管理者ユーザーAPIカテゴリの読み取り権限が付与されました。

  6. 次に、グローバルメニュー (グローバルメニュー)を開き、[コントロールパネル]タブをクリックして、[システム設定] → *[セキュリティツール]*に移動します。

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

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

サンプルReactアプリのデプロイ

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

    ./setup_tutorial.sh
    
  3. アプリの設定ファイルに、Liferay OAuth Client IDとClient Secretを追加します。 grant-type-authorization-codeutils フォルダに移動する。

    cd liferay-c2b6.zip/c2b6-remote-app/src/grant-type-authorization-code/utils
    

    config.js ファイルを開き、Client ID と Client Secret の値を追加します。 config.js file in grant-type-client-credentials folder and grant-type-password folder にも同じことをします。

  4. アプリのルートディレクトリに戻り、Reactサーバーを起動します。

    cd liferay-c2b6.zip/c2b6-remote-app
    
    yarn start
    

認証コードのフロー

認可コードフローでは、アプリに許可を与える前に、ユーザーが認証情報でログインし、認可を承認する必要があります。 他のフローでは、この追加ステップを回避することができます。

  1. http://localhost:3000で動作しているReactアプリを開き、ページ上部の Authorization Code Flow をクリックします。 Authorizeをクリックします。

    認証コードフローで、[認証]ボタンをクリックします。

  2. まだログインしていない場合、認証ページに飛ぶ前にLiferayのログインページにリダイレクトされます。 ユーザー名とパスワード(例: test@liferay.com:learn)を入力し、 サインインをクリックします。 認証ページで、 認証するをクリックします。 すでにログインしている場合は、直接認証ページに移動します。

  3. Reactアプリにリダイレクトされます。 Get Authorization Codeをクリックし、 Get Tokenをクリックします。 アプリケーションは Liferay にアクセストークンを要求します。

  4. Get Usersをクリックします。 React アプリは、トークン・ベースの認証を使用して Liferay に REST API 呼び出しを行い、Liferay ユーザーのリストを返します。

クライアント認証フロー

クライアント認証フローは、通常、サーバー間のやり取りに使用され、ユーザーは関与しない。

  1. http://localhost:3000で実行中のReactアプリを開き、ページ上部の Client Credentials Flow をクリックします。

  2. Get Tokenをクリックします。 アプリケーションは Liferay にアクセストークンを要求します。

  3. Get Usersをクリックします。 React アプリは、トークン・ベースの認証を使用して Liferay に REST API 呼び出しを行い、Liferay ユーザーのリストを返します。

パスワードの流れ

パスワードフローの認証では、Reactアプリはユーザー名とパスワードをリクエストで直接渡します。

警告

パスワードフローでは、ユーザー名とパスワードはアプリケーションに直接公開されます。 そのため、ユーザーはアプリケーションを信頼する必要があります。 APIリクエストでユーザー名とパスワードを渡すこともリスクを伴います。 パスワードフローを使用することは推奨されません。

  1. http://localhost:3000で動作しているReactアプリを開き、ページ上部の パスワードフロー をクリックします。

  2. Get Tokenをクリックします。 アプリケーションは Liferay にアクセストークンを要求します。

  3. Get Usersをクリックします。 React アプリは、トークン・ベースの認証を使用して Liferay に REST API 呼び出しを行い、Liferay ユーザーのリストを返します。

コードを調べる

Reactアプリには3つのルートがあり、それぞれ異なる認証フローにつながります。 各経路/フローの設定ファイルは、別々のフォルダーにあります。 各ルートの components フォルダには、ボタンをクリックしたときに発生するイベントを処理するための UI 要素が定義されています。 例えば、 Authorize.js ファイルは認証ページにリダイレクトし、 Token.js はアクセストークンを取得し、 Users.js はユーザーのリストを取得します。 各ルートの utils フォルダには、 config.jsrequests.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 ボタンをクリックすると、認証要求が行われます。

標準の clientIdclientSecretに加えて、 redirectUriconfig.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 として渡されます。

追加情報