PHPとMySQLを使った掲示板の作り方を初心者向けにコード付き解説5【ログイン画面】

PHPとMySQLを使って掲示板サイトを作ってみる講座、5回目です。

今回は、フォーム送信後の確認画面の作り方を解説します。

次のようなログイン画面を作ります。

「どんな掲示板ができるのかな。」と思ったら、下記の紹介動画をクリックしてくださいね。

↓↓↓

なお記事では掲示板に必要なコードはご紹介しますが、デザイン部分は省略しています。

デザイン部分も含めた形で、GitHubにコード公開しています。全体のコードを見たい時に、参考にしてください。

GitHubを見てみる

いいなと思ったら、GitHub右上のStarボタン、クリックしてもらえると、嬉しいです。

前回までの内容
PHPでログイン画面を作る
テスト
さいごに

前回までの内容

掲示板作成の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>

<?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>

<head>

<title>ログイン画面</title>

<style>

.error { color: red;font-size:0.8em; }

</style>

</head>

<body>

<h1>ログイン画面</h1>

<label>

<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>

</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();

// ★ポイント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';
        }

// ★ポイント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_hash パスワードをハッシュ化するときにつかう
◆password_verify ハッシュ化したパスワードを認証するときにつかう

password_hash と password_verifyはセットで使っていきましょう。

ポイント③ 無事ログインできなかったときのエラーメッセージ表示

空欄であったり、トークンが一致しなかったりでログインができないときは、エラーメッセージを表示するようにします。

エラーメッセージについて指定したのが、下記となります。

        } else {
	    // ★ポイント3★
            $error['login']='failed';
        } 
    } else {
        $error['login'] ='blank';
    }

} 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'] =='blank')): ?>

<p class="error">メールとパスワードを入力してください</p>

<?php endif; ?>

メールまたはパスワードが間違っている場合にエラーを表示するコードは下記です。

<?php if (isset($error['login']) && $error['login'] =='failed'): ?>
<p class="error">メールかパスワードが間違っています</p>
<?php endif; ?>

<?php if (isset($error['login']) && $error['login'] =='failed'): ?>

<p class="error">メールかパスワードが間違っています</p>

<?php endif; ?>

テスト

今の段階で一度、テストしてみましょう。

XAMPPを起動した状態で、下記のURLを開きます。

http://localhost/forum/login.php

データベースに登録済みのmember情報をいれたり、わざと違う値をいれたりして、テストしてみましょう。データベースにない値をいれると、次のように、エラー画面が表示されます。

さいごに

今回の山場はセキュリティ対策のために行うパスワードの認証だったかと思います。

Web上の詐欺の手口が多様化しているので、ユーザーを守るために、セキュリティ対策をしっかり行う必要があります。

面倒ではありますが、基本の対策は行っていきましょう。

次回はログイン後の投稿画面の作り方を紹介します。

次回の山場は、これまたセキュリティ対策の【ワンタイムトークン】です。

PHPとMySQLを使った掲示板の作り方を初心者向けにコード付き解説6【投稿画面】

PHPとMySQLを使っていちから掲示板を作ってみる講座、6回目になりました。今回はログイン後の投稿画面を作ります。次のような画面を作ります。 CSRF対策となるワンタイムトークンの設定方法や、投稿一覧画面の表示方法な...