Linux/Linux 실습

[Linux] HTML 로그인 페이지 구현

GGkeeper 2021. 11. 11. 01:10

실습> 로그인 구현하기

login.html    : 로그인 페이지
loginok.html  : 로그인 인증 페이지 (사용자/비번을 소스코드에 저장)
logout.html   : 로그아웃 페이지


             로그인/로그아웃 흐름도
   +--------------------------------------+
   |                                      |
   |                                      |
   |                                      v
로그인 페이지     로그인 인증        로그아웃 페이지
login.html -----> loginok.html ----> logout.html 
       로그인 흐름도        |                  |
   ^                세션생성           세션삭제
   |                   |                  |
   +-------------------+                  |
                                          |
   ^                                      |
   |                                      |
   +--------------------------------------+

1. 웹 서버 설정
.html 파일을 php 로 인식하게 하기 위해서 웹 서버 설정파일을 수정한다.
# vi /etc/httpd/conf.d/php.conf
<FilesMatch \.php$>                                                                                                           
    SetHandler application/x-httpd-php
</FilesMatch>

<FilesMatch \.html$>
    SetHandler application/x-httpd-php
</FilesMatch>
  :
  :(생략)
# systemctl restart httpd

2. 소스코드 작성

login.html 소스
<?
session_start();
?>

<html>
<head>
  <title> ::: 로그인 프로그램 ::: </title>
  <meta charset="utf-8"/>
</head>

<body>

<?
if(isset($_SESSION['userid']))  // 로그인 했다면
{
?>

<table align=center border=1 cellpadding=5 cellspacing=0>
<tr align=center>
  <td align=center> <?=$_SESSION['username'] ?> 님 환영합니다. </td>
</tr>
<tr align=center>
  <td align=center> <a href=logout.html> 로그아웃 </a> </td>
</tr>
</table>

<?
} else {  // 로그아웃 했다면 
?>
<form method=post action=loginok.html>
<table align=center border=1 cellpadding=5 cellspacing=0>
<tr align=center>
  <td> 아이디 </td> <td> <input type=text name="userid"> </td>
<tr>
<tr align=center>
  <td> 비밀번호 </td> <td> <input type=password name="userpw"> </td>
<tr>
<tr align=center>
  <td align=center colspan=2> <input type=submit value=로그인> </td>
<tr>
</table>
</form>

<?
}
?>

</body>
</html>


loginok.html 소스
<?
session_start();  // 세션 시작

$dbuser = "whitehacker";
$dbpass = "P@ssw0rd";

if($_POST['userid'] == $dbuser && $_POST['userpw'] == $dbpass)
{  // 세션 생성

    $_SESSION['userid'] = "whitehacker" ;  // 세션변수 userid 를 생성한다.
    $_SESSION['username'] = "화이트해커"; // 세션변수 username 을 생성한다.
   echo " <script language=JavaScript>
          <!--
              location.href = 'login.html';
          //-->
          </script>
        ";

} else { // userid / userpw 가 틀렸다면 에러메세지를 출력하고 이제 페이지로 돌려보낸다.
   echo " <script language=JavaScript>
          <!--
              alert('아이디/비번을 확인해주세요.');
              history.go(-1);
          //-->
          </script>
        ";
}

?>


logout.html 소스
<?
session_start();    // 세션 시작
session_destroy();  // 세션 삭제

// login.html 로 다시 돌려 보낸다.
echo " <script language=JavaScript>
       <!--
          location.href = 'login.html';
       //-->
       </script>
     ";
?>

3. 로그인 시도
아래 사이트로 접속해서 로그인 폼에 값을 넣고 로그인을 시도한다.
http://192.168.108.3/login.html