로그인 페이지 만드는 것은 원래 프론트 엔드의 것이지만 일단 프론트 엔드는 대충 구현할 겁니다.
지금은 백 엔드를 먼저 구현할 것이기 때문에 나중에 프론트 엔드 구현하도록 하겠습니다.
(아직 nodejs, npm 설치에서 오류를 해결하지 못하기도 했고, React를 어떻게 배포해야 될지 모르기 때문입니다.)
파일은 아래와 같은 형태로 되어 있습니다.
| pages | |
| login.html main.html |
|
| phps | |
| login.php logout.php |
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Log in · essential ;</title>
</head>
<body>
<form action="http://localhost/phps/login.php" method="POST">
<h1>Login</h1>
<div>
<input type="text" name="userid" placeholder="ID"/>
</div>
<div>
<input type="password" name="password" placeholder="Password"/>
</div>
<div>
<input type="submit" value="Log in" />
</div>
</form>
<div>Don't have an account? <a href="http://localhost/pages/signUp.html">Sign up</a></div>
</body>
</html>
미리보기
Don't have an account? Sign up
login.php
<?php
# php 에러 출력
error_reporting(E_ALL);
ini_set("display_errors", 1);
# 세션 실행
session_start();
# $conn에 mysql에서 testdb라는 데이터 베이스를 testuser라는 유저로 localhost에 연결합니다.
$conn = mysqli_connect('localhost', 'testuser', '비밀번호', 'testdb');
# login.html에서 userid를 받으면 변수 $userid에 넣습니다.
$userid = $_POST['userid'];
# login.html에서 password를 받으면 변수 $userpw에 넣습니다.
$userpw = $_POST['password'];
# $sql에 usertable에서 userid와 password를 가져옵니다.
$sql = "SELECT * FROM usertable where userid='$userid' AND password='$userpw'";
# $query는 $conn, $sql을 실행합니다.
$query = mysqli_query($conn, $sql);
# $user는 $query에서 배열의 형태로 가져옵니다.
$user = mysqli_fetch_array($query);
# $user가 참이면 성공
if($user) {
# 세션 sName에 name을 넣습니다. (메인 페이지에 해당 유저가 로그인했다는 것을 표시하기 위해)
$_SESSION['sName'] = $user['name'];
$_SESSION['sEamil'] = $user['email'];
#연결 끊기
mysqli_close($conn);
# 성공했으니 main.html로 이동 (React였으면... 그냥 index.html로 보내면 되는데... 오류가 아직..)
echo "<script>window.location.replace('http://localhost/pages/main.html');</script>";
# 종료
exit;
# 실패
} else {
# 틀렸다는 문구 (Instergram 오마주)
echo "<script>alert('Sorry, your password was incorrect. Please double-check your password.');</script>";
# 실패 했으니 다시 login.html로 이동
echo "<script>window.location.replace('http://localhost/pages/login.html');</script>";
# 종료
exit;
};
?>
main.html
<?php session_start(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>essential ;</title>
</head>
<body>
<h1>Main page</h1>
<div>Name : <?php echo $_SESSION['sName']; ?></div>
<div>Email : <?php echo $_SESSION['sEmail']; ?></div>
<button type="button" onclick="location.href='http://localhost/phps/logout.php'">
Log out
</button>
</body>
</html>처음에 session_start를 HTML 중간에 놔두면 php 실행문이 전체 다 주석으로 처리돼서 메인페이지인데 유저이름하고 이메일이 안 뜨게 되더라구요. 아예 시작지점부터 해두니깐 잘되네요.
미리보기
Main page
Name : testid
Email : test@test.com
logout.php
<?php
# 세션 시작
session_start();
# 가지고 있는 세션의 모든 데이터 삭제
session_destroy();
# 로그아웃 했으니 index.html으로 이동
header("Location: http://localhost");
?>
마치며
session_unset과 session_destroy 차이는 데이터는 몇개만 두고 삭제하느냐 모두 삭제하느냐 차이인 것 같네요.
저도 destroy만 사용하려고 합니다.
직접 구현해보니 거슬리는 부분이 많이 보입니다.
예를들어
- 로그인 전 메인페이지와 로그인 후 메인페이지가 나눠져 있다는 점 (만약 로그인 된 상태에서 로그인 전 페이지로 가질 수 있다는 점, 아니면 세션을 이용해 못가게 막을 수 있지만...)
- 비밀번호 평문 저장
- 회원가입시 비밀번호 길이나 특수문자 제안 등
- 프론트 엔드 input 부분에 아무런 대책을 안했고, 백 엔드도 필터링을 안해서 SQL Injection 공격을 받을 수 있다는 점
강의를 들으면서 해커의 시점으로 보게 되다 보니 배운 것을 활용해서 직접 구현하는 도중에 아! 이 부분은 이렇게 해킹 당할 수 있겠는데?라는 생각이 조금씩 들기 시작했습니다.
좋은 진전이라 생각되네요.
'개발자 (Developer) > 백 엔드 (Back-End)' 카테고리의 다른 글
| 회원가입 페이지에서 주소검색 추가 (다음 주소검색 API) (2) | 2023.04.26 |
|---|---|
| 회원가입 페이지 구현 (0) | 2023.04.24 |
| MySQL · PHP 연동하기 (DB연동) (0) | 2023.04.12 |
| GET / POST 메소드로 웹 서버에 데이터 전달해보기 (0) | 2023.04.05 |
| MySQL 데이터베이스와 테이블 생성 (0) | 2023.04.05 |
댓글