본문 바로가기
웹 개발

[2주차] 로그인 구현 #1 - 메인 페이지 /로그아웃 기능 구현

Haemaa 2023. 4. 10. 01:00

로그인 기능을 구현해놓은 결과만 있는 것이 아니라 여러 시행착오와 과정들에서 보완점과 느낀점이

함께 적혀있습니다 읽을 때 고려해주세요!

 

 

 

 

 

-------------------------------------------------------

로그인 기능을 구현해볼 것이다

디자인 같은 건 일단 논외로 하고,

지정된 아이디와 비밀번호가 아니면 메인페이지로 들어갈 수 없는 페이지를 만들려고 했다

 

그리고 만약 틀린 아이디를 입력했을 경우는

다른 창으로 넘어가는 게 아닌 로그인 페이지에 그대로 머물렀으면 했다

 

 

처음은 간단하게 form 태그를 이용해서 get 방식으로 id와 password를 logincheck.php로 보내는 코드로만

페이지를 구성했다.

 

login.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewpoint" content="width=device-width, initial-scale=1.0">
    <title>Normaltic login hw</title>
</head>
<body>
	<form action="logincheck.php" method="get">
    	<h1>2주차 로그인 기능 구현 과제</h1>
        <input type="text" name="id" placeholder="여기에 아이디를 치세요">
        <input type="text" name="password" placeholder="여기에 비밀번호를 치세요">
        <input type="submit" value="제출">
    </form>
</body>
</html>

logincheck.php

<?php
$id = $_GET["id"]
$pwd = $_GET["password"];
if ($id == "bg5294" && $pwd == "1111") {
 echo "로그인 성공하셨습니다!";
 } else {
 echo "아이디와 비밀번호가 올바르지 않습니다.";
 }

 

이까지 작성했을 때 화면을 보면, 올바르게 입력했을 때

input 란에 적은 값들이 get 방식으로 logincheck.php로 넘어가 조건문에 지정된 문구가 echo로 출력된다.

틀린 아이디와 비밀번호를 입력했을 경우에는

역시나 잘 출력된다.

 

하지만 이걸로는 로그인을 했다라고 말하기에 애매하다

화면에 뜨는 문구만 다를 뿐, 성공하든 실패하든 텍스트 바뀌는 것 빼고는

차이점이 전혀 없다

 

그래서 logincheck.php에다가 get방식으로 정보를 보내는 것이 아니라

login.php로 보내면 안되나? 라는 생각으로 코딩을 시도해보았다

 form 태그 action이 login.php로 자기자신으로 되어있고

 php코드에 echo로 get으로 받은 id가 출력되게 했다

아무렇게나 한번 입력해보면

입력한 정보가 잘 뜬다. 오...이렇게 하면 되려나?

 

<?php
if ($_GET["id"] == "bg5294" && $_GET["password"] == "1111") {
 alert ("로그인이 성공했습니다.");
} else {
 alert ("로그인이 실패했습니다.");
}
?>

이러면 bg5294와 1111이 맞았을 경우에는 성공, 아닐 경우 실패라는 경고창이 뜬다

 

이 방법을 한단계 심화시켜서 idalert()라는 함수를 만들어보았다

idalert()는 지정된 아이디가 맞았을 경우는 logincheck.php로 페이지를 이동시키고

아닐 경우는 입력한 정보와 맞지 않는다는 경고창을 내뱉는다.

<script>
function idalert() {
	inputid = document.getElementById('id').value;
    inputpwd = document.getElementById('password').value;
    if (inputid == 'bg5294' && inputpwd == '1111'){
    	window.location.replace('logincheck.php');
    } else {
    	alert('입력하신 정보가 맞지 않습니다.');
    }
}
</script>
<input type="submit" value="제출" onClick="idealert()">

그런데 이렇게 코드를 짤 경우, 문제가 있다는 것을 깨달았다

form 태그로 logincheck.php로 값을 전달해주지 못하면, 해커가 logincheck.php라고 url만 변경해도 바로

페이지를 이동할 수 있고 그렇다고 form 태그로 감싸자니 else 다음 코드인 alert를 실행한 후, 역시나 똑같이

logincheck.php 페이지로 이동했다

성공해도 넘어가고, 실패해도 페이지가 넘어가는 코드인 것이다.

시도는 좋았지만 결과는 똥이었음

 

최종 보완

그래서 logincheck.php의 조건문에 이런 코드를 추가했다

 

echo "<script>location.href='./login.php';</script>";

이 코드를 추가하면 form 태그를 받아서 logincheck.php로 넘기는 건 그대로이면서

logincheck.php 페이지자체에서 로그인 값이 아닐 경우 바로 되돌아가게 만들어준다.

 

logincheck.php

<?php
$id = $_GET["id"];
$pwd = $_GET["password"];
if ($_GET['id']=='bg5294' %% $_GET['password']=='1111'){
	echo "현재".$_GET['id'].'님으로 로그인 되어있습니다';
} else {
	echo "<script>location.href='./login.php';</script>";
}
?>

 

화면을 보자

 

올바른 계정을 입력하면 로그인에 성공했다는 alert 경고창이 나오면서

다음으로 메인 페이지로 넘어간다 아주 좋다

get방식으로 id와 비밀번호를 넘겼으므로 url에도 잘 표시되고 있다

이 방법의 좋은 점은 다음과 같이 바로 logincheck.php로 접속할 경우에도 id와 password를 모르면 

else 이후의 코드가 실행되면서 바로 로그인 페이지로 되돌아간다

엔터를 누르면, 로그인 페이지가 잘 나오는 것을 볼 수 있다

 

만약 아이디를 틀리게 입력하면

 

입력하신 정보가 맞지 않는다는 경고창이 나오고 창이 새로고침되면서

 

그대로 로그인 페이지에 머무는 것을 볼 수 있다

 

처음 기획했을 땐 alert만 띄우고 새로고침조차 하지 않는 정적인 상태를 만드는 것이 목표였는데,

form 태그를 이용해 get 방식으로 보내야하는 이상 현 시점에선 무리가 있다고 판단했다.

 

이게 최선이어써...

 

 

메인 페이지도 구성했다

 

현재 어떤 계정으로 로그인 되어있는지를 보여주고,

 

간단한 디자인이 되어있으면서

아직 구현은 하지 않은 로그아웃버튼과

들어간 시점의 현재 시간이 표시된다.

logincheck.php

<?php
$id = $_GET["id"];
$pwd = $_GET["password"];
if ($_GET['id']=='bg5294' %% $_GET['password']=='1111'){
	echo "현재".$_GET['id'].'님으로 로그인 되어있습니다';
    echo '<br>안녕하세요!';
} else {
	echo "<script>location.href='./login.php';</script>";
}
?><br>
<h1>이곳은 메인 페이지입니다</h1>
<input type='text' placeholder='작성하고 싶은 내용을 써넣으세요'>
<br><br>
<input type="submit" value='로그아웃'>
<br><br>
<script>
var today = new Date();
document.write(today)
</script>

 

다음은 로그아웃 기능이다

 

 

로그아웃 버튼에 onClick= 을 추가해서 여기에 javascript 코드를 써넣을 것이다

 

처음에 확인창이 뜨면서 로그아웃 할 것인지를 물어보고, 취소를 누르면 그대로 남아있고,

확인을 누르면 로그아웃되어 로그인창으로 되돌아간다

 

 

로그아웃이 잘 되었다

 

로그아웃을 구현하기 위해서 confirm을 이용했는데, confirm은 확인을 눌렀을 때 True를 반환하고,

취소를 누르면 False를 반환한다. 그래서 if 안에 confirm을 넣어 True를 반환할 때만

로그인 페이지로 되돌아가는 코드를 추가했다

<input type="submit" value='로그아웃' onClick="
if (confirm('정말 로그아웃 하시겠습니까?')){
	location.href='./login.php';
};
">

최종적으로 웹 사이트에 사용된 로그인페이지와 로그인 검증 코드입니다.

 

test.php

<!DOCTYPE html>
<html>
<?php
    session_start();
    if(isset($_SESSION['is_login'])){
        header('Location: ./main.php');
    }
?>
<head>
    <meta charset="utf-8"/></head> 
    <title>login</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>   
<span class="d-block p-2 text-bg-dark"><h1>White Hacker haemaa</h1></span>
<span class="d-block p-2 text-bg-secondary">made by bokyu</span>
<span class="d-block p-2 text-bg-secondary">made by bokyu<a class="nav-link" href="./qna_board.php" style="float:right;">문의 게시판</a></span>
<span class="d-block p-2 text-bg-dark">web hacking test web</span>
       <br><p>아이디 비밀번호 입력하세요</p><br>
    <form action='login_proc.php' method='POST'>
    <div class="row mb-3">
        <label for="inputPassword3" class="col-sm-2 col-form-label">ID</label>
    <div class="col-sm-10"> 
        <input type='text' class="form-control" name='id' placeholder='여기에 아이디를 입력하세요' /></p>
        </div>
</div>
        <div class="row mb-3">
        <label for="inputPassword3" class="col-sm-2 col-form-label">PW</label>
    <div class="col-sm-10">
        <input type='password' class="form-control" name='pw' placeholder='여기에 비밀번호를 입력하세요'/></p>
    </div>
</div>
        <br><Br><input type='submit' style="float:right;" value='로그인' class="btn btn-secondary"/>
        <br><br>
    </form>
    <?php
    if(isset($_SESSION['msg'])){
        echo $_SESSION['msg'];
        unset($_SESSION['msg']);
    }
   ?>
   <br><Br>
    <form action='enroll.php' method='POST'>
    <div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
  아직 회원가입을 하지 않으셨나요?
</div>
<div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end">
  아래 버튼을 눌러 회원가입을 진행해주세요
</div><br>
    <input id="enroll" style="float:right;"type='submit' class="btn btn-secondary" value='회원가입'/>
    </form>
</body>
</html>

 

 

login_proc.php

<?php
session_start();
$con = mysqli_connect('localhost','root','1234','test');
// mysqli_select_db($con,'test');
$input_id = $_POST['id'];
$input_pw = $_POST['pw'];

//식별 & 인증 분리 로그인 CASE
//아이디가 있는지 없는지 검사
$query = "SELECT username,password FROM user WHERE username='$input_id'";
$result = $con -> query($query); //쿼리문을 데이터베이스에 적용시켜라
//아이디가 있으면 비밀번호 검사
if(mysqli_num_rows($result)>=1) {
    $row=mysqli_fetch_assoc($result);
    if($row['password']==$input_pw){
        $_SESSION['is_login']=true;
        $_SESSION['id']=$input_id;
        header('Location: ./main.php');
    } else {
        $_SESSION['msg']='wrong id or pw';
        header('Location: ./test.php');
    }
}else{
    $_SESSION['msg']='null id or pw';
    header('Location: ./test.php');
}
?>

 

----------------------------------------------------------------------------------------------------------

이렇게 로그인 기능과 메인 페이지를 구성하고 로그아웃 기능까지 구현해보았다

 

다른 블로그들을 참조해보니 session 기능도 이용한 블로그도 많았는데 아직 session 기능은 이용해보지 못했다

아마 다음 과제에서는 session을 추가해야할 것이다

메인 페이지가 복잡해질 수록 여러 페이지들을 불러와야 하는데, 세션id를 이용하지 않으면 매번 인증을 받아야하므로 

로그인을 한 이유가 없기 때문이다.

그래서 간단한 로그인 기능만을 구현해보았는데 차차

코딩을 해보고 부족한 부분이 보이면 더 보완할 계획이다

'웹 개발' 카테고리의 다른 글

[3주차] 가능한 로그인 로직 연구 - 식별과 인증  (1) 2023.04.19
[2주차] 로그인 구현 #2 - 세션을 이용한 PHP 로그인 기능 구현  (0) 2023.04.11
[1주차] GET / POST 메서드로 웹 서버에 데이터 보내기  (0) 2023.04.05
[1주차]Happy Hacking 글자 화면에 출력하기  (0) 2023.04.04
[1주차] MySQL - PHP 연동해서 화면 띄우기 & 에러 해결기...  (0) 2023.04.03

'웹 개발' Related Articles

티스토리툴바