LogtoでNuxt認証をビルドする
Logto SDKを統合してNuxtでユーザー認証フローをビルドする方法を学びましょう。
Founder
はじめに
イントロダクション
- Logtoは、アイデンティティインフラストラクチャを構築するためのオープンソースのAuth0代替です。ユーザー名、メール、電話番号、GoogleやGitHubなどの人気のあるソーシャルサインインを含む、さまざまなサインイン方法をサポートしています。
- Nuxt ウェブ開発を直感的でパワフルにするオープンソースのフレームワーク。
このチュートリアルでは、Logto SDKを統合してNuxtでユーザー認証フローを構築する方法を紹介します。チュートリアルでは、プログラミング言語としてTypeScriptを使用します。
前提条件
始める前に、以下を確認してください:
- Logtoアカウント。持っていない場合は、無料でサインアップできます。
- A Nuxt開発環境とプロジェクト。
Logtoアプリケーションを作成する
始めるには、「従来のウェブ」タイプのLogtoアプリケーションを作成します。Logtoアプリケーションを作成する手順は次のとおりです:
- Logtoコンソールにサインインします。
- 左側のナビゲーションバーで、アプリケーションをクリックします。
- アプリケーションを作成をクリックします。
- 開いたページで、「従来のウェブ」セクションを見つけ、「Nuxt」カードを見つけます。
- 構築を開始をクリックし、アプリケーションの名前を入力します。
- 作成をクリックします。
その後、NuxtアプリケーションとLogto SDKを統合するプロセスを案内するインタラクティブガイドが表示されます。以下の内容は将来の参考資料として使用できます。
Logto SDKを統合する
インストール
お気に入りのパッケージマネージャでLogto SDKをインストールします:
Logtoモジュールを登録する
Nuxt設定ファイル (nuxt.config.ts)で、Logtoモジュールを追加します:
モジュールの最小限の設定は以下の通りです:
これらの情報はセンシティブなので、環境変数を使用することを推奨します:
詳細は ランタイム設定 を参照してください。
サインインとサインアウトの実装
リダイレクトURIを構成する
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でサインイン/サインアウトを試すことができます:
- ブラウザでアプリケーションを開くと、「サインイン」ボタンが表示されるはずです。
- 「サインイン」ボタンをクリックすると、Logtoのサインインページにリダイレクトされるはずです。
- サインインした後、アプリケーションにリダイレクトされ、ユーザーデータと「サインアウト」ボタンが表示されるはずです。
- 「サインアウト」ボタンをクリックすると、Logtoのサインアウトページにリダイレクトされ、その後、未サインイン状態でアプリケーションにリダイレクトされるはずです。
統合中に 問題が発生した場合は、Discordサーバーに参加して、コミュニティやLogtoチームとチャットしてください！