PHPとHTMLとMySQLで掲示板サイトを作ってみる講座、5回目になります。
前回は、会員情報の登録画面を作りました。
今回は、登録した情報を使ってログインする画面を作ります。
実際のサイトは、下記をクリックすると別ウィンドウで確認できます。
↓↓↓
前回までの作り方は、下記ページの目次からご覧ください。
PHPでログイン画面を作る
ではログイン画面を作っていきます。
前回と同様、CSSは省き、簡易版を作っていきます。
作成するサイトの外見は次のようになります。
コードは次のとおり。
【test4.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 |
<?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(password_verify($_POST['password'],$member['password'])) { $_SESSION['id'] = $member['id']; $_SESSION['time'] =time(); header('Location: test5.php'); exit(); } else { $error['login']='failed'; } } else { $error['login'] ='blank'; } } ?> <!DOCTYPE html> <html lang="ja"> <head> </head> <body> <form action='' method="post"> <p>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; ?> </p><br /> <p>パスワード<input type="password" name="password" style="width:150px" value="<?php echo htmlspecialchars($_POST['password']??"", ENT_QUOTES); ?>"> </p> <div class="login2"><input type="submit" value="ログインする" class="button"></div> </form> </body> </html> |
ポイントごとに解説していきます。
ポイント① MySQLのデータと今回の情報を照らし合わせる
もしEmalとPasswordが入力されたら、MySQLのデータと突き合わせる処理をすすめます。
これが、次のコード。
|
1 2 3 4 5 |
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が空っぽでなければ、MySQLのmembersというデータベースのemailを検索してね。今回入力したのと同じemailとパスワードがあるか見てね。」
という意味です。
ポイント② MySQLのデータと今回の情報を照らし合わせる
emailに加えて、パスワードの照合作業も必要です。
前回はpassword_hash関数を使って、ユーザーが入力したパスワードをハッシュ化しました。
データベースには変換された値が保存されており、管理者でも元のパスワードが分かりません。
mysql上のパスワード
ログインをするときには、password_hashで変換したパスワードを照合するための password_verify関数を使います。
◆password_verify ハッシュ化したパスワードを認証するときにつかう
password_hash と password_verifyはセットで使っていきましょう。
今回のコードは次のように書きます
|
1 2 3 4 5 |
if(password_verify($_POST['password'],$member['password'])) { $_SESSION['id'] = $member['id']; $_SESSION['time'] =time(); header('Location: test5.php'); exit(); |
「入力したパスワードと、データベースのパスワードが正しかったら、ログイン処理をすすめてね。今回のセッションのidが会員idで、セッションの時間は、今の時間ね。」という意味になります。
その後【test5.php】へ移動するように指定しています。
ポイント③ 無事ログインできなかったときのエラーメッセージ表示
空欄であったり、トークンが一致しなかったりでログインができないときは、エラーメッセージを表示するようにします。
エラーメッセージについて指定したのが、if構文の最後のあたり。
|
1 2 3 4 5 6 7 |
} else { $error['login']='failed'; } } else { $error['login'] ='blank'; } } |
入力したemailやパスワードがmysqlの情報と合わない場合のエラーは ’failed’ としています。
フォームが空欄エラーについては’blank’としています。
具体的にはhtmlの中で、エラーメッセージを表示するようにコードを書いています。
htmlでのエラーメッセージ表示設定
htmlでは、$error[‘login’]が出た場合について、メッセージを指定しています。
|
1 2 3 4 5 6 7 8 9 |
<p>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; ?> </p><br /> |
$error[‘login’]が’failed’の場合は、「メールかパスワードが間違っています」と表示するようにしました。
$error[‘login’]が’blank’の場合には、フォームが空欄なので「メールとパスワードを入力してください。」と表示するようにしました。
さいごに
今回の山場はセキュリティ対策のために行うパスワードの認証。
Web上の詐欺の手口が多様化するにつれて、セキュリティ対策も進化していっています。
面倒ではありますが、基本の対策は取っていきましょう。
次回はログイン後の投稿画面の作り方を紹介します。
次回の山場は、これまたセキュリティ対策の【ワンタイムトークン】です。
コメント