数分で Logto の Web SDK を作成する

Logtoは、さまざまなフレームワークやプラットフォームとの統合を簡素化するために設計された、多くの公式SDKを提供するオープンソースの認証プラットフォームです。しかし、公式SDKが提供されていないプラットフォームも依然として多数存在します。

このギャップを埋めるために、Logtoは @logto/browser という基礎的なパッケージを提供しており、これを使用して特定の要件に合わせたカスタムSDKを開発することができます。このパッケージは、JavaScriptをサポートし、ブラウザ環境で動作する限り、特定のフレームワークやプラットフォームに依存しないLogtoのコア機能を実装しています。

このガイドでは、@logto/browser を使用して React SDK を作成する手順を説明します。このSDKは、サインインフローを実装します。ブラウザで動作する他のJavaScriptベースのプラットフォーム向けにSDKを作成する場合も、同じ手順をたどることができます。

サインインフロー#

始める前に、Logto のサインインフローを理解しましょう。サインインフローは以下のステップで構成されています。

1. Logto へのリダイレクト: ユーザーは Logto のサインインページにリダイレクトされます。
2. 認証: ユーザーは資格情報を入力し、Logto で認証します。
3. アプリに戻るリダイレクト: 認証に成功すると、ユーザーは認可コードを持ってアプリにリダイレクトされます。
4. コード交換: アプリは認可コードとトークンを交換します。

@logto/browser の簡単な紹介#

@logto/browser パッケージは、Logto のコア機能を提供する LogtoClient クラスを公開しており、サインインフローのためのメソッドを提供しています:

1. signIn(): OIDC 認証URLを生成し、それにリダイレクトします。
2. handleSignInCallback(): コールバックURLをチェックして解析し、認可コードを抽出した後、トークンエンドポイントを呼び出してコードとトークンを交換します。
3. isAuthenticated(): ユーザーが認証されているかどうかをチェックします。

React SDK の作成#

このSDKでは、useLogto と useHandleSignInCallback という2つのフックと、LogtoProvider コンポーネントを提供します:

1. useLogto: サインインフローをトリガーする signIn メソッドと、ユーザーが認証されているかどうかを確認する isAuthenticated 状態を提供するフックです。
2. useHandleSignInCallback: コールバックURLを処理し、認可コードをトークンと交換して、サインインフローを完了させるフックです。

SDK を使用するには、アプリを LogtoProvider コンポーネントでラップし、認証状態をチェックし、サインインし、コールバックを処理するためにフックを使用するだけです。

ステップ1: パッケージをインストールする#

まず、npm や他のパッケージマネージャーを使用して @logto/browser パッケージをインストールします:

ステップ2: React のコンテキストを定義する#

プロバイダのコンテキストを定義し、次の3つの部分を含めます:

1. フックで使用するためにプロバイダ内で初期化される LogtoClient インスタンス。
2. 認証状態。
3. 認証状態を設定するメソッド。

新しいファイル context.tsx を作成し、次のコードを記述します:

ステップ3: プロバイダを実装する#

コンテキストが準備できたので、プロバイダを実装しましょう。プロバイダは LogtoClient インスタンスを初期化し、ユーザーが認証されているかどうかをチェックし、そのコンテキストを子コンポーネントに提供します。

新しいファイル provider.tsx を作成します:

ステップ4: フックを実装する#

次に、フックを実装しましょう。

• useLogto: このフックでは、コンテキストを使用して LogtoClient インスタンスを取得し、signIn メソッドと isAuthenticated 状態を提供します。このフックにさらにメソッドを追加することができます。
• useHandleSignInCallback: このフックは、ブラウザからコールバックURLを読み取り、認可コードを取得してトークンと交換します。ユーザーが認証された後に、認証状態を true に設定します。

新しいファイル hooks.ts を作成し、次のコードを記述します:

チェックポイント: SDK の使用#

これで、Logto 用の React SDK が完成しました。アプリを LogtoProvider コンポーネントでラップし、フックを使用して認証状態を確認し、サインインし、コールバックを処理することで、これをアプリで使用できます。公式の React サンプルプロジェクトはこちらからチェックできます。

結論#

このガイドでは、基本的な認証フローを実装するための Logto 用 React SDK を作成する手順を説明しました。ここで提供するSDKは基本的な例です。さらにメソッドや機能を追加して、アプリのニーズに合わせて拡張することができます。

ブラウザで動作するJavaScriptベースの他のプラットフォーム向けにSDKを作成する場合も、同じ手順をたどることができます。

リソース:

1. Logto Browser SDK
2. Logto React SDK