Webアプリのログイン情報保存について

Webアプリケーションでログイン処理を作る際、ログイン情報の保存は必要となる。しかし、どのようにして保存するのか方法が沢山あるため個人的な備忘録としてまとめたい。

この記事はid:cateiruの薄い知識の上に成り立っているため間違えている箇所があれば指摘ください。

認証方式

GIGAZINEの記事がわかりやすいのでそちらを参照してください。

https://gigazine.net/news/20201227-web-authentication-methods-compared/

多分、今からwebサイトを構築する場合はopen id connectなどを使用したSSOでログイン実装すると思います(諸説あり)。

で、ログイン情報保存方法は?

  1. 多分一番多いのはCookieです。サーバー側で取得できるのでログイン情報を保存する専用にあると言っても過言ではないのでしょうか?

  2. 次に使用されるのはlocal storageです。ページごとにデータを永続的に保存できるストレージであり、色々な使い方ができます。

  3. また、session storageというものもあります。これはlocal storageのセッション間のみバージョンです。タブごとに保存されそのタブを閉じればデータは削除されます。

  4. 技術的には可能だが別にそれを使う必要無くね?というものもあります。indexed dbです。容量無制限でYouTube premiumの動画オフライン保存などで使用されています。KVSのような扱いができ結構便利です。

Cookieを使用する場合どのようにログイン情報を作成するかについても考えます。

多分多くのWebサイトで使用されているのはセッションベースの認証です。そのセッションごとにユニークなTokenを作成して認証します。 そのTokenを作成するには

  1. ログインページでログインしてもらう
  2. ユーザーを識別できる期限付きCookieを予め用意しておく
  3. IPアドレスやUser-Agent

の2種類があると思います。1は説明通りです。 2は、そのユーザーを識別できるTokenが漏洩した際の対策でセッションのTokenを更新するごとに一緒に更新したほうがいいです。

3はやってはいけないと思っています。フリーWi-Fiなどでログインした場合では他の人もアクセスできてしまう脆弱性があるためです。

local/session storage

APIのPOST時にヘッダをつけて送信する必要があるためそれ用の処理を書かなければならない手間はありますが、

  1. Cookieがブロックされてもしようできる
  2. curlなどでも簡単に叩ける

などの利点も有ります。ですが、やはりCookieと比べるとフロント側の処理がスパゲティになるイメージがあります。

まとめ

とりあえずCookie使えばいいと思います。