前回に引き続き、電子実験ノートの自作の記事です。
今回は、電子実験ノートにログイン機能を実装します。
特に、研究グループ全体で電子実験ノートをシェアする場合など、ログイン機能や権限の付与は非常に重要となってきます。
また、自分で実際にログイン機能を実装することによって、ウェブサイトがどのような仕組みで動いているのかも分かってくると思います。
参考：電子実験ノートを自作してみた！導入コストゼロ！（1/5）
参考：リアルタイムで計算状況を表示するシステムの構築！【電子実験ノートを自作してみた！導入コストゼロ！】（2/5）
参考：CRUD を実装！電子実験ノートを自作してみた！導入コストゼロ！（3/5）
参考：PHP でブラウザから job を投入する。電子実験ノートを自作してみた！導入コストゼロ！（4/5）
構成
ログイン機能の実装は、非常に簡単です。以下の 3 つのステップが必要です。
- ユーザー名とパスワードを保存するデータベースを作る（MySQL）。
- html と PHP でユーザー登録ページを作成する。
- html と PHP でログインページを作成する。
- ログイン情報を session に保存し、全てのページで session の確認を行う。
- ログアウトページを作る。
データベースの設定
第二回目の記事では report というノート情報を保存するデータベースを作成しました。今回は、users という user名とパスワード情報を保存するデータベースを作成しましょう。
下図のように、user_id, user_name, user_password, created の 4 項目を設定してください。ここにさらに email などを付け加えても良いでしょう。
user_id は AUTO INCREMENT に設定しておいてください。
「データベースにパスワードを登録するのって危険じゃない？」「管理者は全員のパスワードが見れるってこと？」と不安に思われる方もいると思いますが、そういうことはありません。
一般的に、パスワードは暗号化された上でデータベースに登録されます。
MD5 や SHA-1 や SHA-256 などのハッシュ関数が非常にお手軽です。
例えば、”password” という文字列を MD5 で処理すると “5f4dcc3b5aa765d61d8327deb882cf99” という文字列に暗号化されます。データベースには、この文字列を登録します。
こうしておくと、万が一 MySQL をクラックされてもパスワードがバレにくくなります。
ユーザーログインの際には、ユーザーが入力したパスワードを MD5 で処理し、それがデータベース上の文字列と一致しているかを確認します。
とはいえ、ハッシュ関数だけだとブルートフォースでパスワードを調べることが出来てしまいます。（研究グループ内で使うだけならハッシュ化だけで十分だと思います。）
もう一段階上のセキュリティを求めるならば、crypt() 関数を使った上で、ソルトを付け加えましょう。（参考文献１参照）
ユーザー登録ページ
次にユーザー登録ページを作ります。register.php というファイルを作り、これまでと同様に <form> タグで登録フォームを作ります。
そして、入力された user 名がすでに MySQL に登録されていないかを確認後に、MySQL に登録します。
しかし、この方法だと無限にアカウント作成を行えてしまいます。
研究グループ内部で使うだけの電子実験ノートなら上記のコードだけで十分ですが、ウェブアプリを作る際には、もう一段階認証を追加した方が良いです。
例えば、”表示されている文字と同じ文字を入力してください”とか”信号機の写っている画像を全て選択してください”とか”確認メールのリンクをクリックしてください”などです。
入力フォームの作成
<form action="index.php" method="post" autocomplete="off">
<input type="text" name="username" placeholder="ユーザー名" />
<input type="password" name="password" placeholder="パスワード" />
<input type="submit" value="ログイン" />
続いて、入力値が正しいかどうかを照合します。まずは、$_POST 変数が空かどうかをチェックします。次に、SQL 文で入力された値に一致するアカウントがデータベース上にあるかを照合します。
照合の結果正しければ、$_SESSION[‘logged_in’] と $_SESSION[‘username’] に値を代入し、ログイン済みであるようにします。
if(isset($_POST['username'], $_POST['password'])){
$username = $_POST['username'];
$password = md5($_POST['password']);
if(empty($username) or empty($password)){
$error = 'ユーザー名またはパスワードが未入力です！';
}else{
$query = $pdo->prepare('SELECT * FROM users WHERE user_name = ? AND user_password = ?');
$query->bindValue(1,$username);
$query->bindValue(2,$password);
$query->execute();
$num = $query->rowCount();
if($num == 1){
$_SESSION['logged_in'] = true;
$_SESSION['username'] = $username;
header('Location: index.php');
}else{
$error = 'ユーザー名またはパスワードのいずれかが間違っております。';
}
}
}
各ページでパスワード認証
各ページの <html>タグの前に以下のような php タグを挿入します。
<?php
session_start();
include_once('../include/connection.php');
if(isset($_SESSION['logged_in'])){
?>
これは、$_SESSION[‘logged_in’] 変数の中身があればログイン状態であると判断し、ページを表示するという意味です。
SESSION 変数を取り扱うには、session_start(); しておく必要があります。また、これはページの一番最初に書かなくてはいけないという決まりがあります。
PHP は、大変面白いことに飛び飛びで php コードを html 中に挿入することができます。上記の if 文の続きを各ページの一番最後に記述しましょう。
<?php
}else{
header('Location: index.php');
}
?>
これは、$_SESSION[‘logged_in’] 変数が空の場合は、index.php ページ（つまりログインページ）に移動するという意味です。
また、各ページの左上にユーザー名を表示させる部分があると思います。
前回までに配布したファイルでは、
<div id="channel_cntl"><div id="channel_dirs">
ユーザー名:
</div></div>
のようになっていましたが、以下のように書き換えるとユーザー名が表示されるようになります。
<div id="channel_cntl"><div id="channel_dirs">
ユーザー名: <?php print($_SESSION['username']); ?>
</div></div>
ログアウトページ
ログアウトは、以下のように session を破壊すれば完了です。以下のコードを logout.php として保存し、ログアウトボタンにリンクを貼れば実装完了です。
<?php
session_start();
session_destroy();
header('Location: index.php')
?>
権限設定
ログイン機能を実装したら、権限の設定を行いましょう。
ノートの情報が入っている report データベースに user_id を追加しましょう。
そして、ログイン時に SESSION に id も格納するようにしましょう。そして、ノートを書く時に一緒に user_id 情報も送信するようにします。
計算状況一覧では、自分の job の情報だけ表示される表とグループ全体の情報が表示される表の両方の表示を切り替えられるようにすると良いかもしれません。
また、もう少し管理の厳しい研究グループ向けに、自分のノートは自分と上司のみしか見れないという設定にも出来ます。
また、上司のチェックを受ける機能なども追加可能です。
また、edit.php では、編入しようとしているノートの user_id と $_SESSION[‘user_id’] が一致するときのみ編集可にするなど出来ます。
ログイン機能をつけると一気に電子実験ノートっぽくなりますね。
全５回のまとめ
ここまで、５回に渡って電子実験ノートの作り方を解説してきました。
「実験ノート類は退職後５年保存」などの面倒なルールも電子版なら場所を取ることもなく、簡単に対応可能です。
こういったアプリの開発はどこから手をつけて良いのか初めてだとわからないと思いますが、技術的には PHP と MySQL を組み合わせただけですので、非常に簡単です。
非常にざっくりとした解説で分かりづらかったと思いますが、文字でうまく伝えるには限界があります。将来的には、電子実験ノートの作り方は動画化したいと考えております。
今回のシリーズでは、必要最低限あった方が良い機能のみ実装しました。
もしも、実装してほしい機能などありましたら、コメント欄に書いてください。