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

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

Liferay 7.2¹ から GraphQLが公開された模様です。

• New GraphQL APIs in Liferay 7.2
• GraphQL APIs | Liferay Documents

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

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

"ポストマーン！！"

はいっ！

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

1. Liferay の設定

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

• OAuth 2.0 | Liferay Deployment

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

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

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

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

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

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

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

2. Postman でのトークン取得

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

• Authorizing Account Access with OAuth2

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

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に存在するユーザーでログインをお願いします。

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

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

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

3. GraphQL の問い合わせ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

どちらにしても 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" で加工ができますので、スクショ撮って切り抜いて、のような作業がとても楽ちんになりました。

---

1. モジュールやソースの入手は SourceForge の Liferay Portal もしくは Github の Liferay Portal が手っ取り早いです。 ↩