使用Appsmith和APISIX构建自定义认证系统

認証フローは、Webアプリケーションの基本的な部分です。ユーザーがアプリを使用している間、ユーザーデータのセキュリティとプライバシーを確保します。多くの既製の認証ソリューションが利用可能ですが、ローコードUI開発プラットフォームとAPI管理ソリューションを使用して認証システムを構築することで、安全なWebアプリケーションを簡単に作成できます。フロントエンドとバックエンドの技術やツールの知識がなくてもアプリケーションを作成できます。Python、Java、HTML、CSS、またはその他のJavaScriptフレームワークを知る必要はありません。この記事では、Appsmith、Apache APISIX、JWTを使用して、アプリケーションを保護するためのカスタムのシンプルなログインフローとページをUI上に構築する方法を学びます。

Appsmithは、強力なローコード開発プラットフォームで、ユーザーが簡単にWebアプリケーションやダッシュボードを作成できるようにします。ビジュアルインターフェースと包括的なプリビルドコンポーネントを提供し、開発者と非開発者の両方にアクセスしやすくしています。

学習目標

この記事を通じて、以下のことを学びます：

• ローコード環境での認証プロセスの設計。
• APISIXを使用したバックエンド認証APIの設定。
• Appsmithのウィジェットを使用してUIページを作成。
• トークンベースの認証を有効化。

認証アーキテクチャの設計

実装に取り掛かる前に、まずアプリケーションの認証システムのアーキテクチャを設計することが重要です。ユーザー登録、ログイン、パスワード、セッション管理、JWTトークンベースの認証などの主要なコンポーネントを考慮します。AppsmithとAPISIX間の情報の流れを定義し、明確で効率的な認証ワークフローを確保します。

私たちは、シンプルなモバイルアプリを構築します。このアプリには、登録、ログイン、メインの3つのページがあります。タスクは2つの部分に分かれます。最初の部分では、Apache APISIX APIゲートウェイを使用して認証リクエストを処理するバックエンドAPIを設定します。既存のAPIゲートウェイエンドポイントを使用して、ユーザー登録、ログイン、トークン生成のフローを実現します。2番目の部分では、Appsmithのドラッグアンドドロップインターフェースと既製のUIコンポーネントを使用して、登録、ログイン、メインページを構築し、最後にそれらをAPIに接続してフォーム送信を処理します。次のセクションでこれらのコンポーネントを構築していきましょう。

パート1: バックエンド認証APIの設定

モバイルアプリからの認証リクエストを処理するバックエンドAPIの設定から始めます。APISIXを使用して、APIエンドポイントを保護するための認証を実施できます。APISIXは、ユーザーの資格情報を検証し、認証トークンを発行し、APIへのアクセスを制御することができます。APISIXをモバイル認証システムに統合することで、追加のセキュリティ層を追加し、認証されたユーザーのみが保護されたリソースにアクセスできるようにします。

前提条件

• Docker は、コンテナ化されたetcdとAPISIXをインストールするために使用されます。
• curl は、APISIX Admin APIにリクエストを送信するために使用されます。Postmanなどのツールを使用してAPIとやり取りすることもできます。

ステップ1: Apache APISIXのインストール

APISIXは、以下のクイックスタートスクリプトを使用して簡単にインストールおよび起動できます：

curl -sL https://run.api7.ai/apisix/quickstart | sh

ステップ2: バックエンドサービス（アップストリーム）の設定

次に、バックエンドサービスを設定します。デモの目的で、バックエンドロジックを提供する任意のAPIサービスを使用できます。あなたのサービスに置き換えることもできます。私は、ランダムなレスポンスを生成するモックパブリックサーバーhttp://httpbin.org/を使用します。シンプルにするために、このエンドポイントhttp://httpbin.org/ipでマシンのパブリックIPアドレスを返す単一のエンドポイントを使用します。

モックAPIのバックエンドサービスにリクエストをルーティングするために、Admin APIを使用してApache APISIXにアップストリームサーバーを追加する必要があります。

curl http://127.0.0.1:9180/apisix/admin/upstreams/1 -X PUT -d '
{
   "name":"Mock API upstream",
   "desc":"Register Mock API as the upstream",
   "nodes":{
      "httpbin.org:80":1
   }
}'

ステップ3: 新しいプラグイン設定の作成

このステップでは、次のステップで作成するルートのプラグイン（Plugin Configオブジェクトを使用）を設定します。APISIXは、エンドポイントを保護するためにJWTプラグインを有効にします。エンドポイントにリクエストするたびに、リクエストヘッダーのJWT資格情報をチェックします。

curl http://127.0.0.1:9180/apisix/admin/plugin_configs/1 -X PUT -d '
{
   "plugins":{
      "jwt-auth": {}
   }
}'

ステップ4: バックエンドAPIのルート作成

APISIXに新しいRouteオブジェクトを作成します。このルートは、/ip URIへのすべてのGETリクエストをインターセプトし、既存のアップストリームとプラグイン設定を使用してルーティングメカニズムと認証ポリシーを有効にします。ヘッダーにJWTプラグインが存在し、有効であれば、リクエストをモックサーバーに転送します。それ以外の場合は、すぐに未承認エラーを返し、リクエストは実際のサービスに到達しません。

curl -i http://127.0.0.1:9180/apisix/admin/routes/1 -X PUT -d '
{
   "name":"Mock API server route",
   "desc":"Create a new route in APISIX for the mock server endpoint",
   "methods":[
      "GET"
   ],
   "uri":"/ip",
   "upstream_id":"1",
   "plugin_config_id":1
}'

ステップ5: JWTトークンの署名用ルートの作成

APIにトークンベースの認証を実装しました。APISIXは、トークンを生成および検証するためのIDプロバイダーとしても機能します。これを行うには、public-apiプラグインを使用してトークンに署名する新しいAPIエンドポイントのルートを設定する必要があります：

curl http://127.0.0.1:9180/apisix/admin/routes/login -X PUT -d '
{
    "uri": "/login",
    "plugins": {
        "public-api": {
            "uri": "/apisix/plugin/jwt/sign"
        }
    }
}'

上記のcurlコマンドを実行することで、loginという新しいルートを登録しました。このルートは、URIパス/loginを持ち、モバイルアプリのログインページから既存のユーザーがメールアドレスを使用してログインしようとするたびに新しいトークンに署名します。

パート2: Appsmithでユーザー登録とログインフォームを作成

Appsmithのローコードインターフェースを使用して、ユーザー登録とログインフォームを作成できます。Appsmithは、簡単にカスタマイズできる幅広いプリビルドウィジェットを提供します。ダッシュボードで必要なユーザー名、パスワード、およびその他の情報の入力フィールドを持つフォームを設計します。

始める前に

Appsmithのインストール部分は省略します。AppsmithのウェブサイトでDockerを使用してAppsmithをインストールする方法を学ぶことができます。Appsmithがインストールされ、http://localhostでアクセスできることを確認してください。Appsmithをデプロイして実行すると、デフォルトでMy first applicationというアプリケーションが追加されます。このアプリケーションを使用して、最初のアプリを構築できます。

ステップ1: 登録ページの作成

私たちの場合、新しいユーザーは最初に登録ページからモバイルアプリに登録します。アプリケーションにRegistrationPageという新しいページを作成することから始めます。メール（EmailInputという名前）、ユーザー名（UsernameInputという名前）、パスワード（PasswordInputという名前）のInputウィジェットを追加します。また、登録（RegisterButtonという名前）とログイン（LoginButtonという名前）のButtonウィジェットを描画ボードに追加します。最終的な結果は以下のようになります：

ユーザーが提供された入力詳細で登録ボタンを押すと、APISIX Admin APIエンドポイントとの通信を処理するクエリが必要です。APIゲートウェイに新しいAPIコンシューマーを登録します。APISIXコンシューマーエンドポイントURI /apisix/admin/consumersを使用してAPIクエリ（APISIX_Admin_Add_Consumer_APIという名前）を作成します。Inputウィジェットのテキストをクエリの本文に配置します。Inputウィジェットにアクセスすると、次のようになります：

APISIXは、Appsmithとは異なるDockerネットワーク内で独自のコンテナで実行されているため、localhostの代わりにhost.docker.internalのアドレスを使用します。

クエリがAPISIXに送信されると、新しいコンシューマーが登録され、コンシューマーオブジェクトはjwt-authプラグインとキーおよびシークレットを使用します。ユーザー名appsmithuserで指定されたコンシューマーがシステムに正常に登録されているかどうかをテストできます。次のcurlコマンドを実行します：

curl http://127.0.0.1:9180/apisix/admin/consumers/appsmithuser

既存のユーザーは、直接ログインページに進むことができます。次のセクションで説明します。

ステップ2: ログインページの作成

アプリケーションキャンバスに戻り、Login pageという新しいページを追加し、Login formのInput（ユーザーのメールアドレスを入力するため）とButton（ログイン用）ウィジェットを設定します。

次に、APISIXログインルートURIパス/loginのAPIクエリ（login_apiという名前）を作成し、keyパラメータを{{EmailInput.text}}に設定します。クエリをテストして実行ボタンを押すと、成功したレスポンスで、認証APIゲートウェイエンドポイントは有効なアクセストークンを返すはずです。以下の例では、jwtキーは、ユーザーがAPISIX側で認証されたことを示すトークンです。

Loginボタンを使用してlogin_apiクエリを実行するには、クエリのonClickプロパティを設定する必要があります。

JWTトークンをAppsmithストアに保存し、ユーザーをMainPageに移動させることも可能です。これを行うには、Login pageのonClickプロパティに以下のコードを挿入します：

{{login_api.run(() => {
  const jwt = login_api?.data;
  if (jwt) {
    storeValue('jwt', jwt);
    navigateTo('MainPage', {});
  } else {
    showAlert('Login failed!', 'error');
  }
})}}

ユーザーがAPISIXで認証に失敗した場合、アラートメッセージを表示して、エラーがあったことをユーザーに伝えます。

ステップ3: メインページの作成

最後に、ログインしたユーザーがアクセスできるようにMainPageを設定し、いくつかのデータを表示します。同じキャンバスを使用して、ウィジェットからUIを構築できます。ユーザーが正常にログインすると、ロジックはMainPageにナビゲートし、最初のページロード時に、APISIXのルートhttp://127.0.0.1:9080/ipに自動的にAPI呼び出しを行い、追加したクエリ（**main_page_data_api**という名前）を使用してアップストリームサーバー（パート1のステップ2で作成）からIPアドレスを取得します。

Authorizationヘッダーの値{{appsmith.store.jwt}}に、前のステップでAppsmithストアに保存したjwt値が含まれていることに気付くかもしれません。これは、ユーザーが認識されていることをアプリケーションに証明するために使用されます。Appsmithストアにjwt値が存在しない場合、ユーザーに未承認エラーを表示します。

私の場合、MainPageに2つのTextウィジェットを追加し、2番目のテキストフィールドの値を{{main_page_data_api.data}}に設定しました。これは、main_page_data_api呼び出しからの単純な出力データです。結果を参照してください。

次のステップ

未承認のユーザーをそのページにリダイレクトし、エラーを表示してログインまたは登録して新しいアカウントを作成することを提案するUnauthorized pageを追加することもできます。ユーザーが完了したときにアプリからログアウトできるボタンウィジェットを提供することで、データのセキュリティを向上させることができます。

結論

上記の手順に従って、AppsmithとAPISIXを使用してカスタム認証システムを作成しました。Appsmithは、内部ツールや管理ダッシュボードの構築からプロトタイピングや本格的なアプリケーションの開発まで、幅広いユースケースに適しています。APISIXを使用すると、ユーザーの認証を実施するだけでなく、レート制限、IPブロック、コンシューマー制限などの追加のセキュリティ対策を導入して、カスタム認証ソリューションのセキュリティを維持できます。

関連リソース

• API Gateway Authentication.
• Apache APISIX Authorization Policy: Protect Your APIs.
• Deep Dive into Authentication in Microservices.