今日は、WEBサービスの基本中の基本でもある、ログイン機能を作っていきましょう。
会員登録とログイン機能ができれば、応用で様々なWEBアプリケーションを作ることが出来ます。
会員登録については、前回作りましたので、まだの方は、前回の項目からご覧ください。
ログイン機能のポイントは2つです。
まずログイン機能は、メールアドレスとパスワードを入力します。
そして、該当のメールアドレスがデータベースにあるかどうかを調べます。
もしメールアドレスが存在したら、今度はパスワードが一致しているかどうかを調べましょう。
データベースの中のパスワードは暗号化されています。
暗号化した結果が同じかどうかを調べる必要があります。
結果、どっちも一致していたら、セッションにログインされたことを示す値を入力します。
セッションとはクッキーに似た、データを入れておく箱のようなイメージです。
画面遷移しても、データが保持されるため、ログインされたかどうかを判断するには最適です。
- メールアドレスがDBにあるか確認する
- 暗号化されたパスワードと入力されたパスワードが一緒か確認する
- 上記2つがOKなら、セッションにログインの値を入れる
- セッションへの値入力を持って、ログイン済みと判断する
以上の流れで、ログインを実行していきます。
では、さっそく実践に入っていきましょう。
ミッションの内容
下記のファイルを再現してみてください。
基本的には、前回のファイルのアップデートです。
まず、ソースコードの解説を読み、自分自信で実装してみてください。
どうしても分からない場合は解答ファイルを参考にしましょう。
ソースコードの説明を下記に記載します。
まず一通り目を通して、同時に自分のエディタで試してみてください。
ソースコードの解説
最初に全体のソースコードを見ていきましょう。
<?php
//セッションをスタートさせます。
//セッションとは一時的にデータを保存しておく機能です。
//変数は画面遷移するとデータが破棄されますが、セッションは破棄されません。
//Cookieのようなものですが、意味合いは異なります。
//セッションの役割とCookieとの違いはまた別途説明します。
session_start();
//データベースの情報を読み込みます。
require_once "functions/db.php";
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
//メールアドレスとパスワードを受け取ります。
$mail = htmlspecialchars($_POST['mail'], ENT_QUOTES);
$password = htmlspecialchars($_POST['password'], ENT_QUOTES);
//メールアドレスバリデーションチェックの関数です。
//問題なければtrueが返され、何か問題があればfalseが返されます。
function mailcheck($mail){
if(preg_match('/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/iD', $mail)){
return 'true';
}else{
return 'false';
}
};
//メールアドレスが空じゃなかったら、、
if(!empty($mail)){
//バリデーションチェックを実行。
$mailresult = mailcheck($mail);
}else{
//空だったら$mailresultにfalseを入力。
$mailresult = "false";
};
//メールアドレスに特に問題なければ、、、
if($mailresult == "true"){
//データベースからメールアドレスを元にデータを呼び出します。
$userdataEdit = "select * from userdata where mail = '".$mail."' order by id DESC";
$userdataEdit = mysqli_query($mysqli,$userdataEdit);
//ユーザーのデータを変数に渡していきます。
while ($userdataEditArray = mysqli_fetch_assoc($userdataEdit)) {
$userid = $userdataEditArray["id"];
$name = $userdataEditArray["name"];
$age = $userdataEditArray["age"];
$skill = $userdataEditArray["skill"];
$mail = $userdataEditArray["mail"];
$hashpass = $userdataEditArray["password"];
};
};
//入力されたパスワードと暗号化されたパスワードを比較。
if(password_verify($_POST['password'], $hashpass)){
//もし一致したら、trueを返します。
$passresult = "true";
}else{
//一致しなければ、falseを返します。
$passresult = "false";
};
//メールアドレスとパスワード、ともに問題なければ、、
if($mailresult!=="false"&&$passresult!=="false"){
//セッションにtrueを入れてログイン済みの印を残します。
//セッションにtrueが保存されていればログイン済み、という意味です。
$_SESSION["login_pass"] = "true";
//よく利用するuseridも別のセッションに保存しておきましょう。
$_SESSION["userid"] = $userid;
//ログインが成功したら、ログイン完了メッセージと名前を表示。
echo $name."さんログイン完了<br>";
};
};
?>
<div style="padding-bottom:15px;">
<a href="https://base91.net/mission/php/9/">新規登録</a>
</div>
<h1>ログインフォーム</h1>
<form method="post" action="">
<input type="text" name="mail" placeholder="メールアドレス" value="<?php echo $mail; ?>" /><br/>
<!--もし$mailresultがfalseの場合はエラー表示。-->
<?php if($mailresult == "false"){echo "メールアドレスにエラーがあります。<br/>";}; ?>
<input type="password" name="password" placeholder="パスワード" value="" /><br/>
<!--もし$passresultがfalseの場合はエラー表示。-->
<?php if($passresult == "false"){echo "パスワードにエラーがあります。<br/>";}; ?>
<input type="submit" name="loginBtn" value="ログイン" />
</form>
以上のような流れになっています。
まずは、HTMLから詳しく見ていきましょう。
<div style="padding-bottom:15px;">
<a href="https://base91.net/mission/php/9/">新規登録</a>
</div>
<h1>ログインフォーム</h1>
<form method="post" action="">
<input type="text" name="mail" placeholder="メールアドレス" value="<?php echo $mail; ?>" /><br/>
<!--もし$mailresultがfalseの場合はエラー表示。-->
<?php if($mailresult == "false"){echo "メールアドレスにエラーがあります。<br/>";}; ?>
<input type="password" name="password" placeholder="パスワード" value="" /><br/>
<!--もし$passresultがfalseの場合はエラー表示。-->
<?php if($passresult == "false"){echo "パスワードにエラーがあります。<br/>";}; ?>
<input type="submit" name="loginBtn" value="ログイン" />
</form>
HTMLは前回とほぼ変わらず、項目数が減っただけです。
ログインですので、メールアドレスとパスワードの入力欄だけあれば十分ですね。
次はphpの処理についてみていきます。
<?php
//セッションをスタートさせます。
//セッションとは一時的にデータを保存していく機能です。
//変数は画面遷移するとデータが破棄されますが、セッションは破棄されません。
//Cookieのようなものですが、意味合いは異なります。
//セッションの役割とCookieとの違いはまた別途説明します。
session_start();
//データベースの情報を読み込みます。
require_once "functions/db.php";
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
//メールアドレスとパスワードを受け取ります。
$mail = htmlspecialchars($_POST['mail'], ENT_QUOTES);
$password = htmlspecialchars($_POST['password'], ENT_QUOTES);
//メールアドレスバリデーションチェックの関数です。
//問題なければtrueが返され、何か問題があればfalseが返されます。
function mailcheck($mail){
if(preg_match('/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/iD', $mail)){
return 'true';
}else{
return 'false';
}
};
//メールアドレスが空じゃなかったら、、
if(!empty($mail)){
//バリデーションチェックを実行。
$mailresult = mailcheck($mail);
}else{
//空だったら$mailresultにfalseを入力。
$mailresult = "false";
};
//メールアドレスに特に問題なければ、、、
if($mailresult == "true"){
//データベースからメールアドレスを起点にデータを呼び出します。
$userdataEdit = "select * from userdata where mail = '".$mail."' order by id DESC";
$userdataEdit = mysqli_query($mysqli,$userdataEdit);
//ユーザーのデータを呼び出していきます。
while ($userdataEditArray = mysqli_fetch_assoc($userdataEdit)) {
$userid = $userdataEditArray["id"];
$name = $userdataEditArray["name"];
$age = $userdataEditArray["age"];
$skill = $userdataEditArray["skill"];
$mail = $userdataEditArray["mail"];
$hashpass = $userdataEditArray["password"];
};
};
//入力されたパスワードと暗号化されたパスワードを比較。
if(password_verify($_POST['password'], $hashpass)){
//もし一致したら、trueを返します。
$passresult = "true";
}else{
//一致しなければ、falseを返します。
$passresult = "false";
};
//メールアドレスとパスワード、ともに問題なければ、、
if($mailresult!=="false"&&$passresult!=="false"){
//セッションにtrueを入れてログイン済みの印を残します。
//セッションにtrueが保存されていればログイン済み、という意味です。
$_SESSION["login_pass"] = "true";
//よく利用するuseridも別のセッションに保存しておきましょう。
$_SESSION["userid"] = $userid;
//ログインが成功したら、ログイン完了メッセージと名前を表示。
echo $name."さんログイン完了<br>";
};
};
?>
最初に、画面を開いた瞬間、下記の処理が実行されます。
require_once "functions/db.php";
session_start();
まず、データベースを呼び出しています。
その後、session_start();という処理で、セッションという機能をオンにします。
セッションとは、変数の進化版のようなものです。
クッキーのように、画面遷移しても中に入れたデータが消えません。
$_SESSION[“login_pass”] = “true”; のようにして使います。
これで、セッションlogin_passの中に、trueという文字列を保存できます。
login_passの部分は、セッション名です。
セッション名は自由に変更することができます。
変数は画面を遷移したら消えてしまいます。
しかし、セッションは消えることはありません。
使い方は自体は、変数とそんなに変わりはありませんね。
セッションはsession_start();で開始しなければ、使うことはできません。
なので、最初にsession_start();を実行し、セッションを開始しています。
ちなみにクッキーとセッションの違いは、データの保存先です。
クッキーはユーザーのパソコンにデータが保持されます。
セッションはサーバーに保持されます。
サーバーに保存するか、それともブラウザに保存するか。
これがセッションとクッキーの大きな違いです。
次は、ログインボタンを押した時の処理です。
まずメールアドレスが正しいかチェックをします。
OKだったらログインに進みます。
バリデーションは前回やったので、前回以前を参考にしてみてください。
今回注目すべきは、ログインの処理です。
//メールアドレスに特に問題なければ、、、
if($mailresult == "true"){
//データベースからメールアドレスを起点にデータを呼び出します。
$userdataEdit = "select * from userdata where mail = '".$mail."' order by id DESC";
$userdataEdit = mysqli_query($mysqli,$userdataEdit);
//ユーザーのデータを呼び出していきます。
while ($userdataEditArray = mysqli_fetch_assoc($userdataEdit)) {
$userid = $userdataEditArray["id"];
$name = $userdataEditArray["name"];
$age = $userdataEditArray["age"];
$skill = $userdataEditArray["skill"];
$mail = $userdataEditArray["mail"];
$hashpass = $userdataEditArray["password"];
};
};
バリデーションチェックでメールアドレスに問題がなければデータを呼び出します。
まず、データベースの中から一致しているメールアドレスを探します。
メールアドレスを探す処理は、下記になります。
この時点で実行はされません。
$userdataEdit = "select * from userdata where mail = '".$mail."' order by id DESC";
実際に実行して中身を取り出すのは下記の処理です。
while ($userdataEditArray = mysqli_fetch_assoc($userdataEdit)) {
$userid = $userdataEditArray["id"];
$name = $userdataEditArray["name"];
$age = $userdataEditArray["age"];
$skill = $userdataEditArray["skill"];
$mail = $userdataEditArray["mail"];
$hashpass = $userdataEditArray["password"];
};
データベースのテーブル「mail」と一致したデータを呼び出します。
この時に暗号化されたパスワードも呼び出しています。
$hashpass = $userdataEditArray["password"];
パスワードは暗号化されているので、開発者でも本当のパスワードはわかりません。
では、どうやって入力されたパスワードと一致しているか調べるのでしょうか。
それは、下記の処理で確認することができます。
//入力されたパスワードと暗号化されたパスワードを比較。
if(password_verify($_POST['password'], $hashpass)){
//もし一致したら、trueを返します。
$passresult = "true";
}else{
//一致しなければ、falseを返します。
$passresult = "false";
};
暗号化されたパスワードの確認には「password_verify」を使います。
password_verifyの()内を見てください。
$_POST[‘password’] にフォーム入力されたパスワードが入ります。
$hashpassに暗号化されたパスワードが入っています。
これをif文で使って判断します。
一致した場合は$passresultに対してtrue、不一致の場合はfalseが返されます。
これだけで、暗号化されたパスワードが一致しているかどうかが判別できます。
//メールアドレスとパスワード、ともに問題なければ、、
if($mailresult!=="false"&&$passresult!=="false"){
//セッションにtrueを入れてログイン済みの印を残します。
//セッションにtrueが保存されていればログイン済み、という意味です。
$_SESSION["login_pass"] = "true";
//よく利用するuseridも別のセッションに保存しておきましょう。
$_SESSION["userid"] = $userid;
//ログインが成功したら、ログイン完了メッセージと名前を表示。
echo $name."さんログイン完了<br>";
};
最後に、$mailresultと$passresultがtrueであることを確認します。
OKだったら$_SESSION[“login_pass”]にtrueを入れてログイン完了です。
$_SESSION[“login_pass”]にtrueがあるかどうか調べればログイン済みかどうか判断できます。
また、誰がログインしたか、を認識できるように$_SESSION[“userid”]を作っておきましょう。
セッションuseridの中にユーザーidを入れておくことで、ログイン対象の人物を把握できます。
ユーザーページに移動した時、セッションに保存されたidを参考にデータを呼び出すわけです。
次回は、ログイン後のページについて作っていきます。