青いやつの進捗日記。

メモとしてべんきょうのしんちょくをかいていきます。あとで自分が検索しやすいもん

Amplify & AppSync & Cognito な環境でRetoolと繋げる

dronz.medium.com

これを参考にすれば出来ます。

まずひとつ思ったのは上記Mediumの指示通りにやるには、慣れてないのであれば言語設定を https://ap-northeast-1.console.aws.amazon.com/settings/home?region=ap-northeast-1#/ とかから一時的に英語にして、

コンソールの見た目を古いバージョンに一時的に戻すと一番わかりやすい。
それに合わせた指示内容になっているので…(使い慣れている人なら自分でどれがどのボタンを指しているかわかると思うので気にしないで良さそう)

以後、上記Mediumの通りの順番にやっていく。


まずRetool用にCognitoでアプリケーションクライアントを新しく作る

今回使いたい環境のCognitoのユーザープールからアプリケーションクライアントを新規作成する。

アプリケーションの統合アプリケーションクライアントのリストの「アプリケーションクライアントを作成」からできるはず

docs.aws.amazon.com これが参考になる。コンソールのバージョンによるけどなにもしていなかったら新しいコンソールのはず。
上記記事の認証フローをALLOW_USER_PASSWORD_AUTHにする。新しいコンソールだとGenerate client secretを選ぶ箇所はないはず。

アプリケーションクライアントを作ったらそのアプリケーションクライアントの詳細にいく。アプリケーションの統合アプリケーションクライアントのリストにある。
詳細にある ホストされた UIの編集を押して、Meidumの通りに設定する。

最後にクライアント IDクライアントのシークレットをコピーしておく。

AppSyncの諸々必要なURLコピーする

AppSyncに遷移してAPI URLをコピー。
https://xxxxxxxx.appsync-api.us-east-1.amazonaws.com/graphql (ここでxxxxxxxxは一意のID)みたいになるはず。

Retool側でResourceを作る

Retool側でResourceを作る。基本Mediumの通りにやればOK。
Test OAuth integration with your own account押すと自分のCognitoにメールアドレスとパスワード認証走るはずで、それが通るとtokenの有効期限?のうちはAPIの値をとれるようになる。

Retool側でCognitoにログインする

あとはRetool側で色々やってResourceを上記で作ったものを参照してGraphQLで値とってくればOK。
なんだけど、自分がAdminでResourceも編集できる状態であればResourceのTest OAuth integration with your own accountで自分のCognitoアカウントの認証通せばAPIの値とってこれるのだけど、Retool使って他の人にも見せたいわけなので、それだと意味がない。

ここ、Mediumに書いてなくて詰まった。Resource繋げたはいいけどどこで認証すればええねんと。

gxpretool-docs.gxp.jp

これが参考になる。今回はログインボタンを置いた。

AuthLoginコンポーネントを置けば、そこ押すとAPIに認証が走るようになる。
編集権限ない人もログインボタン押して各自で認証通してもらえれば値がとれるようになる。

参考になるドキュメント

docs.retool.com

を日本語訳してくれてるやつ

gxpretool-docs.gxp.jp