1주차

모의해킹스터디_과제

1주차

해커1 2023. 11. 3. 15:23

과제 내용

~~[1] 복습 (웹 서버 이해)~~

[2] 간이 로그인 페이지 만들기 (DB 연결X)

(admin / admin1234) 라고 입력했을 때 로그인을 시켜주는 페이지를 만들어보기.

[3] 로그인 페이지 이쁘게 만들기. (CSS / Bootstrap)

페이지 만들기

실습을 위해 주어지는 리눅스 서버에서 docker를 사용해 웹 서비스를 구축할 수 있는 환경이 주어졌다. (Normaltic님이 만들어 두신 것들) 그래서 단순히 webroot 디렉토리 안에 index.php를 비롯한 파일들을 넣고 실행하면 된다.

(login.html -> login.php)

리눅스 서버의 IP 주소와 위의 컨테이너가 실행되는 포트번호를 더해 주소창에 입력하면 실행된 페이지를 볼 수 있다. 내부 IP라 내 컴퓨터에서만 실행 가능하긴 하다.

인터넷에서 간단한 로그인 페이지 코드를 구해서 원하는 기능대로 수정하고 꾸몄다.

디자인은 노말틱스럽게 했다. 나름 괜찮은 것 같다.

코드

- index.php

<?php
//reference - https://velog.io/@910/PHP-MySQL
session_start();
if(!isset($_SESSION['username'])) {
    header("Location: login.php");
    exit;           
}
else {
    $username = $_SESSION['username'];
} 
?>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="login.css">
</head>
<body>
    <div class="base">
        <h2><?php echo "Hi, $username";?></h2>
        <button type="button" class="btn" onclick="location.href='logout.php'">
            LOGOUT
        </button>
    </div>
</body>

이번 과제에서 굳이 필요는 없지만 기존 코드에서 session을 사용하길래 session을 통해 값을 전달했다. 전체적인 코드 흐름은 'username' 이란 변수가 있을 때는 index.php에서 로그인된 화면을 보여주고, 없다면 login.php 페이지로 이동시키는 코드다. 여기서 강조할 부분은 exit 이다. exit가 없으면 HTTP 요청 메시지를 통해 페이지의 코드가 노출되지만, exit를 사용하면 프로그램이 종료되고 곧바로 이동하기 때문에 코드 노출을 예방할 수 있다.

- login.php

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="login.css">
    <title>간단한 로그인 페이지</title>
  </head>
  <body>
    <div class="login-wrapper">
        <h2>Login</h2>
        <form method="post" action="login_check.php" id="login-form">
            <input type="text" name="userName" placeholder="ID">
            <input type="password" name="userPassword" placeholder="Password">
            <input type="submit" value="Login">
        </form>
    </div>
  </body>
</html>

입력받은 ID와 비밀번호를 POST방식으로 받아 login_check.php 페이지에 전달한다.

- login_check.php

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
</head>
<body>
   <?php
      session_start();    
      //login.php에서 입력받은 id, password
      $username = $_POST['userName'];
      $userpass = $_POST['userPassword'];
      
      //id가 admin이 아닐 때
      if($username != 'admin'){
        echo "<script>alert('Wrong username')</script>";
        echo "<script>location.replace('login.php');</script>";
        exit;
      }
      //id는 맞는데 비밀번호가 admin1234가 아닐 때
      else if($userpass != 'admin1234'){
        echo "<script>alert('Wrong password')</script>";
        echo "<script>location.replace('login.php');</script>";
        exit;
      }
      //id와 비밀번호가 맞다면 세션 변수 생성
      else{
        $_SESSION['username'] = $username;
        echo "<script>location.replace('index.php');</script>";
        exit;
      }
    ?>
   </body>

POST 방식으로 받은 ID와 비밀번호를 비교해서 틀리다면 경고메시지를 띄운 다음 다시 login.php로 돌아가고, 맞다면 session 변수를 생성한 후 처음 index.php로 돌아간다.

- logout.php

<?php
session_start();
session_destroy();
?>
<script>
    alert("You've been logged out");
    location.replace('index.php');
</script>

로그인을 한 후 index.php 에서 로그아웃 버튼을 누르면 session에 등록된 모든 데이터를 없애고 로그아웃이 되었다는 메시지를 띄운 후 index.php로 돌아간다.

- login.css

*{
  padding: 0;
  margin: 0;
  border: none;
}
html{
  height: 100%;
}
body{
  min-height: 100vh;
  background-color: #1d0401;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-wrapper{
  width: 400px;
  height: 350px;
  border-radius: 20px;
  padding: 40px;
  background-color: #F8F8F8;
  box-sizing: border-box;
}
.login-wrapper > h2{
  font-size: 24px;
  color: #fe3d24;
  margin-bottom: 20px;
}
#login-form > input{
  width: 100%;
  height: 48px;
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 16px;
  border-radius: 6px;
  background-color: #474747;
}
#login-form > input::placeholder{
  color: #d5d5d5;
}
#login-form > input[type="submit"]{
  color: #fe3d24;
  font-size: 16px;
  background-color: #1d0401;
  margin-top: 20px;
}
.base{
  width: 400px;
  height: 350px;
  border-radius: 20px;
  padding: 40px;
  background-color: #000000;
  box-sizing: border-box;
  text-align: center;
}
.base > h2{
  font-size: 36px;
  color: #fe3d24;
  margin-top: 80px;
  margin-bottom: 40px;
}
.base > button{
  width: 50%;
  height: 48px;
  padding: 0 10px;
  font-size: 24px;
  color: #fe3d24;
  box-sizing: border-box;
  margin-bottom: 16px;
  border-radius: 6px;
  background-color: #474747;
}

참조

https://velog.io/@910/PHP-MySQL