php ログイン機能をつくろう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

ログイン機能をつくろう

php|2018年11月20日

2018年11月20日
  • このエントリーをはてなブックマークに追加

今日は、WEBサービスの基本中の基本でもある、ログイン機能を作っていきましょう。

会員登録とログイン機能ができれば、応用で様々なWEBアプリケーションを作ることが出来ます。
会員登録については、前回作りましたので、まだの方は、前回の項目からご覧ください。

ログイン機能のポイントは2つです。

まずログイン機能は、メールアドレスとパスワードを入力します。
そして、該当のメールアドレスがデータベースにあるかどうかを調べます。

もしメールアドレスが存在したら、今度はパスワードが一致しているかどうかを調べましょう。

データベースの中のパスワードは暗号化されています。
暗号化した結果が同じかどうかを調べる必要があります。

結果、どっちも一致していたら、セッションにログインされたことを示す値を入力します。

セッションとはクッキーに似た、データを入れておく箱のようなイメージです。
画面遷移しても、データが保持されるため、ログインされたかどうかを判断するには最適です。

  1. メールアドレスがDBにあるか確認する
  2. 暗号化されたパスワードと入力されたパスワードが一緒か確認する
  3. 上記2つがOKなら、セッションにログインの値を入れる
  4. セッションへの値入力を持って、ログイン済みと判断する

以上の流れで、ログインを実行していきます。
では、さっそく実践に入っていきましょう。

ミッションの内容

下記のファイルを再現してみてください。
基本的には、前回のファイルのアップデートです。

まず、ソースコードの解説を読み、自分自信で実装してみてください。
どうしても分からない場合は解答ファイルを参考にしましょう。

ソースコードの説明を下記に記載します。
まず一通り目を通して、同時に自分のエディタで試してみてください。

ソースコードの解説

最初に全体のソースコードを見ていきましょう。

<?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を参考にデータを呼び出すわけです。

次回は、ログイン後のページについて作っていきます。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら