@sidebase/nuxt-authのローカル認証を試す機会がありましたので、備忘録です。
以下の記事で、@sidebase/nuxt-authを使って、Drupalの認証を行う方法を紹介しました。
上記の記事では、Nuxt3のSSRを利用して、@sidebase/nuxt-authのauthjsプロバイダを使用していました。プロバイダの説明は以下です。
authjs: for non-static apps that want to use Auth.js / NextAuth.js to offer the reliability & convenience of a 23k star library to the Nuxt 3 ecosystem with a native developer experience (DX)
（機械翻訳）authjs: 非静的なアプリ向けで、Auth.js / NextAuth.js を使用し、23,000以上のスターを持つ信頼性と利便性をNuxt 3エコシステムに提供します。開発者にネイティブな開発体験 (DX) を提供します。
アプリケーションをSSGなどで作成した際には、後者の方法を使用する必要があるかと思います。
ソースコード# リポジトリは以下です。
https://github.com/nakamura196/nuxt-auth-local-drupal
ソースコードは以下です。
ローカル認証を使用する場合には、next-authをインストールする必要はなく、@sidebase/nuxt-authのみでよいようでした。
{ } " " " " } " } " } n p t s , d , d a r y c " " " " " e " " " e " m i p r b d g p p p n v v v @ e v e i u e e r o e u u u D s " a " p i v n e s n x e e e i : t : t l " e v t d t " - p d e s d : r i i e " : r e e " " " " " a e n n : o n b n : m : : " t w s c " u d a u o n e " t i " l t e s x t d { " u " : a e ^ a e n e t r u n x : l s 3 t r c / - u l u t " l " . e " i n a e e x " n " : 1 s : e u p , " t d n u : 5 t s x p , e u x { . " " " t " b v x t " 1 , l : - , u " t n " a a i , p u , t { u l g r x e t d e e t s h " n v t " , e i p " : r e r a w e " t " p ^ e , a 0 " r . , e 9 " . 4 "
Drupalの認証を使用します。CMS_URLには、https://drupal.example.orgのような値を入れます。
試行錯誤の結果、特にsignInとgetSessionを以下のように設定することで、最低限の動作確認ができました。
e } x ) p c m a } ; h o o o u , t r m d t b p } t t p u h a r , p a l : s o t e } t } s d t e e v y n , o , : e i s { U i p d s s s g } k s t h m / f b : R d e p i i i e , e i y e a / a i L e : o g g g t p m n g p a x n u l [ : r i n n n S a e : n e d A u l i " : " n I O U e t t I : e g x t t @ p l t n u p s h h { n r e t y s r { o s : t : s : o R " N I . d D i o c : : i d e B a n c e a d c a { u o " : s e m S o f t e e l { { n n s p a e e m i e b s " p d : e " o r : c / n : a s , a p e s g n e o d e s . t a f { s e s r " n o N " e e h t i i t e " X d c u 2 / n : h n o " T , - s s x 0 n v : e n , o C : / t 2 u . " d / k S a C 4 x C u " , t e R 3 p o - t M s u o n F 6 i n 1 - S e s k P ト - 0 / f 1 a _ r e e o ー T 0 c i - u U / r n i ク o , o g 0 t R l " n ン k n ( 1 h L l , t の e f { " " g o e 種 n i , ] + i g r 類 " g , n o : （ , ト u " ? u 一 ー r / _ t " 般 ク a " f " / 的 ン t , o , c に の i r s B ヘ 有 o m m r e ッ 効 n a e f a ダ 期 / t t _ r ー 限 n = h t e に （ u j o o r ト 1 x s d k を ー 時 t o : e 使 ク 間 - n n 用 ン ） c " " " ） を o , g , 設 n e 定 f m t i e " g t h } ト o , ー d ク : ン の " 取 p 得 o 元 s を t 設 " 定 } , < c c c c } < s o o o o ; / t / c n n n n s } s e < t r s s s s i ) c m d / e i t t t t g n p ; r p i < < < d m p n a a i l v h p d / i p t { u p h I m s p a > 1 > i < < d v l s a a n e s t t > { v t / t / i > a s s e s n ( : : > e Y { > e < t e < t v t e t r s d { > o m b e m f / e > e t a n w l u p u d p u m p o < < < f m > u t a o e s a a l t p l r i i b o p p u m r L e s a t a t l a m n n u r l s e d o r s r a t o a t p p t m a l , g n w e e n t e @ u u t > t a = = i a o } e s t t o e n s n m r c } @ > u n > g i r r e d u < - c - b t t = g e e = . . r / i l e m y y t " n f f v v r p f i l i p p y t I ( ( a a e > = c s t e e p s n " " l l n " k e . = = e " , " " u u t s = > p " " = > ) ) = e e l t " r t p " d ; ; > , , y a s e e a s a t i v x s u t { { u g e t s b a { s n n " w m , O t o i s = u = r t s t = t " - d " i a = ( h m " > g t ) a o S n u ' " n d i O s a > d e - g u u S l l m n t } t i e = o } h g L " d I } . e n o u e n < n g s l < = / t O i e = / h i u n r " b u 1 c t " n p u s > a < > a a t e t / m s t A e b e s o u d u " w n t ' t o > h " t p r ( > o l d ) n a " ; > c e p h l o a l c d e e h r o = l " d ユ e ー r ザ = 名 " " パ ス ワ ー ド " 以下のようなログインフォームが表示されます。ユーザ名とパスワードを入力します。
statusがloadingになります。
結果、以下のように表示されます。今回の実装ではdataに設定されるセッショントークンが表示されます。
まとめ# getSessionのエンドポイントは他のものにしたほうがよいかと思いますが、@sidebase/nuxt-authのローカル認証について、参考になりましたら幸いです。
