18
20

More than 3 years have passed since last update.

Nuxt.js + Auth0 + Spring Boot で作る認証付きSPA 【 vol.0 やりたいこと 】

Last updated at Posted at 2018-06-22

はじめに

気軽に始めたらこの投稿を含めて全6編になってしまいました(汗)

リポジトリ

ここで作成されたものは以下のリポジトリで管理されています。
フロント : https://github.com/mijinco0612/Nuxt-auth0
サーバサイド : https://github.com/mijinco0612/spring-auth0

きっかけのきっかけ

この投稿を始めるにあたって全般に渡って下記を大変参考にさせて頂きました。
https://booth.pm/ja/items/830458
購入する価値が確実にあると私は思います。
この場を借りて素晴らしい本を発行してくださったころころぶっくす様に感謝の気持ちお伝えできたらと思います。
本当にありがとうございます。

本題:認証認可の仕組みを作るのはとても大変。

  • そもそも、なにかプロダクトを作ろうとしたとき、本質的にユーザーに提供したいものは認証認可とは別にあるよね。
  • でも、認証認可はだいたい必要。。。
  • ビジネスロジックの他に考えなきゃいけないことがめっちゃ増える。
  • SPAでやるなら、セッション情報はどこに持たせるCookie? じゃあCSRFトークン持たせなきゃ。
  • サーバサイドから一旦thymeleafで返させて、そこから。。。
  • フロントとサーバサイドを1プロジェクトで。。。ディレクトリ構成が。。。
  • 出力先をゴニョゴニョして。。

しんどい&しんどい
(認証認可関係ないやんけ!という部分もあるが、付随して考えなきゃいけないことが多いということで。。。)

どうしたい

  • 認証は外のサービスに任せたい。
  • Auth0というのが使いやすいらしいぞ。
  • この際、フロントとサーバサイドは分けて管理したい。サーバサイドはシンプルなREST API として扱いたい。

こんなふうにできたらいいな

1.フロントからAuth0をつかってソーシャルログインする。
2. OKならJWT(JWS)トークンを返してもらう
3. JWTトークンを付与してAPIにリクエスト
4. Auth0の公開鍵をつかってJWTトークンを検証して改ざんされてないかチェック
5. 無事レスポンスがかえる

図にしたらこんな感じかな?

構成図.png

とりあえず、やってみよう。
まずはAuth0の準備へ
Nuxt.js + Auth0 + Spring Boot で作る認証付きSPA 【 vol.1 Auth0 登録編 】

18
20
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
20