2023.04.17この記事は約8分で読めます。以前、以下の投稿で簡易な認証機能を試してみました。以下は認証フローのイメージを掴むための簡易なサンプルでしたので機能は不十分でした。Nuxt3での簡易の認証フローを構築するNuxt3でアクセストークンを使った簡易な認証フローの構築をしてみます。middlewareを使います。middlewareはNuxt2にも同様にあった仕組みです。サーバーサイド(SSRサーバ初...debug-life.net2022.08.15今回は、Nuxt-Authというモジュールを使って認証機能を組み込むための方法について見ていきたいと思います。18.15.0Nuxt-AuthモジュールNuxt3にあるNuxt-Authモジュールは、NextAuth.jsというNext.jsアプリケーション用に書かれた認証ライブラリをベースにNuxt3用に提供されているモジュールになっています。Layersという機能を使って開発されているようですが、まだworkingステータスとなっているようです(本記事執筆時点、まだNuxt2の頃のまま?)。その間は、本記事にあるNuxt-Authモジュールの利用を推奨する、となっています。Nuxt-Authモジュールは非常に多くの認証プロバイダをサポートしています。NextAuth.jsのサイトを見るとそのサポートの多さが分かります。ユーザの方が使われているだろうサービスプロバイダで困ることはなさそうです。Nuxt-Authを使ったサンプルNuxt-Authモジュールをインストールして認証機能を実装していきたいと思います。今回はGoogleとGitHubプロバイダを使用してみます。インストールモジュールのインストールをします。@sidebase/nuxt-authは、0.5.0-rc.0の版となっているようです。next-auth@4.22.0続いてnuxt.configでモジュールの設定をします。以下は、全てのページでデフォルトで認証を有効にする設定をしています。サイト全体で認証を必要にする},});その他の設定は公式ドキュメントで参照できます。Routeにハンドラーの定義を書くようになっています。Routeは、リクエストが配下のパスにマッチしない場合にデフォルトで呼ばれるルートです。https://nuxt.com/docs/guide/directory-structure/pages/#catch-all-routeprovidersというプロパティに認証プロバイダを設定します。Googleプロバイダを設定した例は以下のようになります。process.env.GOOGLE_CLIENT_SECRET!,}),],});providersの配列には複数のプロバイダの設定が可能です。GoogleやGitHubといった複数のプロバイダを設定するとそれらプロバイダを選択できる認証画面が表示されます。GitHubも追加してみましょう。process.env.GITHUB_CLIENT_SECRET!,}),],})アプリケーションを起動しhttp://localhost:3000にアクセスすると以下のような認証画面に飛ばされることを確認できます。/></div></template>GoogleまたはGitHubを選択できる認証画面です。認証プロバイダの設定GoogleとGitHubのプロバイダを登録して実際に設定してみます。URLは、デフォルトでは/api/auth/callback/:providerとなっています。ConsoleからクライアントID、シークレットを取得します。Consoleへ移動プロジェクト作成等の詳細は割愛します。上記の登録を完了し、.envファイルにそれぞれプロバイダのクライアントIDとシークレットを設定しアプリケーションを起動します。アプリケーションの認証画面で認証プロバイダのリンクをクリックすると以下のような認証プロバイダの要求画面が表示されます。GitHub認証によるページ保護2つの設定方法があります。1つはサイト全体で保護するグローバル、もう1つはページごとに保護するローカルです。グローバルで保護サイト全体で保護する場合は、モジュールのオプションで設定できます。個別のページで認証をかけたくない場合は、definePageMetaで設定することができます。先ほどの例の通りモジュールのオプションで設定します。サイト全体で認証を必要},});個別のページで認証を要求しない場合は以下のようにします。})</script>ローカルで保護definePageMeataで設定します。middlewareによって保護されます。Modeを使うと、認証済みユーザは認証ページを開かずredirectページに遷移させるといったフローを構築できます。自分で認証済みか否かをチェックすることもできますが、ライブラリ側で制御してくれるのは嬉しいと思います。認証済みの場合に遷移させるページ、指定なしは'/'},})</script>カスタム認証ページデフォルトで認証画面が用意されているのですぐに始めることができますが、通常はWebサイトのデザインに合わせて画面デザインすることが多いと思います。そのため、個別の認証ページに飛ばすことができます。これはNuxtAhtuHandlerで設定します。Out</button></div></template>確認してみましょう。認証が必要なページにアクセスします。Outすると再びログインページに戻ります。JWTトークンの使用sessionStrategyをjwtにするとJWTを使えます。process.env.GITHUB_CLIENT_SECRET!,}),],});ログインして開発者コンソールでcookieに格納されているsession情報をのぞくと以下のようにJWTの値が入っています。adapterを使うとデータベースと連携しアカウントやユーザ登録がされるようになります。sequelize-adapterを使う方法を見ていきます。モジュールをインストールします。データベースはSQLiteを使います。@next-auth/sequelize-adapterNuxtAuthHandlerを以下のように修正します。adapterの設定});上記ではモデルの定義をしていません。SequelizeAdapterはモデルがない場合、内部にもつモデル定義からテーブル作成をしてくれます(ただしproduction環境ではない場合)。実際にはsequelizeのsync関数が呼ばれています。production環境では通常マイグレーションする必要があります。この設定にしてログインしてみましょう。ログインすると以下のようにコンソールにテーブル作成のSQLが出力されるのを確認できます。(email));ログイン後にテーブルaccounts、users、sessionsを見るとレコードが登録されているのが分かります。accountsテーブルusersテーブルsessionsテーブルCredentialsProviderの使用CredentialsProviderを使うとusernameとpasswordのような入力を使って既存のシステムを使った認証ができるようです。https://authjs.dev/reference/adapter/sequelizeadapter,});EmailProviderの使用EmailProviderを使うと検証用のトークンを生成した後メール認証リクエストを送信、メール受信者が認証用のURLをクリックしてユーザ登録を完了するというフローを構築できます。認証URLをコンソールに出力したのが以下です。まとめNuxt-Authモジュールを使うとNuxt3で認証プロバイダを用いた認証機能をクイックに実装することができました。アダプタを使うことでデータベースとの連携も簡単に行うことができます。Nuxt-Authはまだrc版ですが、サクッと導入できプロバイダやアダプタなど機能も豊富でとても使いやすいため、今後Nuxt3でアプリケーション構築していくのに使っていきたいと思いました。コピーbyebyehaikikyouをフォローするbyebyehaikikyouデバッグライフ関連記事NuxtJSNuxt3でページ遷移時にページトップにスクロールするNuxt3でページ遷移時にページトップにスクロールさせる方法についてです。rc.13版にアップグレードしてみるとスクロールトップのオプションが入っているようでした。provideしたコンポーネントでinjectvee-validateを見ていて、なるほどこれは参考になると思ったのでメモ。provide/injectについて、provideで提供したオブジェクトは子ノードでinjectすることで子ノード内に依存関係を持ち込むことができる。provi...NuxtJSNuxt3でマークダウンエディタを使う最近は個人的にnuxt3をよく触っています。練習としてちょっとしたアプリを作っているのですが、何らかの文書をマークダウンで扱えると文書構造を表現できて便利です。そこで、今回はnuxt3でマークダウンエディタを扱ってみます。nuxt3(vue...NuxtJSNuxt.jsでsocket.ioを使うやり方Nuxt.jsでWebSocket、今回はsocket.ioを使う方法についての備忘録です。他によいアプローチがあるかもしれません。他の方の事例を参考にしながら、自分なりに整理してみました。以下の3つのアプローチで記述してみます。m...NuxtJSNuxt3をさわってみるNuxt3はbeta版になっている、Nuxt3の雰囲気をつかむためインストールから起動するところまでやってみる。インストールnuxiという新しいCLIを使う。nuxiについて、プロジェクトのトップでinfoコマンドを実行してみる。ディレクト...NuxtJSNuxt3のruntimeConfigで環境変数を設定するはじめにnuxt3には、実行時に設定値をロードするための仕組みとしてruntimeConfigというものがある。コンポーネント内からはuseRuntimeConfigや$configで値にアクセスすることができる。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。名前:moritetuITエンジニア地方でITエンジニアをしています。Webやスマフォアプリ、Hadoopなどのビッグデータに関するシステムに関わり、現在は企画開発の業務をしています。(必須)サイトタイトルとURLをコピーしました。