関連記事
セッション変数を使う
2020.11.13
2022.06.12
ログインってどういう仕組み？
この記事の動画版はこちら（画像クリックでYoutubeに飛びます）
チャンネル登録お願いします！
Webアプリを作る際、大抵実装する機能の1つとして「ログイン機能」があります。
TwitterやInstagram、Gmail、Amazonなど、みなさんが普段使うほとんどのアプリにログイン機能は付いていますよね。
ログインは普段から馴染み深い機能ですが、実際裏側でどんな仕組みになっているかは、あまり意識したことはないかもしれません。
ただ、自分でWebアプリを作る際には、毎回必ずと言っていいほど実装する機能です。
僕もこれまで何度もログイン機能を実装してきました。
そこで今回は「Webアプリのログインがどのような仕組みになっているのか」ということを初心者向けに分かりやすく解説していきたいと思います。
ログイン機能とは
そもそも、ログイン機能はなぜ必要なんでしょうか？
一般的なWebサイトやブログのように、誰でも自由に閲覧できるページの場合はログイン機能は必要ありません。
しかし、閲覧できる人を制限したり、ページの表示内容をユーザーごとにパーソナライズしたいといった場合には、その人が誰か？ということを特定するためにログインが必要になります。
また、ブログの投稿や、SNSへの投稿、ネットショップの注文履歴確認など、ログインしないと利用できない機能も多くあります。
このように、閲覧制限をかけたり、その人専用の情報や機能を利用できるようにするためにログイン機能は必要なんです。
ログイン機能の仕組み
ログインに使う情報は、
・メールアドレスとパスワード
・ユーザー名とパスワード
・パスワードのみ
といったようにアプリによって様々ですが、裏側の仕組みは大体同じです。
①まずユーザーはログイン画面でメールアドレスとパスワードなどを入力し、ログインボタンを押します。
②プログラムはその情報を受け取り、データベースに登録されているユーザーリストから、そのメールアドレスとパスワードに一致するユーザーを検索します。
③該当のユーザーが見つからなかった場合は、ログイン失敗として、エラーを表示します。
④該当のユーザーが見つかった場合は、ログイン成功として、そのユーザーの情報をセッションに保存し、ホーム画面やダッシュボードなどの画面に遷移させます。
⑤それ以降の画面では、セッションにログイン情報があるかどうかをチェックし、あればログインされているものと判断します。
⑥そして、ログアウトボタンが押された場合は、このセッション情報を削除（破棄）し、ログイン画面等へ遷移させます。
これでログインされていない状態になるという仕組みです。
アプリによって細かな実装の仕組みは異なりますが、ログインの裏側は基本的にこのような仕組みになっています。
なお、セッションについては別の動画でも詳しく解説しているので、そちらも併せて学習してみてください。
次回から自動でログインの仕組み
ちなみに、ログイン画面によくある「次回から自動でログイン」という機能ですが、これをチェックしておくと、次回アクセス時は自動でログインしてくれるとても便利な機能です。
これも大抵のアプリには実装されていますよね。
この仕組みも簡単に説明しておきます。
セッションというのは、未操作状態で一定時間経つと自動的に破棄されてしまうため、ログイン状態をずっと保持させておくことは出来ません。
ここで使うのが、ブラウザのCookieという機能です。
Cookieというのは、ユーザーのブラウザの中に小さなデータを保存しておける機能です。
①次回から自動でログインにチェックがされた場合、トークンと呼ばれるランダムなキー文字列を発行し、それをユーザーのCookieに保存しておきます。
そして、データベースのユーザー情報にも同じトークンを保存しておきます。
トークンには、セキュリティのために有効期限も設定しておきます。
②ユーザーがログインの必要なページにアクセスしてきた際、まず、ブラウザのCookieにトークンがあるかどうかをチェックし、
トークンがあればそれをデータベースに照合します。
③データベースに、トークンが一致するユーザーがいて、なおかつトークンが有効期間内であれば、ログインを免除して、そのユーザーで自動ログインさせるという仕組みです。
※したがって、同じパソコンの同じブラウザであれば、有効期間内なら誰でもログイン出来てしまうので注意しましょう。
④ユーザーによってログアウトが行われた際は、トークン情報も削除します。
ログイン機能は資産になる
以上が、通常のログイン／ログアウトと次回から自動でログインの簡単な仕組みです。
ログイン機能は、大抵のアプリに実装される機能ですが、基本的な仕組みはどれも同じなため、一度作ってしまえばコピペで使い回すことができます。
フレームワークでは、ログイン機能はコマンド1つで作れてしまったりもしますよね。
今回ご紹介したログイン／ログアウトに限らず、新規ユーザー登録機能や、パスワードリマインダー、パスワード変更、お問い合わせフォームなど、Webアプリには資産として使い回せる機能が多くあります。
アプリを多く作れば作るほど、「自分の開発資産」が増え、開発スピードがどんどん上がっていくということですね。
徳田 啓（トクタ ケイ）
Webプログラマー暦20年。自分で使うツールは、基本的に1人でゼロから自作。オールマイティなプログラミングの知識とスキルを学べる「フルスタックエンジニア マスター講座」を開講中。生徒さん1人1人に合わせてしっかりサポートしていきます！
プログラミングの実践的なノウハウを発信中！
ぜひフォローしておいてください。
ぜひフォローしておいてください。
