トップ > Retool > ローコードツールのRetoolとAmazon API Gatewayで作成したHTTP APIの連携手順

ローコードツールのRetoolとAmazon API Gatewayで作成したHTTP APIの連携手順

Retool ローコード
記事タイトルとURLをコピーする

こんにちは。
アプリケーションサービス部の兼安です。
今日はローコードツールのRetoolのお話をさせてください。

本記事の対象者について

retool.com

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側の設定は、以下のようになります。

  1. リクエスト先にHTTP APIを指定したリソースを作成する
  2. リソースの設定で、リクエスト時に常にアクセストークンを渡すように設定する
  3. リソースの設定で、アクセストークンを定期的にリフレッシュするように設定する

アクセストークンは、一定期間で有効期限が切れるため、定期的にリフレッシュする必要があります。

Amazon API Gatewayで、クライアントIDとリフレッシュトークンを控える

RetoolでAmazon API Gatewayで作成したHTTP APIを操作するためには、API GatewayのURLと、クライアントIDとリフレッシュトークンが必要になります。

クライアント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 <ユーザー名>

docs.aws.amazon.com

強制的に確認状態にするためのユーザープールIDは、ユーザープールの詳細画面で確認できます。

ユーザープール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をクリックします。

RetoolのメニューでResourcesをクリック

Create Newをクリックし、Resourceをクリックします。

Create newをクリック

REST APIをクリックします。

REST APIをクリック

リソースの新規作成画面が表示されます。
以下の項目がポイントです。

項目名 説明
Base URL API GatewayのURLを設定します。
Headers 常にアクセストークンを渡すよう設定します。
Authentication Custom Authを選択し、リフレッシュトークンを利用したアクセストークンの取得を設定します。

Base URL

API Gatewayの画面からURLを控えて、Base URLに設定します。

Amazon API Gatewayの画面でURLを確認

控えたURLをRetoolのResourceのBase URLに貼り付ける

Headers

以下のように設定します。

Headersの設定

Bearer AUTHORIZATION_TOKEN

AUTHORIZATION_TOKENは、この後の手順で定義する変数で、リクエスト時にアクセストークンへ置換されます。

Authentication

Custom Auth - API Request

Custom Authを選択し、API Requestを選択して以下のように入力します。

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":"{リフレッシュトークン}"}

この設定の参考情報はこちらです。

docs.aws.amazon.com

更新トークンを使用して、ユーザープール API で新しい ID トークンやアクセストークンを取得するには、AdminInitiateAuth または InitiateAuth API オペレーションを使用します。 AuthFlow パラメータの REFRESH_TOKEN_AUTH を渡します。

docs.aws.amazon.com

Custom Auth - Define a variable

上記API Requestで得られるレスポンスのAuthenticationResult.AccessTokenを、上述のヘッダで使えるように、変数化します。

Define a variableの設定

Custom Auth - Auth trigger

トークンのリフレッシュを、タイマーベースで行うように設定します。
Time-based expirationを選択、Re-run・・・に時間間隔を設定します。
間隔は、アクセストークンの有効期限を考慮して設定します。

Auth triggerの設定

Check authentication・・・をクリックし、動作確認します。
Save changesをクリックし、保存して作業は終了です。

ここまでの設定が終わったら

この後は、Retoolのアプリ側でこのリソースに対してGET・POSTするクエリを作るだけになります。
各クエリで認証に関する設定を行う必要はありません。

最後に

弊社のアプリケーションサービス部では Retool の導入・活用支援がご提供可能です。
ご興味をお持ちの方がいらっしゃいましたら、お気軽にご相談ください。

www.serverworks.co.jp

兼安 聡(執筆記事の一覧)

アプリケーションサービス部 DS3課所属
2024 Japan AWS Top Engineers (Database)
2024 Japan AWS All Certifications Engineers
認定スクラムマスター
広島在住です。今日も明日も修行中です。