과제 4가지의 로그인 케이스 구현

1. 식별/인증 동시처리: 쿼리로 입력받은 ID, PW 함께 비교

2. 식별/인증 분리처리: 입력받은 ID로 데이터 조회 후 Back-End에서 IF문으로 비밀번호 비교

3. 식별/인증 동시처리 + Hash: 입력받은 PW를 Hash처리하여 쿼리로 ID, PW비교
4. 식별/인증 분리처리 + Hash: 입력받은 ID로 데이터 조회 후 Back-End에서 IF문으로 입력받은 PW를 Hash 처리하여 비교

식별/인증 동시처리

register.php( 모든 케이스 동일)

    <?php
      require_once 'db_connection.php';

      $is_id = isset($_POST['id']) && $_POST['id'];
      $is_name = isset($_POST['name']) && $_POST['name'];
      $is_pw = isset($_POST['pw']) && $_POST['pw'];
      $is_submit = isset($_POST['submit']);

      if ($is_name && $is_id && $is_pw && $is_submit) {
        // 모두 입력받았다면 아이디 중복확인.
        $idCount = idCount($_POST['id']);

        if($idCount < 1) {
          $result = register($_POST['id'], $_POST['name'], $_POST['pw']);
          if ($result) {
            echo "<script>alert('회원가입 완료.');
              location.href='/study/w3/case1/login.php'
            </script>";
            exit;
          }
        } 
      }
    ?>

login.php (모든 케이스 동일)

<?php
        require_once 'db_connection.php';
        ini_set('display_errors', 1);
        
        $is_id = isset($_POST['id']) && $_POST['id'];
        $is_pw = isset($_POST['pw']) && $_POST['pw'];
        $is_submit = isset($_POST['submit']);
           
        if($is_id && $is_pw && $is_submit) {
          // 로그인 로직 처리
          $login_result = login($_POST['id'], $_POST['pw']);
          
          if ($login_result > 0) {
            session_start();
            // echo "userID: {$id}";
            $_SESSION['id'] = $_POST['id'];
            header('Location: /study/w3/case1/index.php');
          }
        }
      ?>

db_connection.php

<?php
    ini_set('display_errors', 1);
    define('DB_SERVER', 'localhost');
    define('DB_USERNAME', 'admin');
    define('DB_PASSWORD', 'student1234');
    define('DB_NAME', 'test');
	
    $db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
    $db_conn -> set_charset('utf8');
   
   // 중략
   
    function login($id, $pw) {
        global $db_conn;
        
        // sql에서 id, pw 모두 사용
        $sql = "SELECT COUNT(USER_ID) as count 
        FROM user_case1 
        WHERE USER_ID = '{$id}' and PW = '{$pw}'";
	
        $result = mysqli_query($db_conn, $sql);
        $row = mysqli_fetch_array($result);

        return $row['count'];
    }
?>

쿼리에서 USER_ID, PW 모두 조건절로 처리하여 count만 반환하여 0보다 크다면 로그인 처리한다.

식별/인증 별도 처리

db_connection.php

<?php
    ini_set('display_errors', 1);
    define('DB_SERVER', 'localhost');
    define('DB_USERNAME', 'admin');
    define('DB_PASSWORD', 'student1234');
    define('DB_NAME', 'test');
	
    $db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
    $db_conn -> set_charset('utf8');
  
  	// 중략
  
    function login($id, $pw) {
        global $db_conn;
        $return_val = 0;
        $sql = "SELECT USER_ID AS userId, PW AS pw
        FROM user_case1 
        WHERE USER_ID = '{$id}'";

        $result = mysqli_query($db_conn, $sql);
        $row = mysqli_fetch_array($result);

        if($row && $row['pw'] == $pw) {
            $return_val = 1;
        } 

        return $return_val;
        

    }
?>

입력받은 USER_ID를 사용하여 DB에서 USER_ID, PW를 받아 PHP 로직에서 PW를 비교하여 로그인 처리 한다.

식별/인증 동시처리 + Hash

db_connection.php

<?php
    // 중략
    
    function register($id, $name, $pw) {
        global $db_conn;
        
        $pw = hash("sha256", $pw);
        $sql = "INSERT INTO user_case3 (USER_ID, USER_NM, PW) VALUE(
            '{$id}'
            , '{$name}'
            , '{$pw}'
        )";

        return mysqli_query($db_conn, $sql);
    }

    function login($id, $pw) {
        global $db_conn;
        $pw = hash("sha256", $pw);
        
        $sql = "SELECT COUNT(USER_ID) as count 
        FROM user_case1 
        WHERE USER_ID = '{$id}' and PW = '{$pw}'";

        $result = mysqli_query($db_conn, $sql);
        $row = mysqli_fetch_array($result);

        return $row['count'];
    }
?>

register에서 Insert 하기 전 pw를 Hash 처리한다.

이후 login 시 조건절에 들어갈 pw 또한 해시처리하여 비교한다.

식별/인증 별처리 + Hash

db_connection.php

<?php
    // 중략
    
    function login($id, $pw) {
        global $db_conn;
        $pw = hash("sha256", $pw);
        $return_val = 0;

        $sql = "SELECT USER_ID AS userId, PW AS pw
        FROM user_case3 
        WHERE USER_ID = '{$id}'";

        $result = mysqli_query($db_conn, $sql);
        $row = mysqli_fetch_array($result);

        if($row && $row['pw'] == $pw) {
            $return_val = 1;
        } 

        return $return_val;
    }
?>

Case2와 동일하지만 DB에서 가져온 PW는 Hash처리가 되어 있기 때문에 파라미터로 받는 $pw를 Hash처리하여 if문에서 비교한다.

식별/인증

식별: 수 많은 사용자 데이터 중 1개의 사용자를 특정(ID)
인증: 식별한 사용자가 실제 그 사용자가 맞는지 확인(PW)

식별정보: 로그인에서 ID가 식별정보이며 식별정보는 특정 1명의 사용자를 찾을 수 있어야하므로 유니크해야 한다.
인증정보: 로그인 시도한 사용자가 정말 그 사용자인지 확인하기 위해 사용자만 알 수 있는 값을 받아야한다 (PW)

Hash

Hash는 단방향 암호화 로직으로 (A ===HASH 처리 ===> B) 가능하지만 ( A <========= B)가 불가능하다
이러한 특징을 가지고 있기 때문에 BD가 탈취되어도 평문을 알 수 없다.

로그인 시 입력받은 비밀번호를 Hash처리하여 DB에 저장된 값과 비교만 하면되기 때문에 사용자의 비밀번호를 알 필요가 없다.

로그인 로직 방법들

1. 식별/인증 동시처리: DB에서 동시에 식별정보 and 인증정보를 조회한다.
2. 식별/인증 별도처리: DB에서 식별정보를 조회 후 Back-End의 if문으로 확인한다.
3. 식별/인증 동시처리 + Hash : DB에 입력된 PW는 해쉬 처리가 되어 있으며 쿼리의 조건문에도 해쉬처리된 데이터로 조회한다.
4. 식별/인증 별도처리 + Hash : DB에 입력된 PW는 해쉬 처리가 되어 있으며 비교는 Back-End의 로직에서 확인한다.

로그인의 유지

• 쿠키: Client에 저장되며 데이터 요청시 전달하여 사용 Ex) setcookie(useId, 김만기)
  단 클라이언트에 저장되는 값으로 변조가 쉽다.
• 세션: 쿠키와 다르게 데이터의 값은 Server의 파일로 저장되며 Client는 Cookie에 SessionId를 보내어 사용자를 특정하고 해당 사용자의 정보를 확인 할 있다.

HTTP의 특징

Stateless

Http는 무상태성(Stateless)로 Server와 Client가 항시 연결되어 있는 상태가 아니다. 요청한 데이터에 대한 응답을 전달하게 되면 연결이 끊어지는 방식으로 이전에 어떠한 요청을 했는지 알 수 없다.

이러한 Stateless의 특성을 가지고 있기 때문에 Cookie, Session_id 혹은 JWT와 같은 로그인 한 사용자라는 것을 증명 할 수 있는 데이터를 요청시마다 전달해야한다.

현재 파일구조

webApp

|
| ㅡ index.php

| ㅡ db_connection.php

| ㅡ login.php

| ㅡ register.php

register.php

1 register.php로 POST 요청과 함께 id, pw, name, submit을 전달받으면

2. id 중복체크

3. 회원가입 처리

4. insert의 결과가 1이라면 login.php로 이동

예외처리

POST로 Submit이 왔는데 id가 공란이라면? => 아이디를 입력하세요 출력

POST로 Submit이 왔는데 name이 공란이라면? => name 입력하세요 출력

POST로 Submit이 왔는데 pw가 공란이라면? => 비밀번호를 입력하세요 출력

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.104.2">
    <title>Checkout example · Bootstrap v5.2</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/checkout/">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">    
    <?php
      require_once 'db_connection.php';
    ?>

    <?php
        $is_id = isset($_POST['id']) && $_POST['id'];
        $is_name = isset($_POST['name']) && $_POST['name'];
        $is_pw = isset($_POST['pw']) && $_POST['pw'];
        $is_submit = isset($_POST['submit']);
        // echo 'name' . $is_name;
        /* 
        echo 'name' . ($is_submit && $is_name != 1);
        echo 'id' . $is_id;
        echo 'pw' . $is_pw;
        echo 'sub' . $is_submit;
        */
        if ($is_name && $is_id && $is_pw && $is_submit) {
          $idCount = idCount($_POST['id']);
          // echo 'idcount : ' . $idCount;

          if($idCount < 1) {
            $result = regist($_POST['id'], $_POST['name'], $_POST['pw']);
            if ($result) {
              echo "<script>alert('회원가입 완료.');
              </script>";
              // location.href='주소'
              exit;
            }
          } 
        }
    ?>

<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
    </style>


    <!-- Custom styles for this template -->
    <link href="form-validation.css" rel="stylesheet">
  </head>
  <body class="bg-light">

<div class="container">
  <main>
    <div class="py-5 text-center">
      <img class="d-block mx-auto mb-4" src="./assets/images/normaltic_logo.png" alt="" width="72" height="57">
      <h2>회원가입</h2>
      <!-- <p class="lead">하기의 항목을 기입해주세요.</p> -->
    </div>

    <div class="row g-5">

      <div class="">
        <!-- <h4 class="mb-3">Billing address</h4> -->
        <form class="needs-validation" novalidate method="POST">
          <div class="row g-3">

            <div class="">
              <label for="아이디" class="form-label">아이디</label>
              <input type="text" value=
                <?php
                  if (isset($_POST['id'])){
                    echo '"' . $_POST['id'] . '"';
                  } else {
                    echo '""';
                  }
                ?>
              class="form-control" name="id" placeholder="아이디" required>
              <div class="">
                <?php
                    if ($is_submit && $is_id != 1) {
                        echo '아이디를 입력해주세요';
                    } elseif ($is_submit && $idCount > 0 ){
                      echo '이미 존재하는 id 입니다';
                    }
                ?>
              </div>
            </div>

            <div class="">
              <label for="이름" class="form-label">이름</label>
              <input type="text" value=
              <?php
                if(isset($_POST['name'])) {
                  echo '"' . $_POST['name'] . '"';
                } else {
                  echo '""';
                }
                ?>
              name="name" class="form-control" id="username" placeholder="이름" required>
              <div class="">
                <?php
                    if ($is_submit && $is_name != 1) {
                        echo '이름을 입력해주세요';
                    }
                ?>
              </div>
            </div>

            <div class="">
              <label for="비밀번호" class="form-label">비밀번호</label>
              <input type="password" name="pw" class="form-control" id="username" placeholder="비밀번호" required>
              <div class="">
                <?php
                        if ($is_submit && $is_pw != 1) {
                            echo '비밀번호를 입력해주세요';
                        }
                    ?>
              </div>
            </div>

            <input type=text vlaue="submit" style="display:none;" name="submit"/>

          <button class="w-100 btn btn-primary btn-lg" type="submit">회원가입</button>
        </form>
      </div>
    </div>
  </main>

  <footer class="my-5 pt-5 text-muted text-center text-small">
    <p class="mb-1">&copy; 2017–2022 Company Name</p>
    <ul class="list-inline">
      <li class="list-inline-item"><a href="#">Privacy</a></li>
      <li class="list-inline-item"><a href="#">Terms</a></li>
      <li class="list-inline-item"><a href="#">Support</a></li>
    </ul>
  </footer>
</div>


    <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>

      <script src="form-validation.js"></script>
  </body>
</html>

db_connection.php

<?php
    ini_set('display_errors', 1);
    define('DB_SERVER', 'localhost');
    define('DB_USERNAME', 'admin');
    define('DB_PASSWORD', 'student1234');
    define('DB_NAME', 'test');

    $db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);

    function idCount($id) {
        global $db_conn;

        $sql = "select count(id) as count from user where id ='" . $id . "'";
        $result = mysqli_query($db_conn, $sql);
        $row = mysqli_fetch_array($result);
        return $row['count'];
    }


    function regist($id, $name, $pw) {
        global $db_conn;
        $sql = "insert into user (idx, id, name, pw) value ( null, '"
        . $id . "', '" . $name . "', '" . $pw . "')";

        return mysqli_query($db_conn, $sql);
        // return $sql;
    }

    function login($id, $pw) {
        global $db_conn;
        $sql = "select count(id) as count from user where id = '" . $id . "' and pw='" . $pw . "'";

        $result = mysqli_query($db_conn, $sql);
        $row = mysqli_fetch_array($result);
        return $row['count'];
    }
?>

결과

로그인 로직 구조

1. index.php($_session['id'] 없음) ===== redirection=====> login.php(GET)

2. login = POST => login

3. login.php로 POST 요청과 함께 id, pw, submit을 전달받으면

4. 로그인 처리 후 $_session['id'] 저장 =====redicrct===> index.php

예외처리

POST로 Submit이 왔는데 id가 공란이라면? => 아이디를 입력하세요 출력

POST로 Submit이 왔는데 pw가 공란이라면? => 비밀번호를 입력하세요 출력

POST로 Submit이 존재하고 pw가 존재하고 id가 존재하지만 DB 조회결과 count가 0 이라면 => '아이디 비밀번호를 확인하세요'

`

login.php

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.104.2">
    <title>Checkout example · Bootstrap v5.2</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/checkout/">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">    
    <?php
      require_once 'db_connection.php';
    ?>

    <?php
        $is_id = isset($_POST['id']) && $_POST['id'];
        $is_name = isset($_POST['name']) && $_POST['name'];
        $is_pw = isset($_POST['pw']) && $_POST['pw'];
        $is_submit = isset($_POST['submit']);
        // echo 'name' . $is_name;
        /* 
        echo 'name' . ($is_submit && $is_name != 1);
        echo 'id' . $is_id;
        echo 'pw' . $is_pw;
        echo 'sub' . $is_submit;
        */
        if ($is_name && $is_id && $is_pw && $is_submit) {
          $idCount = idCount($_POST['id']);
          // echo 'idcount : ' . $idCount;

          if($idCount < 1) {
            $result = regist($_POST['id'], $_POST['name'], $_POST['pw']);
            if ($result) {
              echo "<script>alert('회원가입 완료.');
               location.href='login.php'
              </script>";
              exit;
            }
          } 
        }
    ?>

<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
    </style>


    <!-- Custom styles for this template -->
    <link href="form-validation.css" rel="stylesheet">
  </head>
  <body class="bg-light">

<div class="container">
  <main>
    <div class="py-5 text-center">
      <img class="d-block mx-auto mb-4" src="./assets/images/normaltic_logo.png" alt="" width="72" height="57">
      <h2>회원가입</h2>
      <!-- <p class="lead">하기의 항목을 기입해주세요.</p> -->
    </div>

    <div class="row g-5">

      <div class="">
        <!-- <h4 class="mb-3">Billing address</h4> -->
        <form class="needs-validation" novalidate method="POST">
          <div class="row g-3">

            <div class="">
              <label for="아이디" class="form-label">아이디</label>
              <input type="text" value=
                <?php
                  if (isset($_POST['id'])){
                    echo '"' . $_POST['id'] . '"';
                  } else {
                    echo '""';
                  }
                ?>
              class="form-control" name="id" placeholder="아이디" required>
              <div class="">
                <?php
                    if ($is_submit && $is_id != 1) {
                        echo '아이디를 입력해주세요';
                    } elseif ($is_submit && isset($idCount) && $idCount > 0 ){
                      echo '이미 존재하는 id 입니다';
                    }
                ?>
              </div>
            </div>

            <div class="">
              <label for="이름" class="form-label">이름</label>
              <input type="text" value=
              <?php
                if(isset($_POST['name'])) {
                  echo '"' . $_POST['name'] . '"';
                } else {
                  echo '""';
                }
                ?>
              name="name" class="form-control" id="username" placeholder="이름" required>
              <div class="">
                <?php
                    if ($is_submit && $is_name != 1) {
                        echo '이름을 입력해주세요';
                    }
                ?>
              </div>
            </div>

            <div class="">
              <label for="비밀번호" class="form-label">비밀번호</label>
              <input type="password" name="pw" class="form-control" id="username" placeholder="비밀번호" required>
              <div class="">
                <?php
                        if ($is_submit && $is_pw != 1) {
                            echo '비밀번호를 입력해주세요';
                        }
                    ?>
              </div>
            </div>

            <input type=text vlaue="submit" style="display:none;" name="submit"/>

          <button class="w-100 btn btn-primary btn-lg" type="submit">회원가입</button>
        </form>
      </div>
    </div>
  </main>

  <footer class="my-5 pt-5 text-muted text-center text-small">
    <p class="mb-1">&copy; 2017–2022 Company Name</p>
    <ul class="list-inline">
      <li class="list-inline-item"><a href="#">Privacy</a></li>
      <li class="list-inline-item"><a href="#">Terms</a></li>
      <li class="list-inline-item"><a href="#">Support</a></li>
    </ul>
  </footer>
</div>


    <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>

      <script src="form-validation.js"></script>
  </body>
</html>

index.php

<?php
  ini_set('display_errors', 1);
  session_start();

  echo 'aaa: ' . session_id();
  if(!$_SESSION['id']) {
      header('location:login.php');
      eixt;
  }
  echo '<br>';
  echo $_SESSION['id'] . 'is login';

?>

결과

## 이번주차 과제

1. 복습

2. DataBase에서 이름, 점수 조회하기(name = doldol)

3. 회원가입 페이지 만들기

4. 로그인 페이지 만들기(DB)연동

기존에 Flask로 WAS를 구성하였는데 과정에서 진행하는 php로 진행하는게 과정 이해에 대해 더 도움이 될 것 같아 php로 다시 수정하고자 한다. (php 잘 모르는데... 큰일이다.)

phpmyadmin 사용한 Database 추가와 Table 추가

test라는 DataBase의 생성과 user라는 테이블을 구성

insert와 select로 데이터를 확인

php로 학생 점수를 조회하기

~/webDev/webApp/mini_test.php

<html>
    <form>
        <input name='name' type='text'>
        <button type='submit' placeholder="이름"> 전송 </button>
    </form>
</html>


<?php
    if (isset($_GET['name'])){

        $name = $_GET['name'];

        ini_set('display_errors', 1);
        define('DB_SERVER', 'localhost');
        define('DB_USERNAME', 'admin');
        define('DB_PASSWORD', 'student1234');
        define('DB_NAME', 'test');

        $db_conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
        $sql = 'select * from user where name = "' . $name . '"';

        $result = mysqli_query($db_conn, $sql);
        //var_dump($result);    
        $row = mysqli_fetch_array($result);
        //var_dump($row);    
        if ($row){
            echo 'userName is :' . $row['name'] . ', socre is : ' . $row['score'];

        } else {
            echo $name . ' is not exists';
        }

    } 
?>

결과