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