こんにちは。
アプリケーションサービス部の兼安です。
今日はローコードツールのRetoolのお話をさせてください。
本記事の対象者について
Retool は Web、 Mobile アプリケーションやワークフローを作成できるローコードプラットフォームです。
直感的な編集インターフェースや生成 AI による開発補助機能、JavaScript や Python といった利用ケースの多い技術スタックが提供されています。
AWS や Google Cloud、その他の 3rd パーティーのサービスとの連携がスムーズに行うこともできます。
本記事では、RetoolとAmazon API Gatewayで作成したHTTP APIの連携手順を説明します。
Retoolの基本的な操作や、Amazon API Gatewayなどの設定方法については、本記事では説明していませんので、それらの知識があることを前提としています。
構成図
本記事で説明する設定は、以下の構成図を想定しています。
AWS LambdaをAmazon API GatewayでHTTP API化します。
Amazon API GatewayによるHTTP APIは、Amazon Cognitoで認証を行います。
Cognitoは、ユーザープールを使用し、USER_PASSWORD_AUTHフローを使用します。
Retoolは、Cognitoで認証した上で、API Gatewayにリクエストを行うという構成です。
Amazon API GatewayによるHTTP APIで、Amazon Cognitoによる認証設定をしていると、
HTTP APIのリクエストには、認証済みを示すアクセストークンが含まれてないと、401 Unauthorizedのエラーが返されるようになります。
従って、Retool側の設定は、以下のようになります。
- リクエスト先にHTTP APIを指定したリソースを作成する
- リソースの設定で、リクエスト時に常にアクセストークンを渡すように設定する
- リソースの設定で、アクセストークンを定期的にリフレッシュするように設定する
アクセストークンは、一定期間で有効期限が切れるため、定期的にリフレッシュする必要があります。
Amazon API Gatewayで、クライアントIDとリフレッシュトークンを控える
RetoolでAmazon API Gatewayで作成したHTTP APIを操作するためには、API GatewayのURLと、クライアントIDとリフレッシュトークンが必要になります。
クライアントID
<クライアントID>は、ユーザープールの画面で確認できます。
ユーザープールの詳細画面で、アプリケーションの統合タブをクリック。
画面を下にスクロールし、クライアントのIDを確認します。
リフレッシュトークン
リフレッシュトークンを得るには、ユーザーの登録と、初回のアクセストークン取得の一連のプロセスを行う必要があります。
ユーザー登録
新しいユーザーをCognitoユーザープールに登録します。
Cognitoユーザープールのユーザー作成は、AWS CLIのsign-up コマンドで可能です。
aws cognito-idp sign-up \
--client-id <クライアントID> \
--username <ユーザー名> \
--password <パスワード> \
--user-attributes Name=email,Value=<メールアドレス>
aws cognito-idp sign-upコマンド実行後、以下のようなレスポンスが返ってきます。
{
"UserConfirmed": false,
"UserSub": "xxx-xxx-xxx-xxx-xxx"
}
これで、ユーザーの登録ができました。
しかし、UserConfirmedがfalseなので、まだ未確認状態なことがわかります。
この状態だと、トークンの取得はできません。
今回は、CLIで強制的に確認状態にします。
aws cognito-idp admin-confirm-sign-up \
--user-pool-id <ユーザープールID> \
--username <ユーザー名>
強制的に確認状態にするためのユーザープールIDは、ユーザープールの詳細画面で確認できます。
初回アクセスを行い、アクセストークンとリフレッシュトークンを取得する
ユーザー登録と確認の後、ユーザー名とパスワードを使用してトークンを取得します。
ユーザー登録と確認の後、ユーザー名とパスワードを使用してトークンを取得します。
aws cognito-idp initiate-auth \
--client-id <クライアントID> \
--auth-flow USER_PASSWORD_AUTH \
--auth-parameters USERNAME=<ユーザー名>,PASSWORD=<パスワード>
取得結果は以下のようになります。
{ "ChallengeParameters": {}, "AuthenticationResult": { "AccessToken": <アクセストークン>, "ExpiresIn": 3600, "TokenType": "Bearer", "RefreshToken": <リフレッシュトークン>, "IdToken": <IDトークン>, } }
取得結果の、AccessTokenとRefreshTokenを控えておきます。
Retoolでリソースの設定を行う
リソースの作成
メニューのResourcesをクリックします。
Create Newをクリックし、Resourceをクリックします。
REST APIをクリックします。
リソースの新規作成画面が表示されます。
以下の項目がポイントです。
| 項目名 | 説明 |
|---|---|
| Base URL | API GatewayのURLを設定します。 |
| Headers | 常にアクセストークンを渡すよう設定します。 |
| Authentication | Custom Authを選択し、リフレッシュトークンを利用したアクセストークンの取得を設定します。 |
Base URL
API Gatewayの画面からURLを控えて、Base URLに設定します。
Headers
以下のように設定します。
Bearer AUTHORIZATION_TOKEN
AUTHORIZATION_TOKENは、この後の手順で定義する変数で、リクエスト時にアクセストークンへ置換されます。
Authentication
Custom Auth - API Request
Custom Authを選択し、API Requestを選択して以下のように入力します。
| 項目名 | 設定値 |
|---|---|
| Action type | POST、https://cognito-idp.{リージョン}.amazonaws.com |
| Headers | Content-Typeで、application/x-amz-json-1.1 |
| Headers | X-Amz-Targetで、AWSCognitoIdentityProviderService.InitiateAuth |
| Body params | REFRESH_TOKENで、application/x-amz-json-1.1 |
| Body params | ClientIdで、{クライアントID} |
| Body params | AuthParametersで、{"REFRESH_TOKEN":"{リフレッシュトークン}"} |
この設定の参考情報はこちらです。
更新トークンを使用して、ユーザープール API で新しい ID トークンやアクセストークンを取得するには、AdminInitiateAuth または InitiateAuth API オペレーションを使用します。 AuthFlow パラメータの REFRESH_TOKEN_AUTH を渡します。
Custom Auth - Define a variable
上記API Requestで得られるレスポンスのAuthenticationResult.AccessTokenを、上述のヘッダで使えるように、変数化します。
Custom Auth - Auth trigger
トークンのリフレッシュを、タイマーベースで行うように設定します。
Time-based expirationを選択、Re-run・・・に時間間隔を設定します。
間隔は、アクセストークンの有効期限を考慮して設定します。
Check authentication・・・をクリックし、動作確認します。
Save changesをクリックし、保存して作業は終了です。
ここまでの設定が終わったら
この後は、Retoolのアプリ側でこのリソースに対してGET・POSTするクエリを作るだけになります。
各クエリで認証に関する設定を行う必要はありません。
最後に
弊社のアプリケーションサービス部では Retool の導入・活用支援がご提供可能です。
ご興味をお持ちの方がいらっしゃいましたら、お気軽にご相談ください。
兼安 聡(執筆記事の一覧)
アプリケーションサービス部 DS1課所属
AWS12冠。
広島在住です。
最近認定スクラムマスターになりました。今日も明日も修行中です。
