Logto を利用して SvelteKit の認証を構築する
Logto SDK を統合することで SvelteKit を使用してユーザー認証フローを作成する方法を学びます。
Founder
スタート
イントロダクション
- Logtoは、アイデンティティインフラストラクチャを構築するためのオープンソースのAuth0代替です。ユーザー名、メール、電話番号、GoogleやGitHubなどの人気のあるソーシャルサインインを含む、さまざまなサインイン方法をサポートしています。
- SvelteKit Svelte を使用して堅牢で高性能な Webアプリケーションを迅速に開発するためのフレームワークです。
このチュートリアルでは、Logto SDKを統合してSvelteKitでユーザー認証フローを構築する方法を紹介します。チュートリアルでは、プログラミング言語としてTypeScriptを使用します。
前提条件
始める前に、以下を確認してください:
- Logtoアカウント。持っていない場合は、無料でサインアップできます。
- A SvelteKit開発環境とプロジェクト。
Logtoアプリケーションを作成する
始めるには、「伝統的な Web」タイプのLogtoアプリケーションを作成します。Logtoアプリケーションを作成する手順は次のとおりです:
- Logtoコンソールにサインインします。
- 左側のナビゲーションバーで、アプリケーションをクリックします。
- アプリケーションを作成をクリックします。
- 開いたページで、「伝統的な Web」セクションを見つけ、「SvelteKit」カードを見つけます。
- 構築を開始をクリックし、アプリケーションの名前を入力します。
- 作成をクリックします。
その後、SvelteKitアプリケーションとLogto SDKを統合するプロセスを案内するインタラクティブガイドが表示されます。以下の内容は将来の参考資料として使用できます。
Logto SDK と統合する
インストール
お気に入りのパッケージマネージャーを使って Logto SDK をインストールします :
Logto フックを追加する
hooks.server.ts ファイルで、次のコードを追加してサーバーに Logto フックを注入します:
これらの情報は機密的であるため、環境変数の使用を推奨します:
複数のフックがある場合、sequence() ヘルパー関数 を使用してチェーンできます :
現在、locals オブジェクトの中で Logto クライアントにアクセスできます。 TypeScript の場合、app.d.ts に型を追加できます :
user オブジェクトについては後で説明します。
サインインとサインアウトを実装する
リダイレクトURIを構成する
Logtoコンソールのアプリケーション詳細ページに切り替えます。リダイレクトURIhttp://localhost:3000/callbackを追加します。
リダイレクトURIは、認証後にリダイレクトする場所を示すOAuth 2.0の概念です。
同様に、「ログアウト後のリダイレクトURI」セクションにhttp://localhost:3000/を追加します。
ログアウト後のリダイレクトURIは、ログアウト後にリダイレクトする場所を示すOAuth 2.0の概念です。
次に、「保存」をクリックして変更を保存します。
アプリに戻って、サインインとサインアウトを実装したいページで、次のアクションを定義します :
それから、これらのアクションを Svelte コンポーネントで使用します :
ユーザー情報を表示する
ユーザーの情報を表示するには、locals.user オブジェクトをレイアウトに注入して、すべてのページで利用可能にします :
あなたの Svelte コンポーネントで :
チェックポイント: アプリケーションを実行する
これでアプリケーションを実行し、Logtoでサインイン/サインアウトを試すことができます:
- ブラウザでアプリケーションを開くと、「サインイン」ボタンが表示されるはずです。
- 「サインイン」ボタンをクリックすると、Logtoのサインインページにリダイレクトされるはずです。
- サインインした後、アプリケーションにリダイレクトされ、ユーザーデータと「サインアウト」ボタンが表示されるはずです。
- 「サインアウト」ボタンをクリックすると、Logtoのサインアウトページにリダイレクトされ、その後、未サインイン状態でアプリケーションにリダイレクトされるはずです。
統合中に問題が発生した場合は、Discordサーバーに参加して、コミュニティやLogtoチームとチャットしてください！