Almon Dev

모의해킹 공부 정리 9일차 (로그아웃) 본문

모의해킹/웹 개발

모의해킹 공부 정리 9일차 (로그아웃)

Almon 2024. 10. 25. 20:23

로그아웃 기능

 

로그인 기능을 만들었지만 로그아웃 기능까지 만들려고 하니 수정이 필요해졌습니다.
일단 mysql에 로그인 온/오프를 기록하기 위한 Boolean 타입 컬럼(열)을 하나 만들었습니다.
그리고 로그인 시 1을 기록하고 로그아웃시 0을 기록하도록 변경하였습니다.

 

login 컬럼 추가

alter table users add login boolean not null;

alter table로 테이블의 열을 추가, 제거 이름변경 등 속성을 변경할 수 있습니다.

alter table [테이블명] add [컬럼명] [타입 및 속성];으로 컬럼을 추가해 줍니다.

 

login_proc2.php 변경

 

수정전

<?php
    include("mysql.php");

    $id = $_POST["id"];
    $pass = $_POST["passwd"];
    $url = '/login_successful.php';
    $sql = "select nickname from users where id='$id' and password='$pass';";

    $sql_result = runSQL($sql);

    if ($row = mysqli_fetch_array($sql_result)) {
        $nick = $row['nickname'];

        echo "<form id='redirection-form' action='$url' method='post'>";
        echo "<input type='hidden' name='nickname' value='$nick'>";
        echo "</form>";
        echo "<script>document.getElementById('redirection-form').submit()</script>";
        exit;
    }    
    header('Location: login2.php?result=failed');
?>

 

수정 후

<?php
    include("mysql.php");

    $id = $_POST["id"];
    $pass = $_POST["passwd"];
    $url = '/login_successful.php';
    $sql = "select nickname from users where id='$id' and password='$pass';";

    $sql_result = runSQL($sql);

    // $result = false;

    if ($row = mysqli_fetch_array($sql_result)) {
        $nick = $row['nickname'];
        $update_sql = "update users set login=1 where nickname='$nick';";
        runSQL($update_sql);

        echo "<form id='redirection-form' action='$url' method='post'>";
        echo "<input type='hidden' name='nickname' value='$nick'>";
        echo "</form>";
        echo "<script>document.getElementById('redirection-form').submit()</script>";
        exit;
    }
    
    header('Location: login2.php?result=failed');
?>

 

if ($row = mysqli_fetch_array($sql_result)) {

유저의 아이디와 패스워드가 db에 존재할 때 if문을 실행합니다.

 

        $update_sql = "update users set login=1 where nickname='$nick';";
        runSQL($update_sql);

 

$update_sql에 update문을 이용해 닉네임이 일치하는 행의 login 열을 1로 설정합니다.

update문은 테이블의 값을 변경하는 구문입니다.

구조는 UPDATE [테이블명] SET [COLUMN]=[값]  where [조건문]; 으로 이루어져 있습니다.

 

로그아웃 버튼 추가

 

login_successful.php

<?php 
    $nickname = $_POST['nickname'];
?>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Almond</title>
    <link rel="stylesheet" href="/css/login_successful.css">
    <script src="./script/logout.js" defer></script>
</head>
<body>
    <container class="profile-container">
        <div class="profile">
            <img src="/imgs/almond-profile.jpg" class="profile_img">
            <div class="profile_info">
                <h2 class="profile_name"><?php echo $nickname; ?></h2>
                <p class="profile_subs">구독자 <strong>0명</strong></p>
            </div>
        </div>
        
        <div class="profile_link">
            <a href="#" class="link_tab"><p>글쓰기</p></a>
            <a href="#" class="link_tab"><p>마이페이지</p></a>
            <?php
                printf('<button class="link_tab logout-btn" onclick=\'logout("%s")\'>로그아웃</button>', $nickname);
            ?>
        </div>
    </container>
</body>
</html>

 

<script src="./script/logout.js" defer></script>

<?php
    printf('<button class="link_tab logout-btn" onclick=\'logout("%s")\'>로그아웃</button>', $nickname);
?>

달라진 부분은 이 정도입니다.

 

printf('<button class="link_tab logout-btn" onclick=\'logout("%s")\'>로그아웃</button>', $nickname);

이 부분에서 유의할 점은 \' 부분입니다.

따옴표 ' 사이에 따옴표를 넣을 때는 \을 이용해 이스케이프 문자를 활용하면 편합니다.

 

로그아웃 기능 추가

 

logout.js

function logout(nickname) {
  console.log(nickname);

  fetch('/logout.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json; charset=utf-8',
    },
    body: JSON.stringify({
      nickname: nickname,
    }),
  })
    .then((res) => res.json())
    .then((res) => {
      if (res.result) {
        window.location.href = res.url;
      }
    });
}

logout 함수를 담은 파일입니다.

fetch를 이용해 logout.php에 로그아웃을 할 계정의 닉네임을 전송합니다.

그리고 응답에 결과값이 true이면 로그인 페이지로 돌아갑니다.

 

logout.php

<?php
    include("mysql.php");
    $result = true;
    $nick = json_decode(file_get_contents("php://input"), true)['nickname'];
    // echo "$nick";
    $sql = "update users set login=0 where nickname='$nick';";

    $sql_result = runSQL($sql);

    header("Content-Type: application/json");
    echo json_encode(["url" => "/login2.php", "result" => $result]);
?>

 

$nick = json_decode(file_get_contents("php://input"), true)['nickname'];

$nick 변수에 POST로 들어온 닉네임값을 json을 디코딩해서 넣습니다.

 

$sql = "update users set login=0 where nickname='$nick';";
$sql_result = runSQL($sql);

$sql에 일치하는 닉네임의 login열을 0으로 설정하는 sql쿼리문을 넣습니다.

runSQL함수로 쿼리를 실행합니다

 

header("Content-Type: application/json");
echo json_encode(["url" => "/login2.php", "result" => $result]);

header에 컨텐츠 타입을 json으로 설정해줍니다.

echo를 이용해서 logout.js에 url과 result를 담은 연관배열을 json으로 패키징해서 보냅니다.

끝

 

아직 부족한 점이 많긴합니다
로그인 로그아웃을 기록하긴 하지만 유저를 구분하지 못해서
로그인을 유지하지를 못하네요
아마도 쿠키와 세션을 배울때쯤 적용해볼것 같습니다.

'모의해킹 > 웹 개발' 카테고리의 다른 글

모의해킹 공부 정리 12일차 (중복확인)  (0) 2024.10.28
모의해킹 공부 정리 10일차 (마이페이지)  (2) 2024.10.26
모의해킹 공부 정리 8일차 (과제)  (1) 2024.10.24
모의해킹 공부 정리 7일차 (mysql 적용)  (0) 2024.10.23
모의해킹 공부 정리 4,5,6 일차 (mysql 설정)  (3) 2024.10.22
'모의해킹/웹 개발' Related Articles more