はじめに
先日、初めて業務でAWS AppSync(以下AppSync)とGraphQLを使いました。
サブスクリプションが使えたり、クライアント側からフィールド指定出来たりできるのが良い感じです。
あと、エンドポイントの管理がAPI Gatewayより楽ですね。(無論、デメリットもありますが)
ただAPI Gatewayもそうですが、アプリとして使う以上避けては通れないのが「認証」です。
今回は、そんなAppSyncの認証の中から「OIDC(OpenID Connect)認証」のやり方を説明したいと思います。
またOIDC認可サーバーには、Auth0を使いたいと思います。
TL;DR
- AppSyncでOpenID Connect(以下OIDC)認証を使う方法
- OIDC認証にはAuth0を使用
- AppSyncコンソール＆クライアント(今回はRest Client)からクエリを実行する方法
注意
(2021/8/27記載) とりあえず自分の備忘録的にまとめたので、本当にメモ書き程度になってます。。
時間があれば、もう少し丁寧な文章に直します。
※2021/9/11追記：直しました
参考blog
AWS AppSyncでAuth0を認証プロバイダーとしたOIDCを設定する | DevelopersIO
やること
- Auth0の設定
- AppSyncの設定
- クエリ実行
Auth0の設定
※Auth0のアカウントは持ってる前提で進めます。
※持っていない場合はあらかじめ取得しておいてください。
APIの新規作成
左ツリーから[Applications] - [APIs]を選択し、右に表示される[Create API]ボタンをクリックしてください。
すると「New API」画面が表示されるので、下記項目を入力して「Create」ボタンをクリックしてAPIを新規作成してください。(すべて必須項目)
| 項目 | 説明 |
|---|---|
| Name | APIの名前 |
| Identifier | APIの一意の識別子。APIエンドポイントURLが推奨。(違っててもいい) |
| Signing Algorithm | 署名アルゴリズム。必ず「RS256」を選択すること！(「HS256」はダメ) |
プロバイダードメインの確認(「AppSyncの設定」で必要)
左ツリーの[Applications] - [Application]を選択し、「APIの新規作成」の「Name」と同名のApplicationをクリックします。
するとアプリの情報が表示されますが、その「Settings」タブ内の「Domain」に記載のURLがプロバイダードメインになります。
アクセストークンの確認(「クエリ実行」で必要)
再度左ツリーから[Applications] - [APIs]を選択し、「APIの新規作成」で作成したAPIをクリックします。
APIの情報が表示されるので、「Test」タブをクリックし、その中の「response」項目に移動します。(プログラム言語のタブは何でもいい)
その中の「access_token」キーの値が、そのままアクセストークンの値になります。
てか、認証処理を実施せずともアクセストークンが確認できるのは、すごい便利だなと感じました。
AppSyncの設定
※AppSync APIは作成済の前提で進めます。
※作成していない場合はあらかじめ作成しておいてください。
作成したAppSync APIをクリックし、左ツリーの「設定」をクリックします。 すると設定画面が開くので、「デフォルトの認証モード」項目で、下記項目に下記の値を入力して「保存」をクリックします。
- 「APIレベル」：「OpenID Connect」
- 「OpenID Connect プロバイダードメイン (発行者 URL)」：「Auth0の設定」の「プロバイダードメインの確認」で確認したプロバイダードメイン名
- 「https://」始まりであることに注意してください。
クエリ実行
では、準備はできたので、実際にクエリを実行しましょう。
今回はAppSyncコンソール、およびクライアントPCから実行ます。
AppSyncコンソールから実行
- 作成したAppSync APIをクリックし、左ツリーの「クエリ」をクリックします。
- その後、「使用する認証モード」が「AppSyncのOIDC認証設定」の「プロバイダードメイン名」が選択されていることを確認します。
- これはデフォルトでなっているはずです。
- 何かしらクエリを記載し、右上の「Authorization Token」に「Auth0の設定」の「アクセストークンの確認」で確認したアクセストークンをコピペします。
- 「クエリ実行」ボタンをクリックし、クエリを実行します。
これでクエリが実行され、正しく実行結果が表示できるはずです。
また、アクセストークンが未設定or間違っているなら、結果が「Request failed with status code 401」となります。
クライアントから実行(今回はRest Client)
※今回はリクエストにVS Codeの定番拡張機能である「Rest Client」を使っていますが、リクエスト方法は何でもいいです。
下図のように、以下ヘッダを設定して、クエリをPOSTリクエストして実行します。
- Method：POST(GETではない)
- 「X-REQUEST-TYPE」：「GraphQL」固定
- 「Authorization」：「アクセストークン確認方法」に記載のaccess_token
- Bodyに実行するクエリ、および変数の値を設定する。
- URLは- AppSyncコンソールの「設定」内の「API Details」-「API URL」に記載されているURL
これもアクセストークンが正しいなら、正しくクエリ実行結果がレスポンスで返ってくるはずです。
またアクセストークンが未設定or間違っているなら、「UnauthorizedException」が返ってくるはずです。
まとめ
以上がAuth0 + OpenID Connect認証でGraphQLクエリを実行する方法でした。
OIDC認証と聞くと難しそうですが、Auth0を使うと驚くほど簡単に設定できてしまうので、自分でもびっくりしました。
てかAuth0、めちゃくちゃ便利ですね。マジで衝撃でした。
さて今後ですが、AppSync認証にはOIDC以外にも方法があるので、その中からLambda認証あたりをブログにしようかな？なんて考えてます。
それでは、今回はこの辺で。
参考：RestAPI(API Gateway)と比べたGraphQL API(AppSync)のメリット・デメリット
メリット
- Web API実行URLの管理が容易
- サブスクリプション機能で、変更を即座にクライアントに通知できる
- 必要なフィールドをクエリ発行側(≒クライアント)が指定できる
- 必要なフィールドをクエリ発行側が指定することができ、以下のメリットがあります。
- 必要最小限なフィールドを指定する事で、データ通信量の削減が可能
- (少ない通信量で)同一クエリの使いまわしが可能
- 必要なフィールドをクエリ発行側が指定することができ、以下のメリットがあります。
デメリット
