フルスタック認証アプリの構築方法

ほとんどのWebアプリケーションには、サインアップとログイン機能が必要です。しかし、初心者にとってこれは難しい課題となることがあります。経験豊富な開発者でさえ、最初から認証を外部サービスに任せることを好むことがあります。フルスタックの認証フローを構築するということは、フロントエンドでユーザーのサインインと登録を設定し、バックエンドAPIを保護することも意味します。つまり、両方の部分に取り組む必要があります。

この記事では、Apache APISIX、Authgear、およびOpenID Connect（OIDC）を使用してフルスタックの認証アプリを構築する方法を説明します。プロジェクトのソースコードはGitHubで見つけることができます。アプリを迅速に開始するには、リポジトリをクローンし、README.mdファイルに記載されている手順に従ってコードサンプルを実行してください。

学習目標

このコンテンツは、バックエンドとフロントエンドの両方で認証を設定する方法を誰にでも示すことを目的としています。また、フルスタック開発者になりたい初心者や経験豊富な開発者を支援するために設計されています。

APISIX、Authgear、OIDCの認証における役割

ガイドに飛び込む前に、使用するツールを簡単に紹介します。

**OIDC（OpenID Connect）**は、OAuth 2.0プロトコルの上に構築されたシンプルなアイデンティティ層です。これにより、サードパーティアプリケーションがユーザーを検証し、基本的なプロファイル情報を標準化された方法で取得できるようになります。
APISIXは、最も人気のあるオープンソースのAPIゲートウェイの1つです。API管理だけでなく、これらのAPIのセキュリティと保護を確保するために設計されています。そのセキュリティ機能の中でも最も注目すべき機能の1つは、プラグインを使用したOIDCのサポートです。
Authgearは、Webおよびモバイルアプリケーション向けの非常に適応性の高いIDaaS（Identity-as-a-Service）プラットフォームです。ユーザーは、組み込みのUIインターフェースを通じてアプリケーションにログインできます（ユーザー登録とログインフローのUIを構築する必要はありません）。これにより、ユーザーは安全で標準ベースのログイン体験を得ることができ、独自のブランディングやさまざまな認証方法（メール、ソーシャルログイン、パスワードレス、生体認証、SMS/WhatsAppを使用したワンタイムパスワード（OTP）、多要素認証（MFA）など）でカスタマイズできます。Authgearは、OpenID Connect（OIDC）とOAuth 2.0を使用してユーザーを識別し、保護されたリソースへの認可を付与します。

認証ワークフロー

以下は、認証プロセスの概要を示すアーキテクチャ図です：

OIDC、APISIX、Authgearを使用した認証ワークフロー

図に示されているステップを以下に詳しく説明します：

上記の図では、クライアントは任意のWebアプリケーション、APIゲートウェイはAPISIX、アイデンティティプロバイダはAuthgear、アップストリームはバックエンドAPIです。

Webアプリは、React、Vue、Angularで構築されたシングルページアプリ（SPA）から、Express、NextJSなどのフレームワークを使用して作成された標準的なWebアプリまで、さまざまな形態を取ることができます。Webアプリは、フロントエンドを持つクライアントアプリで、クライアントIDとクライアントシークレットを使用してアイデンティティプロバイダ（Authgear）にリクエストを送信し、JSON Webトークン（JWT）のようなアクセストークンを取得します。
提供された認証情報が正しければ、AuthgearはWebアプリにJWTトークンを返信します。Authgearポータルでアプリのユーザーをいくつでも作成でき、ユーザーはAuthgearがホストするUIページを使用してログインできます。
JWTトークンを取得した後、クライアントはアクセストークンとともにAPIゲートウェイ（APISIX）にリクエストを送信し、ゲートウェイによって保護されたバックエンドAPIにアクセスします。
リクエストを処理する前に、APISIXは提供されたトークンが有効で、期限切れでなく、要求されたデータやサービスに対する適切なスコープを持っていることを確認する必要があります。APISIXがトークンをローカルで検証できない場合、トークンイントロスペクションリクエストをAuthgear認証サーバーに送信します。このリクエストは通常、サーバーの**introspection**エンドポイントに対して行われます。
Authgearはイントロスペクションリクエストを受信し、処理します。サーバーはトークンの有効性、期限、関連するスコープを確認し、トークンの状態を判断した後、APISIXに応答します。
Authgearのトークンイントロスペクション応答に基づいて、APISIXは適切な判断を下すことができます。トークンが有効であれば、リクエストをバックエンドAPIに転送し、そうでなければクライアントのリクエストを未承認のHTTPステータスコードで拒否します。
APISIXは、バックエンドAPIからの応答を要求されたリソースとともに送信します。

APISIX、Authgear、OIDCを使用したフルスタック認証アプリ

デモプロジェクトでは、Dockerを使用して3つのコンポーネント（バックエンド、APIゲートウェイ、フロントエンド）を1つのコマンドでインストールおよび実行しました。フロントエンドのWebアプリにはExpressJSを使用し、シングルページアプリをlocalhost:3000でホストしました。APISIXゲートウェイはlocalhost:9080でアクセスでき、バックエンドAPI（Python、Java、NodeJSなどで構築した任意のAPI）はlocalhost:9081に設定されています。

前提条件

開始する前に、以下が必要です：

無料のAuthgearアカウント。まだ持っていない場合は、サインアップしてください。
すべてのサービスをインストールするためにDockerを使用します。

Authgearの設定

Authgearサービスを使用するには、Authgear ダッシュボードでアプリケーションを設定し、Authgear OIDCクライアント情報を取得する必要があります。この設定により、Authgearで認証されたユーザーは、自動的にWebアプリケーションにサインインできるようになります。

ステップ1: Authgearでアプリケーションを作成する

アプリケーションを設定するには、AuthgearポータルUIに移動し、左側のナビゲーションバーでアプリケーションを選択します。インタラクティブセレクターを使用して、新しいAuthgear OIDCクライアントアプリケーションを作成します。

Authgearでアプリケーションを作成

ステップ2: アプリの認証情報をコピーする

Authgearのすべてのアプリケーションには、アプリケーションコードがAuthgear APIを呼び出すために使用する英数字の一意のCLIENT IDとCLIENT Secretが割り当てられます。生成されたAuthgear ISSUER（例：https://example-auth.authgear-apps.com）、`CLIENT ID、CLIENT SECRET`を記録します。これらの値は、次のステップでWebアプリの設定に使用します。

アプリの認証情報をコピー

ステップ3: リダイレクトURIを設定する

アプリケーションの認可済みリダイレクトURIは、ユーザーが認証された後にAuthgearがリダイレクトするURLです。これにより、OpenID Connectミドルウェアが認証プロセスを完了できます。この場合、フロントエンドのホームページであるhttp://localhost:3000になります。

認可済みリダイレクトURIフィールドにhttp://localhost:3000を設定します。設定しないと、ユーザーはログイン後にアプリケーションに戻ることができません。

ステップ4: アクセストークンを有効にする

また、アプリ設定のアクセストークンセクションで、JWTをアクセストークンとして発行するオプションを有効にします：

Authgearでアクセストークンを有効にする

ステップ5: ログイン方法を選択する

Authgearアプリを作成した後、ログインページでユーザーがどのように認証するかを選択します。認証タブからログイン方法に移動し、メール、モバイル、ソーシャル、ユーザー名のみ、または指定したカスタム方法など、さまざまなオプションからログイン方法を選択できます。このデモでは、ユーザーがアカウントを登録し、メールを使用してログインするメール+パスワードレスアプローチを選択しました。ユーザーはメールにワンタイムパスワード（OTP）を受け取り、コードを確認してアプリを使用します。

ログイン方法を選択

デモプロジェクトの設定と実行

Authgearの設定が成功したら、GitHubリポジトリを取得し、環境変数を設定してサービスを実行できます：

まず、プロジェクトをローカルマシンにクローンします：

git clone https://github.com/Boburmirzo/apisix-authgear-oidc-full-stack-auth.git

プロジェクトディレクトリを現在の作業ディレクトリにします：

cd apisix-authgear-oidc-full-stack-auth

プロジェクトのルートディレクトリ（Docker compose yamlファイルがある場所）に、以下の環境変数を含む.envファイルを作成します：

CLIENT_ID={AUTHGEAR_APP_CLIENT_ID}
CLIENT_SECRET={AUTHGEAR_APP_CLIENT_SECRET}
ISSUER={AUTHGEAR_ISSUER}
REDIRECT_URI=http://localhost:3000

括弧内の値を、Authgearの設定セクションから取得したAuthgearアプリの設定値（Issuer、ClientId、ClientSecretなど）に置き換えます。

環境ファイルを追加した後、ルートディレクトリからdocker compose upコマンドを実行します。

認証フローのテスト

デモでは、Dockerを使用して3つのコンポーネント（バックエンド、APIゲートウェイ、フロントエンド）を1つのコマンドでインストールおよび実行しました。フロントエンドのWebアプリにはExpressJSを使用し、シングルページアプリをlocalhost:3000でホストしました。APISIXゲートウェイはlocalhost:9080でアクセスでき、バックエンドAPI（Python、Java、NodeJSなどで構築した任意のAPI）はlocalhost:9081に設定されています。

Authgearログインページ