日本語
LogtoでNuxt認証をビルドする
Logto SDKを統合してNuxtでユーザー認証フローをビルドする方法を学びましょう。
Gao
Founder
Founder
Logto SDKを統合してNuxtでユーザー認証フローをビルドする方法を学びましょう。
このチュートリアルでは、Logto SDKを統合してNuxtでユーザー認証フローを構築する方法を紹介します。チュートリアルでは、プログラミング言語としてTypeScriptを使用します。
始める前に、以下を確認してください:
始めるには、「従来のウェブ」タイプのLogtoアプリケーションを作成します。Logtoアプリケーションを作成する手順は次のとおりです:
その後、NuxtアプリケーションとLogto SDKを統合するプロセスを案内するインタラクティブガイドが表示されます。以下の内容は将来の参考資料として使用できます。
お気に入りのパッケージマネージャでLogto SDKをインストールします:
Nuxt設定ファイル (nuxt.config.ts)で、Logtoモジュールを追加します:
モジュールの最小限の設定は以下の通りです:
これらの情報はセンシティブなので、環境変数を使用することを推奨します:
詳細は ランタイム設定 を参照してください。
Logtoコンソールのアプリケーション詳細ページに切り替えます。リダイレクトURIhttp://localhost:3000/callbackを追加します。
リダイレクトURIは、認証後にリダイレクトする場所を示すOAuth 2.0の概念です。
同様に、「ログアウト後のリダイレクトURI」セクションにhttp://localhost:3000/を追加します。
ログアウト後のリダイレクトURIは、ログアウト後にリダイレクトする場所を示すOAuth 2.0の概念です。
次に、「保存」をクリックして変更を保存します。
@logto/nuxt モジュールを登録すると、次のことが行われます:
/sign-in)、サインアウト (/sign-out)、とコールバック (/callback) の3つのルートが追加されます。useLogtoClient と useLogtoUser がインポートされます。これらのルートはモジュールオプションの logto.pathnames で設定可能です, 例えば:
詳細は @logto/nuxt パッケージの タイプ定義ファイル を確認してください。
Nuxtページは初回ロード後にSPAにするため、必要に応じてユーザーをサインインまたはサインアウトルートにリダイレクトする必要があります。
ユーザーの情報を表示するには、サーバーサイドとクライアントサイドの両方で使用できる useLogtoUser() コンポーザブルを使用します:
これでアプリケーションを実行し、Logtoでサインイン/サインアウトを試すことができます:
統合中に問題が発生した場合は、Discordサーバーに参加して、コミュニティやLogtoチームとチャットしてください！