1주차 과제
(admin / admin1234) 라고 입력했을 때 로그인을 시켜주는 페이지를 만들어보기.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>LOGIN</h1>
<form action="proc/login_proc.php" method="POST">
<label for="name">Username</label>
<input type="text" name="name" required="">
<label for="password">Password</label>
<input type="password" name="passwd" required="">
<button type="submit">Sign In</button>
</form>
<div class="signup-link">
<p>Don't have an account? <a href="signup.html">Sign up</a></p>
</div>
</div>
</body>
</html>form 태그를 보면 Sign in버튼을 누르면 입력한 name과 passwd가 POST method를 통해 proc/login_proc.php로 전송 되는걸 알 수 있다. 그럼 login_proc.php를 살펴보자!
login_proc.php
<?php
session_start();
$username = $_POST['name'];
$password = $_POST['passwd'];
if ($username === 'admin' && $password === 'admin1234') {
$_SESSION['username'] = $username;
header("Location: /login.html");
exit();
}
else {
echo
'<script>
alert("Invalid username or password!!!!");
location.href = "/index.html";
</script>';
}
?>코드를 살펴보면 POST로 전송된 파라미터가 name=admin&passwd=admin1234 일때 조건문을 사용해 login.html로 리다이렉트되고 아닐 경우 Invalid username or password!!!! 메세지가 나온 후 index.html로 리다이렉트 되는 걸 알 수 있다.
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>HELLO ADMIN</h1>
<h2>Welcome</h2>
<form action="/proc/logout_proc.php" method="POST">
<button type="submit">Sign Out</button>
</form>
<div class="signup-link">
<p>Success!!!!</p>
</div>
</div>
</body>
</html>로그인이 될 경우 리다이렉트 되는 페이지이다. admin 환영 문구와 함께 로그아웃을 할 수 있는 버튼이 있다. 버튼을 누를 경우 POST method를 통해 proc/logout_proc.php로 전송 되는걸 알 수 있다. 여기서 의문점이 하나 있다! 그냥 링크 태그를 이용해서 로그아웃하면 되는 거 아닌가? 이런 생각을 할 수 있다 그것도 맞는 방법이긴 하다 하지만 login_proc.php 코드를 살펴보면 세션 변수에 사용자 정보를 저장하는 걸 알 수 있다 세션 정보를 삭제하지 않은 상태로 로그아웃을 하게 된다면 보안상의 문제가 생길 수도 있다!
logout_proc.php
<?php
session_start();
session_unset();
session_destroy();
header("Location: /index.html");
exit();
?>모든 세션 변수를 해제 한 후에 세션 종료 후 안전하게 index.html로 리다이렉트 되는 걸 볼 수 있다. 코드를 확인해 보았으니 잘 동작이 되는지 확인해 보자!
index.html로 접속
잘못된 정보 입력
설정한 에러 메시지 출력
admin & admin1234 입력
로그인 성공!
