PHPとMySQLを使って掲示板サイトを作ってみる講座、5回目です。
今回は、フォーム送信後の確認画面の作り方を解説します。
次のようなログイン画面を作ります。
「どんな掲示板ができるのかな。」と思ったら、下記の紹介動画をクリックしてくださいね。
↓↓↓
なお記事では掲示板に必要なコードはご紹介しますが、デザイン部分は省略しています。
デザイン部分も含めた形で、GitHubにコード公開しています。全体のコードを見たい時に、参考にしてください。
いいなと思ったら、GitHub右上のStarボタン、クリックしてもらえると、嬉しいです。
前回までの内容
掲示板作成の7ステップの目次と概要はこちらをご覧ください。
- 概要説明
- ① 設計図を作って、データベースの準備をしよう
- ②会員登録画面をつくる 前編
- ③会員登録画面をつくる 後編
- ④会員登録確認画面をつくる
- ⑤ログイン画面をつくる⇒今ここ
- ⑥投稿画面をつくる
- ⑦削除画面をつくる
PHPでログイン画面を作る
では確認画面を作っていきましょう。
まずはC:\xampp\htdocs\forumの中に、login.phpファイルを作成します。この中に、下記コードを追加します。
【C:\xampp\htdocs\forum\login.php】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<?php session_start(); require('dbconnect.php'); // ★ポイント1★ if (!empty($_POST)) { if (($_POST['email'] != '') && ($_POST['password'] != '')) { $login = $db->prepare('SELECT * FROM members WHERE email=?'); $login->execute(array($_POST['email'])); $member=$login->fetch(); // 認証 if ($member != false && password_verify($_POST['password'],$member['password'])) { $_SESSION['id'] = $member['id']; $_SESSION['time'] =time(); header('Location: post.php'); exit(); } else { $error['login']='failed'; } } else { $error['login'] ='blank'; } } ?> <!DOCTYPE html> <html lang="ja"> <head> <title>ログイン画面</title> <style> .error { color: red;font-size:0.8em; } </style> </head> <body> <h1>ログイン画面</h1> <form action='' method="post"> <label> email <input type="text" name="email" style="width:150px" value="<?php echo htmlspecialchars($_POST['email']??"", ENT_QUOTES); ?>"> <?php if (isset($error['login']) && ($error['login'] =='blank')): ?> <p class="error">メールとパスワードを入力してください</p> <?php endif; ?> <?php if (isset($error['login']) && $error['login'] =='failed'): ?> <p class="error">メールかパスワードが間違っています</p> <?php endif; ?> </label> <br /> <label> パスワード <input type="password" name="password" style="width:150px" value="<?php echo htmlspecialchars($_POST['password']??"", ENT_QUOTES); ?>"> </label> <div class="login2"> <input type="submit" value="ログインする" class="button"> </div> </form> <a href="register.php">ユーザ登録する</a> </body> </html> |
ポイントごとに解説していきます。
ポイント① データベースのデータと今回の情報を照らし合わせる
Emalとパスワードが入力されたら、データベースと突き合わせる処理を行います。
まずはメールです。
|
1 2 3 4 5 6 |
// ★ポイント1★ if (!empty($_POST)) { if (($_POST['email'] != '') && ($_POST['password'] != '')) { $login = $db->prepare('SELECT * FROM members WHERE email=?'); $login->execute(array($_POST['email'])); $member=$login->fetch(); |
これによって、emailとpasswordが空でなければ、処理が実行されます。
まず’members’テーブルから、指定された’email’を持つ行を取得する準備のためのコードが書かれています。email=?となっています。
そのあとの executeメソッドでは、?部分にいれる値を配列として受けわたしています。具体的には、$_POST[‘email’]が入っています。これはフォームを通じて投稿されたメールアドレスです。
最後にfetchメソッドを使って、結果を取得しています。
つまり、今回フォームを通じて投稿されたメールアドレスと同じメールアドレスをもつメンバーを、データベースから取得してきて、$membersに代入しています。
ポイント② データベースのデータと今回の情報を照らし合わせる
emailに加えて、パスワードの照合作業も必要です。下記を実施します。
|
1 2 3 4 5 6 7 8 9 |
// ★ポイント2★ if ($member != false && password_verify($_POST['password'],$member['password'])) { $_SESSION['id'] = $member['id']; $_SESSION['time'] =time(); header('Location: post.php'); exit(); } else { $error['login']='failed'; } |
「$memberがfalseではなく、入力したパスワードと、$memberのパスワードが同じなら、ログイン処理をすすめてね。今回のセッションのidが$memberのidで、セッションの時間は、今の時間ね。」という意味になります。
処理後、つまりログイン後は、post.phpに処理が受け渡されます。
なお、前回はpassword_hash関数を使って、ユーザーが入力したパスワードをハッシュ化しました。
データベースには変換された値が保存されており、管理者でも元のパスワードが分かりません。
mysql上のパスワード
ログインをするときには、password_hashで変換したパスワードを照合するために、今回のように password_verify関数を使います。
◆password_verify ハッシュ化したパスワードを認証するときにつかう
password_hash と password_verifyはセットで使っていきましょう。
ポイント③ 無事ログインできなかったときのエラーメッセージ表示
空欄であったり、トークンが一致しなかったりでログインができないときは、エラーメッセージを表示するようにします。
エラーメッセージについて指定したのが、下記となります。
|
1 2 3 4 5 6 7 |
} else { // ★ポイント3★ $error['login']='failed'; } } else { $error['login'] ='blank'; } |
入力したemailやパスワードがデータベースの情報と合わない場合のエラーは ’failed’ としています。
フォームが空欄エラーについては’blank’としています。
具体的にはhtmlの中で、エラーメッセージを表示するようにコードを書いています。
空欄の場合にエラーを表示するコードは下記です。
|
1 2 3 |
<?php if (isset($error['login']) && ($error['login'] =='blank')): ?> <p class="error">メールとパスワードを入力してください</p> <?php endif; ?> |
メールまたはパスワードが間違っている場合にエラーを表示するコードは下記です。
|
1 2 3 |
<?php if (isset($error['login']) && $error['login'] =='failed'): ?> <p class="error">メールかパスワードが間違っています</p> <?php endif; ?> |
テスト
今の段階で一度、テストしてみましょう。
XAMPPを起動した状態で、下記のURLを開きます。
データベースに登録済みのmember情報をいれたり、わざと違う値をいれたりして、テストしてみましょう。データベースにない値をいれると、次のように、エラー画面が表示されます。
さいごに
今回の山場はセキュリティ対策のために行うパスワードの認証だったかと思います。
Web上の詐欺の手口が多様化しているので、ユーザーを守るために、セキュリティ対策をしっかり行う必要があります。
面倒ではありますが、基本の対策は行っていきましょう。
次回はログイン後の投稿画面の作り方を紹介します。
次回の山場は、これまたセキュリティ対策の【ワンタイムトークン】です。
コメント