【2019年12月版】Liferay7.2のGraphQLにOAuth2トークン付きでアクセスしてみた結果

# Liferay 7.2 で GraphQL の API が公開されたので叩いてみる

[Liferay 7.2](https://www.liferay.com/)[^1] から GraphQLが公開された模様です。

- [New GraphQL APIs in Liferay 7.2](https://liferay.dev/blogs/-/blogs/new-graphql-apis-in-liferay-7-2)
- [GraphQL APIs | Liferay Documents](https://portal.liferay.dev/docs/7-2/frameworks/-/knowledge_base/f/graphql-apis)

[^1]: モジュールやソースの入手は [SourceForge の Liferay Portal](https://sourceforge.net/projects/lportal/) もしくは [Github の Liferay Portal](https://github.com/liferay/liferay-portal) が手っ取り早いです。

GraphQLのお手軽クライアントとしては Chrome プラグインの Altair が有名のようなのでこれを使ってAPI叩いてみました。

![Altair_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/91759c87-e253-8fb7-e03b-21aac669c06d.png)

このままでは Mutation系のAPIはもちろん、query系のAPIの一部も権限がないと怒られてしまいます。ログインしてない＝認可されてないので**当然です**！
そこでLiferayでのOAuthを使ってみたいのですが、Altair にはPostmanのように簡単にOAuth2.0トークンを取ってこれる機能がありません・・・ここは Postman を召喚いたします。

**"ポストマーン！！"**

はいっ！
![Postman 2019_12_18 12_58_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/9d47972c-9856-4510-aec5-72f9d2f0df53.png)

さて、ここから Postman での OAuth 2.0 トークンの取得方法をご紹介いたします。

## 1. Liferay の設定

まず、KeyCloakの場合と同様に、ポータル側に"クライアント"の登録をいたします。
以下のマニュアルを参考にしつつ Postman クライアントを登録してみましょう。

- [OAuth 2.0 | Liferay Deployment](https://portal.liferay.dev/docs/7-2/deploy/-/knowledge_base/d/oauth-2-0)

Liferayの管理者でログインした後、コンパネから"OAuth2 管理"ページを開きます。

![OAuth 2 管理 - コントロールパネル - Liferay.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/0dbde39b-cb98-71dd-d7d3-7720da43ca75.png)

"OAuth2 管理"ページ右上の"＋"ボタンをクリックしてクライアントを新規追加します。

![OAuth 2 アプリケーションを追加する - コントロールパネル - Liferay.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/047ba258-3b97-8c3f-09b5-ab91fa8a56ca.png)

アプリケーション名は適当でOKです。コールバックURIはとりあえずLiferayのトップページとしておきます。
"クライアントのプロフィール"は`Webアプリケーション`としてください。そのまま"保存"ボタンクリックでOKです。

![Postman Client - コントロールパネル - Liferay.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/d5f91413-e986-3d76-3af1-0f1385f3146b.png)

登録完了後のページから"クライアントID"をコピペしておきましょう。
同様に、クライアントシークレット欄の"編集"ボタンをクリックしてダイアログを表示し、クライアント・シークレットをコピペしておきましょう。"キャンセル"ボタンをクリックしてダイアログを閉じます。

続いて許可する権限の設定を行います。上部の"範囲"タブを開きます。

![Postman Client 範囲の設定 - コントロールパネル - Liferay (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/6f17c1f7-3fca-b735-21a2-27c0ed8a1f4c.png)

許可するパーミッションをそれぞれクリックして選択し、"保存"をクリックいたします。

ここで重要なのが、ここで設定したパーミッションの `Liferay.Headless.Admin.Workflow.everything` などのキーワードが後の Postman でトークンをリクエストする際の `scopes` に当たるという点と、ココで設定したものと**完全一致でないと怒られてしまう** という点です。
ここでチェックを付けたスコープのキーワードは逐一、メモっておきましょう。

## 2. Postman でのトークン取得

以下の Liferay のマニュアルを参考に、上記のクライアント設定とアクセスポイントを Postman に設定します。

- [Authorizing Account Access with OAuth2](https://portal.liferay.dev/docs/7-2/deploy/-/knowledge_base/d/authorizing-account-access-with-oauth2)

ちょっとわかりにくいですが、Postman での OAuthアクセストークン新規取得ダイアログのスクショです。

![Postman 2019_12_18 15_15_23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/cb8b7a77-e98a-b051-c880-c059afae3c3a.png)

1. Token Name → これは適当でOKです。
2. Grant Type → `Authoization Code` を選択
3. Callback URL → Liferayで入力した"Callback URI"のアドレスを入力
4. Auth URL → `http://<Liferayのホスト>/o/oauth2/authorize` のアドレスを入力
5. Access Token URL → `http://<Liferayのホスト>/o/oauth2/token` のアドレスを入力
6. Client ID → Liferay で登録した"クライアント ID" を入力
7. Client Secret → Liferay で登録した"クライアント・シークレット"を入力
8. Scope → Liferay の "範囲"タブで設定した`権限のキーワード`を**空白区切りですべて列挙**

以上で、"Request Token" をクリックしてください！

ログイン画面が表示されると思います。ここでLiferayに存在するユーザーでログインをお願いします。

![Home - Liferay 2019_12_18 15_22_53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/73ae44db-489c-f117-2303-3c6836e70357.png)

ログインが成功すると、Liferayでの権限確認の画面が表示されます。FacebookやTwitterのOAuthログインでも同様ですね。("ステージング機能"が有効になっているので余計な表示が出ていますが気にしないでください。。。)

![Home - Liferay 2019_12_18 15_25_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/55165d37-e353-d103-09ce-2354fe093c61.png)

ここで"許可する"をクリックすると・・・

![Postman 2019_12_18 15_27_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/d5f2acd9-21a2-0cfe-5f04-3ed3965a8f16.png)

はい、Postman のトークン管理ダイアログに追加されました！

## 3. GraphQL の問い合わせ

それでは早速、GraphQL の API にアクセスしてみましょう。GraphQL の入力は **Altairの方が楽ちん** なので、Altair の方でクエリを作成します。

![Altair - Google Chrome 2019_12_18 15_39_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/5ed09009-1f02-bb27-77af-0d2a26398f25.png)

ちょっと見にくいですがブログ記事を1件取得するQueryを書いてみました。Altairでアクセスすると`Access denied` となっています。HTTP ステータス `200` で`Access denied`の例外が発生しているのは気になるところですね。。。

さて、このクエリを Postman から実行してみます。

![Postman 2019_12_18 16_03_33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/f6b250df-6bc8-9eaa-03d8-60d88f4cbecc.png)

はい、バッチリ・・・あ、**ん～？！？**
Altairと同じで、**HTTP ステータス `200` で`Access denied`の例外が発生**してしまいました。
OAuthのトークンが効いてないのか・・・？

というか Altair でも HTTP 200 なのでログインなしでもこのAPIは呼べている、ということになりますね。。。
その後の処理にトークンで取得した権限が渡ってないような気がします。

というか・・・どういうこと？

**Liferay 7.2 での GraphQL API は奥が深い**、ということでした。。。~~(いや、ダメだろう。。。)~~

## 2019/12/19 追記:ちゃんと？できました。

Liferay の設定で "サービスアクセスポリシー" の設定を行うとGraphQLでのアクセスが出来ました。以下に手順を追記します。

コントロールパネルの"サービス・アクセス・ポリシー"を開きます。

![サービス・アクセス・ポリシー - コントロールパネル - Liferay.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/06f5b03e-6391-5214-14da-5baaefcafc00.png)

`代理ログイン`の行のメニューから"編集"を選択します。
"代理ログイン" の "デフォルト"を"いいえ"→"はい"に変更します。

![代理ログイン - コントロールパネル - Liferay.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/9968e385-1a4f-403c-cbb9-f395b04b782d.png)

"保存" をクリックし、再度、Postman からトークンを取得してGraphQLを投げてみます。

![Postman 2019_12_19 14_20_28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/8105d1cc-2114-943b-7180-59cfabdee9c3.png)

"テストです。"が列挙されたブログ記事が取得できました！

今回は"代理ログイン"という強力な権限を使ってますが本番サイトではどこまで権限つければよいのだろうか・・・？試してみたいと思います！ 

どちらにしても HTTP ステータス 200 はアカンやろ・・・

## 余談: Postman とか Altair のスクショについて。(Windows 10)

記事に載せているスクショは大抵、Webの画面なので Chrome のスクショプラグイン "Awesome Screenshot" だけでOKなのですが、Postman は単独のアプリ、Altair は Chrome のプラグイン、ということで、"Awesome Screenshot" じゃスクショ撮れないのです。

Windows アプリのスクショはこれまで `Alt + PrtScr` (ほぼ`Alt + Fn + PrtScr`の3つ)で最前面のアプリをスクショ撮ってペイントアプリなどに貼り付けて名前を付けてPNGで保存などしてましたが、これが*とんでもなくめんどくさい*ので一発でファイル保存までしてくれるショートカットキーを調べてみました。

デスクトップ全体のスクショは、

**`Windows + PrintScreen`(ほぼ`Win + Fn + PrtScr`)キー**

アクティブなアプリのスクショは、

**`Windows + Alt + PrintScreen`(ほぼ`Win + Alt + Fn + PrtScr`)キー**

で、`C:\Users\ユーザー名\Videos\Captures`、エクスプローラーでいうところの`ビデオ＞キャプチャ`フォルダに直接、スクショが PNG形式で保存されます！

で、PNG形式の画像であれば、"Awesome Screenshot" で加工ができますので、スクショ撮って切り抜いて、のような作業がとても楽ちんになりました。