2023.04.08 - [웹 모의해킹 공부/과제] - [2주차 과제 -1] 회원 가입 페이지 구현
[2주차 과제 -1] 회원 가입 페이지 구현
2023.04.03 - [웹 모의해킹 공부/과제] - [Web] 로그인 기능 구현 001 (회원가입 페이지 구현) 2023.04.03 - [웹 모의해킹 공부/과제] - [Web] 로그인 기능 구현 002 (로그인 & 로그아웃 구현) [Web] 로그인 기능 구
jisu069.tistory.com
구현에 사용된 프로그램
- Ubuntu-22.04.2
- Apache2 : Apache/2.4.52 (Ubuntu)
- PHP : PHP 8.1.2-1ubuntu2.11(cli)
- MySQL : mysql Ver 8.0.32-0ubuntu0.22.04.2 for Linux on x86_64 ((Ubuntu))
- phpmyadmin
- Visual Code(Widnows11)
00. 로그인 구현
00-1) 로그인 기능 구현(세션 사용!!)
<?php
session_start();
include('./connect.php');
$userId = $_POST['userId'];
$userPw = $_POST['userPw'];
$salt = '$5$QOPrAVIK'."$userId".'$';
$hashPw = crypt($userPw, $salt);
$sql = "select * from userTB where userId='$userId';";
$rst = mysqli_query($con, $sql);
$id = mysqli_num_rows($rst);
if(!$id){
echo "
<script>
alert(\"ID and password do not match!!\");
history.back();
</script>
";
exit;
} else{
$user = mysqli_fetch_array($rst);
$password = $user['userPw'];
if($hashPw != $password){
echo "
<script>
alert(\"ID and password do not match!!\");
history.back();
</script>
";
exit;
} else{
$_SESSION['sIdx'] = $user['userIdx'];
$_SESSION['sId'] = $user['userId'];
$_SESSION['sName'] = $user['userName'];
$_SESSION['sEmail'] = $user['userEmail'];
$_SESSION['sDate'] = $user['userDate'];
mysqli_close($con);
echo "
<script>
location.href = \"./main.php\";
</script>
";
};
};
?>- 해시 함수로 암호화한 사용자 비밀번호를 설정했던 키값으로 비교한다
- 로그인 실패 할 경우 ID와 PW가 일치하지 않는다고 경고해준다(공격자가 ID가 틀렸는지 PW가 틀렸는지 모르게하기 위해)
- 로그인을 성공 할 경우 세션 변수($_SESSION[''])에 로그인 한 사용자의 정보를 넣는다
- 로그인 성공 할 경우에는 main.php로 이동시킨다
00-2) 메인 페이지 php 구현(사용자마다 메인 페이지가 달라야하므로 php로 작성)
<?php session_start();?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $_SESSION['sName'];?> Main Page</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/shared.css">
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<header>
<a href="main.php" id="logo">Wlkate</a>
<nav>
<ul>
<li><a href="#">Board</a></li>
<li><a href="#">Setting</a></li>
<li><a href="logout_ok.php">Logout</a></li>
</ul>
</nav>
</header>
<main class="wrap" id="main_wrap">
<section>
<h1>Welcome Wlkate Site </h1>
<div id="content_wrap">
<div id="img_content">
<img src="./img/logo.png"></img>
<h2><?php echo $_SESSION['sName']; ?>'s!!</h2>
<h3>E-mail : <?php echo $_SESSION['sEmail'];?></h3>
<h3>Register Day : <?php echo $_SESSION['sDate']; ?></h3>
</div>
<div id="flex_content">
<div class="content">
<p class="content_data">
<h2>data0!!</h2>
<p>data data data</p>
</p>
</div>
<div class="content">
<p class="content_data">
<h2>data1!</h2>
</p>
<p>data data data</p>
</div>
<div class="content">
<p class="content_data">
<h2>data2!</h2>
</p>
<p>data data data</p>
</div>
</div>
</div>
</section>
</main>
<footer></footer>
</body>
</html>- 세션 변수를 불러와서 사용자의 이름, 사용자의 이메일, 사용자의 가입일을 출력해준다
 |
 |
 |
 |
00-3) 로그 아웃 기능 구현
<?php
session_start();
session_unset();
echo "
<script>
alert(\"Logout!!\");
location.href = \"./index.html\";
</script>
";
?>- session_unset() : 세션을 모두 닫아준다
- 로그아웃 성공을 알려주고 로그인 페이지로 이동
01. main.css(메인화면에서 만 사용할 css)
/* ========== Main ========== */
#main_wrap section{
width: 100rem;
height: 30rem;
padding: 10rem 0;
margin-top: 6rem;
background-color: rgb(255,255,255);
box-shadow: 0 10px 20px rgba(0,0,0,0.2), 0 6px 4px rgba(0,0,0,0.2);
border-radius: 7px;
text-align: center;
}
#content_wrap{
display: flex;
justify-content: space-between;
}
#img_content{
width: 20rem;
height: 20rem;
margin: 3rem;
}
#img_content img{
width: 100%;
}
#flex_content{
display: flex;
flex-direction: column;
}
.content{
background-color: rgb(155, 155, 155);
width: 60rem;
height: 10rem;
border-radius: 5px;
margin-right: 10rem;
}
.content_data{
font-size: 16px;
margin: 1.5rem 2rem;
text-align: center;
}'모의해킹 공부 > WEB 개발' 카테고리의 다른 글
| [5주차 과제-1] 게시판 DB구축 & 메인 페이지 구현 (0) | 2023.04.29 |
|---|---|
| [4주차 과제-1] 회원가입 - 주소 검색 기능 구현 (0) | 2023.04.26 |
| [2주차 과제 -1] 회원 가입 페이지 구현 (0) | 2023.04.08 |
| [1주차 과제-3] DB연결 (0) | 2023.04.01 |
| [1주차 과제-2] Happy Hacking & GET / POST Method (0) | 2023.04.01 |
