PHPとMySQLを使って掲示板サイトを作ってみる講座、5回目です。
今回は、フォーム送信後の確認画面の作り方を解説します。
次のようなログイン画面を作ります。
「どんな掲示板ができるのかな。」と思ったら、下記の紹介動画をクリックしてくださいね。
↓↓↓
なお記事では掲示板に必要なコードはご紹介しますが、デザイン部分は省略しています。
デザイン部分も含めた形で、GitHubにコード公開しています。全体のコードを見たい時に、参考にしてください。
いいなと思ったら、GitHub右上のStarボタン、クリックしてもらえると、嬉しいです。
前回までの内容
掲示板作成の7ステップの目次と概要はこちらをご覧ください。
- 概要説明
- ① 設計図を作って、データベースの準備をしよう
- ②会員登録画面をつくる 前編
- ③会員登録画面をつくる 後編
- ④会員登録確認画面をつくる
- ⑤ログイン画面をつくる⇒今ここ
- ⑥投稿画面をつくる
- ⑦削除画面をつくる
PHPでログイン画面を作る
では確認画面を作っていきましょう。
まずはC:\xampp\htdocs\forumの中に、login.phpファイルを作成します。この中に、下記コードを追加します。
【C:\xampp\htdocs\forum\login.php】
<?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★
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に加えて、パスワードの照合作業も必要です。下記を実施します。
// ★ポイント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はセットで使っていきましょう。
ポイント③ 無事ログインできなかったときのエラーメッセージ表示
空欄であったり、トークンが一致しなかったりでログインができないときは、エラーメッセージを表示するようにします。
エラーメッセージについて指定したのが、下記となります。
} else {
// ★ポイント3★
$error['login']='failed';
}
} else {
$error['login'] ='blank';
}
入力したemailやパスワードがデータベースの情報と合わない場合のエラーは ’failed’ としています。
フォームが空欄エラーについては’blank’としています。
具体的にはhtmlの中で、エラーメッセージを表示するようにコードを書いています。
空欄の場合にエラーを表示するコードは下記です。
<?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; ?>
テスト
今の段階で一度、テストしてみましょう。
XAMPPを起動した状態で、下記のURLを開きます。
データベースに登録済みのmember情報をいれたり、わざと違う値をいれたりして、テストしてみましょう。データベースにない値をいれると、次のように、エラー画面が表示されます。
さいごに
今回の山場はセキュリティ対策のために行うパスワードの認証だったかと思います。
Web上の詐欺の手口が多様化しているので、ユーザーを守るために、セキュリティ対策をしっかり行う必要があります。
面倒ではありますが、基本の対策は行っていきましょう。
次回はログイン後の投稿画面の作り方を紹介します。
次回の山場は、これまたセキュリティ対策の【ワンタイムトークン】です。
コメント