Webサービスで必要不可欠なパスワードリマインダー実装のポイントまとめ
Webサービスでパスワードリマインダーを実装したい人
「パスワードリマインダーってそもそもどういうもの？」
「パスワードリマインダーってどうやって実装するの？」
こういった疑問にお答えします。
本記事の内容
- パスワードリマインダー機能とは
- パスワードリマインダー実装時のポイント
- パスワードリマインダー実装の流れ
こんにちは、mineです。
Web制作歴は7年になります。
登録制のWebサービスってたくさんありますよね。
Amazonしかり、TwitterなどのSNSとかもそうですね。
しかし、会員登録したはいいけど自分のパスワードが分からないという経験がある方も多いのでは？
非常に多くの会員登録系Webサイトのログイン画面ページには、パスワードを忘れた人への救済措置としてパスワードリマインダー機能を設けています。
Webサイト制作者の立場に立ってみてパスワードリマインダー機能実装の流れとポイントについて考えてみました。
初めてパスワードリマインダーを実装するという方は参考までにどうぞ。
パスワードリマインダー機能とは
パスワードリマインダー機能は「秘密の質問」などといったユーザ本人のみがわかる情報を入力することで、パスワード変更を可能にするという機能です。
パスワードリマインダー実装時のポイント
パスワードリマインダー実装で重要になるのはパスワードの秘匿性を高めることです。できるだけパスワードを第三者に見られないようにしなければいけません。
パスワードリマインダー実装の流れ
- パスワードをメールに直接記載することは絶対にNG
- パスワード変更用のワンタイムURLと認証コードの二重照合
- メールアドレス送信フォームを設置する
- メールアドレスを照合して、ワンタイムURLと認証コードを発行
- パスワード変更フォームを設置する
- パスワード変更フォームへの入力内容をチェックして、パスワードを変更する
パスワードをメールに直接記載することは絶対にNG
絶対にやってはいけないことは、登録メールアドレスに対して、生のパスワードもしくは仮パスワードを記載したメールを送信してしまうことです。
パスワードが記載されたメールが第三者に盗聴・盗み見されてしまうとアカウントを乗っ取られます。
パスワード変更用のワンタイムURLと認証コードの二重照合
メールに直接パスワードは記載することは絶対にNGであるため、パスワード変更用URL（ワンタイムURL）を発行し、ユーザーがURLにアクセスして新しいパスワードを再設定する方式をとることにします。
ただ、パスワード変更用URLにアクセスして無条件にパスワード変更を許可してしまうと、メールの中身を第三者が見て先にパスワードを変更されてアカウントを乗っ取られる可能性があります。
パスワード変更用URLに加えて、認証コード（メールアドレスを入力した直後にだけ表示させる）を発行し、パスワード再設定時に新パスワードと共に認証コードを入力することでパスワード再設定を可能にします。
パスワードリマインダー実装の流れ
先述した通り、二重照合によりパスワードリマインダー（パスワード再設定機能）実装することにします。
使用する言語として、Webプログラミング初心者にも優しい言語PHPで実装する場合を考えます。
メールアドレス送信フォームを設置する
メールアドレス送信フォームを設置するためのページを用意して、メールアドレス送信フォーム（メールアドレス入力欄と送信ボタン）を設置します。
メールアドレスを照合して、ワンタイムURLと認証コードを発行
メールアドレスを入力して、送信ボタンがクリックされたら、入力されたメールアドレスが登録されているかどうか、データベース内のユーザー情報管理テーブルで照合します。
（JavaScriptと正規表現を使って、ちゃんとメールアドレスの形式で入力されているかチェックしておくとなお良し。）
ユーザー情報管理テーブル内に存在していない場合
「このメールアドレスは登録されていません」といったエラー文を画面に表示させる。
ユーザー情報管理テーブル内に存在している場合
ワンタイムURL作成用のランダムな英数字（30桁くらいあれば十分かと思います）と、認証コード（数字6桁くらい）を発行して、ユーザー情報管理テーブル中の該当するメールアドレス情報のレコードに保存する。
さらに、ワンタイムパスワードに有効期限を設定したい時、例えば有効期限をパスワード変更申請時から24時間にしたい場合、ワンタイムURLの英数字と認証コードの発行した日時に1日足してレコードに保存しておきます。
該当のメールアドレスにランダムな英数字を使ったワンタイムURLを掲載したメールを送信して、ブラウザの画面には「パスワード変更用URLを掲載したメールを送信しました」といったメッセージと、認証コードを表示します。
パスワード変更フォームを設置する
次は、ワンタイムURL（パスワード変更用URL）のページを作成します。
ワンタイムパスワードにアクセスされたときに、ワンタイムURLに使用されているランダムな文字列をユーザー情報管理テーブルで検索して、一致してかつアクセスされた日時とレコードに保存された日時を比較した時に「アクセス日時 > レコードの日時」であれば、「有効期限が切れています」というメッセージを画面に表示します。
ページを作成したら、パスワード変更フォームを設置します。
入力項目としては下記の通りです。
入力項目
- パスワード
- パスワード（確認用）
- 認証コード
パスワード変更フォームへの入力内容をチェックして、パスワードを変更する
入力チェックで引っかかる場合
2回入力したパスワードが一致するかどうかチェックして、一致しなかったら「パスワードが正しくありません」というエラー文を画面に表示します。
入力された認証コードと、ワンタイムパスワードで使用されている文字列をキーに、ユーザー情報管理テーブルを検索します。
データベースの認証コードが間違っていたら「認証コードが間違っています」エラー文を画面に表示します。
入力チェックがOKだった場合
パスワード、認証コードが正しく入力されていれば、データベースのユーザー情報管理テーブルのパスワードを新しいパスワードに上書きします。そして、ワンタイムURL作成用のランダムな英数字と、認証コード、有効期限を破棄します。
最後に「パスワードの変更が完了しました」というメッセージを表示して、ログイン画面へのリンクを置くなどしてログインを促します（もしくはパスワード変更のタイミングでログイン状態にする）。
まとめ
今回のパスワードリマインダーの実装の流れは、結構大まかで抽象的な内容だとは思いますが、なんとなく考え方をつかんでもらえれば幸いです。
おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話
おすすめ記事 YouTubeライブで気をつけるべきチャットへのコメントマナーまとめ