はじめに
前回の記事でログイン機能を実装しました。
https://qiita.com/N46_myHearter/items/ae4f776790c4c4666a66
この記事では、ログインする際に使用するアカウントをデータベースに登録する機能を実装してみたいと思います。
###基本的な流れ
- 登録するユーザ情報(ID、パスワード、ユーザ名)を入力します。
- 入力値チェックを行う。
- ユーザ情報をDBに登録する。
簡易なので...笑笑
データベース
今回は、MySQLを使用しています。
データ項目は、ID、パスワード、ユーザ名の3つのみで構成しています。
プライマリーキーにIDを指定しています。
パスワードは、ハッシュ化で暗号化。(調べた時にハッシュ化だと簡単に出来たから笑笑)
該当ソースコード
1. register.php
アカウントを登録するための入力画面です。
入力項目は、ID、名前、パスワード(確認のため2回入力)です。
入力項目すべて入力されているか、2回入力したパスワードが一致しているか、
パスワードの強度は大丈夫か(強度が弱いと警告)を確認して、アカウント登録確認画面に遷移します。
パスワード強度チェックは以下のHPにあるオープンソースであるpasswordchecker.jsを利用しています。
出典 https://www.websec-room.com/passswordchecker
アカウント登録画面(register.php)
<?php
session_start();
header("Content-type: text/html; charset=utf-8");
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
<meta charset="UTF-8">
<script src="passwordchecker.js" type="text/javascript"></script>
<script src="common.js" type="text/javascript"></script>
<script type="text/javascript">
/*
* 登録前チェック
*/
function conrimMessage() {
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var pass = document.getElementById("password").value;
var conf = document.getElementById("confirm_password").value;
//必須チェック
if((id == "") || (name == "") || (pass == "") || (conf == "")) {
alert("必須項目が入力されていません。");
return false;
}
//パスワードチェック
if (pass != conf) {
alert("パスワードが一致していません。");
return false;
}
if (passwordLevel < 3) {
return confirm("パスワード強度が弱いですがよいですか？");
}
return true;
}
</script>
</head>
<div class="form-wrapper">
<h1>アカウント登録</h1>
<?php
if (isset($_SESSION["error_status"])) {
if ($_SESSION["error_status"] == 1) {
echo "<h2 style='color:red;'>入力内容に誤りがあります。</h2>";
}
if ($_SESSION["error_status"] == 2) {
echo "<h2 style='color:red;'>IDは既に登録されています。</h2>";
}
if ($_SESSION["error_status"] == 3) {
echo "<h2 style='color:red;'>タイムアウトか不正な URL です。</h2>";
}
if ($_SESSION["error_status"] == 4) {
echo "<h2 style='color:red;'>登録に失敗しました。</h2>";
}
if ($_SESSION["error_status"] == 5) {
echo "<h2 style='color:red;'>パスワードは既に登録されています。</h2>";
}
}
?>
<form action="register_check.php" method="post" onsubmit="return conrimMessage();">
<div class="form-item">
<label for="ID"></label>
<input type="text" name="id" id="id" required="required" placeholder="ID">
</div>
<div class="form-item">
<label for="NAME"></label>
<input type="text" name="name" id="name" required="required" placeholder="名前">
</div>
<div class="form-item">
<label for="password"></label>
<input type="password" name="password" required="required" placeholder="パスワード">
</div>
<div class="form-item">
<label for="password"></label>
<input type="password" name="confirm_password" id="confirm_password" required="required" placeholder="パスワード(確認)">
</div>
<div class="button-panel">
<input type="submit" class="button" title="登録" value="登録">
</div>
</form>
<div class="form-footer">
<p><a href="/login.php">戻る</a></p>
</div>
</div>
</html>
2. register_check.php
本当にアカウント登録していいのか再度確認する画面です。
また、入力したアカウント情報がDBに既に存在していないかをチェックします。
既に登録されていた場合はエラーを返します。
アカウント登録確認画面(register_check.php)
<?php
require_once("function.php");
session_start();
header("Content-type: text/html; charset=utf-8");
$_SESSION['token'] = get_csrf_token();
$id = $_POST['id'];
$password = $_POST['password'];
$name = $_POST['name'];
$confirm_password = $_POST['confirm_password'];
if ($password != $confirm_password) {
//パスワード不一致
$_SESSION["error_status"] = 1;
header("HTTP/1.1 301 Moved Permanently");
header("Location: register.php");
exit();
}
//IDチェック
//DB接続
try {
/*dbname: test
host: localhost (DBをローカル環境に置いている)
username: root
password: '' (未設定)
*/
$pdo = new PDO('mysql:dbname=test;host=localhost;charset=utf8mb4', 'root', '',
[
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
]
);
$stmt = $pdo->query('SELECT id, password FROM USER');
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$db_id = $row["id"];
$db_password = $row["password"];
//既にIDが登録されていた
if ($db_id == $id) {
$_SESSION["error_status"] = 2;
header("HTTP/1.1 301 Moved Permanently");
header("Location: register.php");
exit();
}
//エラー情報リセット
$_SESSION["error_status"] = 0;
}
} catch (PDOException $e) {
exit('データベース接続失敗。'.$e->getMessage());
}
?>
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
<meta charset="utf-8">
</head>
<html lang="ja">
<div class="form-wrapper">
<h1>登録確認</h1>
<h2>アカウント登録しますか？</h2>
<form action="register_submit.php" method="post">
<table border="0">
<input type="hidden" name="id" value="<?php echo htmlspecialchars($id , ENT_QUOTES, "UTF-8") ?>">
<input type="hidden" name="name" value="<?php echo htmlspecialchars($name , ENT_QUOTES, "UTF-8") ?>">
<input type="hidden" name="password" value="<?php echo htmlspecialchars($password , ENT_QUOTES, "UTF-8") ?>">
<input type="hidden" name="token" value="<?php echo htmlspecialchars($_SESSION['token'] , ENT_QUOTES, "UTF-8") ?>">
<div class="button-panel">
<input type="submit" class="button" title="登録" value="登録">
</div>
</form>
<div class="form-footer">
<p><a href="/register.php">戻る</a></p>
</div>
</div>
</html>
3. register_submit.php
実際にアカウント登録をして、登録完了を知らせる画面です。
DBに入力したユーザ情報を格納します。
その時、パスワードはハッシュ化で暗号化します。
アカウント登録完了画面(register_submit.php)
<?php
require_once("function.php");
session_start();
header("Content-type: text/html; charset=utf-8");
//CSRF チェック
if ($_SESSION['token'] != $_POST['token']) {
$_SESSION = array();
session_destroy();
session_start();
$_SESSION["error_status"] = 2;
header("HTTP/1.1 301 Moved Permanently");
header("Location: login.php");
exit();
}
//エラー情報のリセット
$_SESSION["error_status"] = 0;
$id = $_POST['id'];
$password = $_POST['password'];
$name = $_POST['name'];
// ハッシュを作る
$hash = password_hash($password, PASSWORD_BCRYPT);
//DB接続
try {
/*dbname: test
host: localhost (DBをローカル環境に置いている)
username: root
password: '' (未設定)
*/
$pdo = new PDO('mysql:dbname=test;host=localhost;charset=utf8mb4', 'root', '',
[
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
]
);
//パラメーターの型を指定
$stmt = $pdo->prepare('INSERT INTO USER (ID, NAME, PASSWORD) VALUES (:id, :name, :password)');
$stmt->bindParam(':id', $id, PDO::PARAM_STR);
$stmt->bindParam(':name', $name, PDO::PARAM_STR);
$stmt->bindParam(':password', $hash, PDO::PARAM_STR);
$stmt->execute();
} catch (PDOException $e) {
exit('データベース接続失敗。'.$e->getMessage());
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
<meta charset="utf-8">
</head>
<<div class="form-wrapper">
<h1>アカウント登録完了</h1>
アカウント登録が終了しました。<br>
ログイン画面からログインしてください。<br><br>
<div class="form-footer">
<p><a href="/login.php">ログイン画面に戻る</a></p>
</div>
</div>
</html>
4. function.php
以下の前回の記事に掲載済み。
https://qiita.com/N46_myHearter/items/ae4f776790c4c4666a66
環境
windows10 64bit
実行環境: xampp (mysql、php、apache等をまとめてインストールでき、インストールも簡単なので)
おわりに
抜けている箇所がありましたら、コメント欄で教えていただくとありがたいです。