SpringBootとNext.jsで認証機能を作成する

[healthybamboo]

ポイント

• SpringBootでJWT認証のやりかた
• SpringBootでパスベースの認可制御のやりかた
• Next.jsでトークンの格納と取り出し処理
• 認可の可否による表示ページの切り替え

やること

• SpringBootでRestAPIサーバーを構築してjwt認証ができるようにする
• Next.jsでの認可制御

Design

jwt

payload

{
  "iat": "<トークン発行者>",
  "sub" : "<トークンの発行者>"
  "exp" : "<トークンの期限>"
}

SpringBoot

POST: /api/login

送信データ

{
   "username": "<ユーザー名>",
   "password": "<パスワード>"
}

返信データ(ログイン成功時)

{
  "token": "<JWTのトークン>"
}

返信データ(ログイン失敗時)

{
  "error" : "failed login"
}

GET: /api/public/hello

認証の必要のないアクセス

受信データ

{ 
  "message" : "hello public"
}

GET: /api/private/hello

認証の必要が必要なアクセス

受信データ(認証成功時)

{
  "message" : "hello private"
}

受信データ(認証失敗時)

{
  "error" : "invalid token"
}

Next.js

/login

初期

• ログイン用のフォームが表示される
  • id=usernameのテキストボックス
  • id=passwordのテキストボックス

フォームの送信

• 入力されたデータを/api/authへPOSTメソッドで送信する

フォーム送信後

• ログインに成功した(200)場合は/publicへ遷移する
• ログインに失敗した(401)場合は再び/loginページを表示し、上部にエラーメッセージを表示する

/private

• アクセストークンが格納されている場合に表示される
  • ない場合は/publicへ遷移される
• アクセストークンを利用して、/api/private/helloへGETリクエストでmessageを要求する
• 結果を中央へ表示する
  • 取得に成功した場合は、通常の文字でメッセージの内容を表示する
  • 取得に失敗した場合は、赤文字でエラーを表示する

/public

• /api/public/privateへGETリクエストでmessageを要求する
• 結果を中央へ表示する
  • 取得に成功した場合は、通常の文字でメッセージの内容を表示する
  • 取得に失敗した場合は、赤文字でエラーを表示する

作業場所

https://github.com/healthybamboo/auth_demo

参考文献

• SpringSecurityConfiguration書き方
• SpringBootJWT

[github-actions]

Branch new/#24_create_authentication_feature_with_springboot_and_nextjs has been created.