Passport.js と Logto の統合

Passport.js は Node.js 用の認証ミドルウェアで、Express ベースのウェブアプリケーションにわずらわされることなく組み込むことができます。この包括的なガイドでは、passport-openidconnect プラグインを利用し、Passport.js と Logto を組み合わせるためのシンプルで効果的な方法を提供します。本チュートリアルでは、Express.js を使用してアプリケーションを構築します。ここで議論するすべてのコードは、公開された GitHub リポジトリ にあります。

セッションを使用した Express の設定#

統合プロセスに進む前に、Express.js とそのセッションミドルウェアをインストールして基本プロジェクトをセットアップする必要があります。

TypeScript プロジェクト環境が準備できていることを前提としています（準備ができていない場合は 公式 TypeScript ドキュメント を参照してください）。必要なパッケージをインストールすることから始めます：

メインファイルの準備#

次のコードを使用して src/app.ts を作成します：

このスクリプトは Express アプリを初期化し、Passport.js での認証結果を保存するために重要なクッキーをベースにしたセッション管理のために cookieParser と session ミドルウェアを設定します。その後、http モジュールを使用してサービスを開始します。

Logto のアプリケーションを作成する#

続行するには、Logto アプリケーションが必要です。Logto コンソール にアクセスし、「Applications」に移動して「Create application」をクリックして作成してください。「Express」を選択し、アプリケーションに名前を付け、「Create application」をクリックします。

作成ガイドを読み終えると、次のステップのための設定情報を含む詳細ページが表示されます。

URI の設定#

アプリケーションの詳細ページで、次の 2 つの値を設定します：

1. Redirect URIs: プロジェクトのコールバックルートに合わせて http://localhost:3000/callback を設定します。
2. Post Sign-out Redirect URIs: 簡単のために http://localhost:3000 を使用し、サインアウト後にユーザーをホームページにリダイレクトします。

これらの値は後で変更できます。

アプリケーション設定で Passport.js を設定する#

依存関係のインストール#

passport と OIDC 戦略プラグイン passport-openidconnect をインストールします：

設定ファイルの準備#

設定管理用の app/config.ts を作成します：

環境変数を次のように設定します：

OIDC 戦略で Passport.js を初期化する#

src/passport.ts を作成します：

このコードは OpenIDConnectStrategy で Passport を初期化します。serialize と deserialize メソッドはデモ用に設定されています。

アプリケーション内で Passport ミドルウェアを初期化し、アタッチすることを忘れないでください：

認証ルートを構築する#

認証プロセス用の特定のルートを作成します：

サインイン: /sign-in#

このルートは OIDC 認証ルートを構築してリダイレクトします。

サインインコールバックの処理: /callback#

これは OIDC サインインコールバックを処理し、トークンを保存し、ホームページにリダイレクトします。

サインアウト: /sign-out#

これは Logto のセッション終了 URL にリダイレクトし、その後ホームページに戻ります。

認証状態の取得とルートの保護#

認証状態を用いたホームページを開発します：

ここでは、ユーザー情報が JSON.stringify を用いて表示され、request.user の存在がルートを保護するために使用されます。

結論#

Passport.js を Logto と統合したことをおめでとうございます。このガイドが既存のシステムから Logto を使用するものに移行する手助けとなることを願っています。より優れた認証体験のために、ぜひ Logto Cloud を今日お試しください。コーディングを楽しんでください！