모의해킹 공부 정리 12일차 (중복확인)

 

중복확인

 

users.txt로 회원가입 페이지를 구현할 때 만들어둔 아이디, 닉네임 중복확인을 mysql을 이용하도록 수정했습니다

 

---

아이디 중복확인

 

check_userId.php

수정 전

<?php
    $id = json_decode(file_get_contents("php://input"), true)['id'] ?? null;
    // echo "$id";

    $users = fopen($_SERVER["DOCUMENT_ROOT"]."/storage/users.txt", 'r');
    $duplication = false;

    while($user = fgets($users)) {
        $user_id = explode(":", $user)[0];

        if($user_id == $id) {
            $duplication = true;
        }
    }
    fclose($users);
            
    header("Content-Type: apllication/json");
    echo json_encode(['pass' => !$duplication]);
?>

 

수정 후

<?php
    include($_SERVER["DOCUMENT_ROOT"]."/mysql.php");

    $id = json_decode(file_get_contents("php://input"), true)['id'] ?? null;
    // echo "$id";
    $sql = "select id from users where id='$id';";
    $result = runSQL($sql);
    $duplication = false;

    if ($result->num_rows > 0) {
        $duplication = true;
    }

    header("Content-Type: apllication/json");
    echo json_encode(['pass' => !$duplication]);
?>

 

duplicate_check.js

  idInput.addEventListener('input', () => {
    const userId = idInput.value;

    fetch('/api/users/check_userId.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json; charset=utf-8',
      },
      body: JSON.stringify({
        id: userId,
      }),
    })
      // .then((res) => res.text())
      .then((resJson) => resJson.json())
      .then((res) => {
        console.log(res);

        if (!res.pass) {
          // console.log(res.pass);
          idInput.classList.add(className);
        } else {
          // console.log(res.pass);
          idInput.classList.remove(className);
        }
      });
  });

아이디 확인을 db를 통해 하는 것으로 바꾸었습니다.

js파일은 수정할 부분이 없었습니다.

include의 경우 상대경로(../mysql.php)를 이용하여고 하였으나
계속해서 에러가 나서 절대경로로 변경했습니다. $_SERVER 환경변수에 DOCUMENT_ROOT에는
웹 루트의 경로가 들어있습니다.

---

닉네임 중복확인

 

check_userNick.php

수정 전

<?php 
    $nickname = json_decode(file_get_contents("php://input"), true)['nick'] ?? null;
    $users = fopen($_SERVER["DOCUMENT_ROOT"]."/storage/users.txt", 'r');
    $duplication = false;
    
    while($user = fgets($users)) {
        $user_nick = trim(explode(":", $user)[2]);
        // echo "$user_nick";

        if($user_nick == $nickname) {
            $duplication = true;
        }
    }
    fclose($users);

    header("Content-Type: apllication/json");
    
    echo json_encode(['pass' => !$duplication]);
?>

 

수정 후

<?php 
    include($_SERVER['DOCUMENT_ROOT']."/mysql.php");
    $nickname = json_decode(file_get_contents("php://input"), true)['nick'] ?? null;
    $duplication = false;

    $sql = "select nickname from users where nickname='$nickname'";
    $result = runSQL($sql);

    if ($result->num_rows > 0) {
        $duplication = true;
    }

    header("Content-Type: apllication/json");
    
    echo json_encode(['pass' => !$duplication]);
?>

 

duplicate_check.js

  nickInput.addEventListener('input', () => {
    const userNick = nickInput.value;

    fetch('/api/users/check_userNick.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json; charset=utf-8',
      },
      body: JSON.stringify({
        nick: userNick,
      }),
    })
      // .then((resText) => resText.text())
      .then((resJson) => resJson.json())
      .then((res) => {
        if (!res.pass) {
          // console.log(res.pass);
          // console.log(res.nickname);
          // console.log(res);
          nickInput.classList.add(className);
        } else {
          // console.log(res.pass);
          nickInput.classList.remove(className);
        }
      });
  });

역시나 db를 활용하도록 변경 외에는 수정한 부분이 없습니다.

---

비밀번호 중복확인

 

check_passwd.php

<?php 
    $res = json_decode(file_get_contents("php://input"), true);
    $passwd = $res['pass'];
    $passwdCheck = $res['passCheck'];
    $duplication = false;

    if($passwd == $passwdCheck) {
        $duplication = true;
    }

    header("Content-Type: apllication/json");
    
    echo json_encode(['pass' => $duplication]);
?>

 

duplicate_check.js

수정 전

  passCheckInput.addEventListener('input', () => {
    const passwd = passInput.value;
    const passwdCheck = passCheckInput.value;

    if (passwd === passwdCheck) {
      passCheckInput.classList.remove(className);
    } else {
      passCheckInput.classList.add(className);
    }
  });

 

수정 후

  passCheckInput.addEventListener('input', () => {
    const passwd = passInput.value;
    const passwdCheck = passCheckInput.value;

    if (passwd === passwdCheck) {
      passInput.classList.remove(className);
      passCheckInput.classList.remove(className);
    } else {
      passInput.classList.add(className);
      passCheckInput.classList.add(className);
    }
  });

  passInput.addEventListener('blur', () => {
    const passwd = passInput.value;
    const passwdCheck = passCheckInput.value;

    if (passwd === passwdCheck) {
      passInput.classList.remove(className);
      passCheckInput.classList.remove(className);
    } else {
      passInput.classList.add(className);
      passCheckInput.classList.add(className);
    }
  });

비밀번호 확인은 유저가 입력한 값끼리의 검증이기 때문에 db를 사용할 필요가 없었습니다.

  passInput.addEventListener('blur', () => {

다만 비밀번호 확인창을 입력하여 이미 중복검사를 마친 후 비밀번호 입력창을 수정했을 때

중복검사가 진행되지 않아서 비밀번호 입력창에 blur이벤트가 발생했을 때 다시 한번 검사를 하도록 변경했습니다.

blur 이벤트는 포커스(focus)가 사라졌을 때 발생합니다.
ex) 입력창에 입력을 끝내고 다른 곳으로 이동할 때

---