이전 편에서 회원가입 기능을 구현해 보았다. 이번 편은 회원가입을 이어서 로그인과 로그아웃 기능을 구현하는 예제이며 간단하게 아이디, 비밀번호 그리고 아이디 저장 기능 까지 구현해 보도록 하자
참고로 본 예제는 이전 편에서 회원가입 구현과 연계되니 이전 포스팅을 미리 확인해야 본 예제를 이용하여 기능 구현이 가능하다.
<?php // login.php
// 세션 시작
session_start();
// 아이디 저장이 있을 경우
if(!isset($_COOKIE['AUTH_ID_CHECK'])){ $_COOKIE['AUTH_ID_CHECK'] = ''; }
// 로그인 여부에 따른 처리
$member = false;
if(isset($_SESSION['member']) && $_SESSION['member'] != ''){
$member = $_SESSION['member'];
}
?>
<!-- jquery 사용을 위한 라이브러리 로드 -->
<script src="//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<?php if( $member !== false){?>
<div id="mypage">
<div class="top"><strong><?php echo $member->NAME ?></strong>님 환영합니다.</div>
<div class="myinfo">
<ul class="item">
<li class="title">아이디</li>
<li class="value"><?php echo $member->ID; ?></li>
</ul>
<ul class="item">
<li class="title">이름</li>
<li class="value"><?php echo $member->NAME; ?></li>
</ul>
<ul class="item">
<li class="title">휴대폰 번호</li>
<li class="value"><?php echo $member->HPP; ?></li>
</ul>
<ul class="item">
<li class="title">이메일</li>
<li class="value"><?php echo $member->EMAIL; ?></li>
</ul>
<ul class="item">
<li class="title">성별</li>
<li class="value"><?php echo $member->GENDER == 'M' ? '남성':'여성'; ?></li>
</ul>
<ul class="item">
<li class="title">생년월일</li>
<li class="value"><?php echo $member->BIRTHDAY; ?></li>
</ul>
<ul class="item">
<li class="title">가입일</li>
<li class="value"><?php echo $member->CREATE_DT; ?></li>
</ul>
<ul class="item">
<li class="title">변경일</li>
<li class="value"><?php echo $member->MOD_DT; ?></li>
</ul>
</div>
<div class="logout"><a id="logout" href="#none" onclick="return false;" >로그아웃</a></div>
</div>
<!-- 로그인 후 style -->
<style>
#mypage{ width:100%; max-width: 500px; margin:30px auto; }
#mypage .top{ margin:10px 0; font-size:17px; }
#mypage ul{ overflow: hidden; }
#mypage ul li{ float: left; list-style:none; line-height:30px; padding:10px 0; }
#mypage ul li.title{ width:140px; text-align:center; font-weight:900; background-color:#fafafa; }
#mypage ul li.value{ margin-left:5px;}
#mypage .logout a{ border:solid 1px #eee; background-color:#333; color:#fff; text-decoration:none; padding:5px 3px; width:100%; text-align:center; display:inline-block}
</style>
<!-- 로그아웃 script -->
<script>
var authSubmit = true;
$(document).on('click','#logout',function(){
if( !confirm("로그아웃 하시겠습니까?") ){ return false; }
authSubmit = false;
$.ajax({url:"logout.php", dataType:'json' , type: 'post'})
.done(function(e){
if( typeof e.msg !='undefined' && e.msg != '' ){ alert(e.msg); }
if( e.rst == 'success'){ window.location.reload(); }
})
.always(function(e){
authSubmit =true;
})
.fail(function(e){ alert('오류가 발생하였습니다.'); })
});
</script>
<?php }else{ ?>
<!-- 로그인 폼 html -->
<form id="form-login" name="form-login" method="post" action="login-complete.php" onsubmit="return false;">
<h1>로그인</h1>
<ul class="item">
<li class="title">아이디</li>
<li class="value">
<input type="text" name="id" value="<?php echo $_COOKIE['AUTH_ID_CHECK'] != '' ? $_COOKIE['AUTH_ID_CHECK']: null ?>" placeholder="아이디를 입력해주세요.">
</li>
</ul>
<ul class="item">
<li class="title">비밀번호</li>
<li class="value">
<input type="password" name="password" value="" placeholder="비밀번호를 입력해 주세요.">
</li>
</ul>
<div class="sub-item"><label><input type="checkbox" name="id-check" value="Y"<?php echo $_COOKIE['AUTH_ID_CHECK'] != '' ? ' checked':null ?>> 아이디를 저장합니다.</label></div>
<div class="submit"><a id="login-submit" href="#none" onclick="return false;">로그인</a></div>
</form>
<!-- 로그인 폼 style -->
<style>
h1{ text-align:center; }
input[type="text"]
,input[type="password"]
{line-height:30px;}
input[type="password"]{ width:300px;}
#form-login{ width:100%; max-width: 500px; margin:30px auto; }
#form-login ul{ overflow: hidden; }
#form-login ul li{ float: left; list-style:none; line-height:30px; padding:10px 0; }
#form-login ul li.title{ width:140px; text-align:center; font-weight:900; background-color:#fafafa; }
#form-login ul li.value{ margin-left:5px; }
#form-login .sub-item{ text-align:center; margin:10px 0; }
#form-login .submit{ text-align:center; }
#form-login .submit a{ text-decoration: none; background-color:#333; color:#fff; width:100%; max-width:120px; display: inline-block; text-align:center; padding:10px 0; }
</style>
<!-- 로그인 폼 script -->
<script>
var authSubmit = true;
$(document).on('click','#login-submit',function(){
var $form = $('#form-login');
var formData = $form.serialize();
authSubmit = false;
$.ajax({url:$form.attr('action'), data: formData, dataType:'json' , type: $form.attr('method')})
.done(function(e){
if( typeof e.msg !='undefined' && e.msg != '' ){ alert(e.msg); }
if( e.rst == 'success'){ window.location.reload(); }
})
.always(function(e){
authSubmit =true;
})
.fail(function(e){ alert('오류가 발생하였습니다.'); })
});
</script>
<?php } ?>
입력된 아이디와 비밀번호를 통해 회원여부를 체크하고 로그인 처리를 구현한다.
<?php
// DB연결설정 <!: 환경에 맞게 수정 필요>
$dbConfig = array(
'host'=>'localhost', // 호스트
'username'=>'', // DB USER 이름
'dbname'=>'', // DB명
'password'=>'', // DB 비밀번호
);
try{
$response = array('rst'=>'fail',',msg'=>'응답실패');
// 입력값 체크
if(empty($_POST['id'])){ throw new Exception("아이디를 입력해주세요."); }
if(empty($_POST['password'])){ throw new Exception("비밀번호를 입력해주세요."); }
// 입력값 재정의
$_POST['id']= strtolower($_POST['id']); // 아이디 소문자 변경
$_POST['password'] = '*'.strtoupper(sha1(sha1($_POST['password'], true)));
// MYSQLI 접속
$mysqli = @new mysqli($dbConfig['host'],$dbConfig['username'],$dbConfig['password'],$dbConfig['dbname']);
if( $mysqli == false){ throw new Exception("사이트 오류가 발생하였습니다."); }
// 계정정보 호출
$query = "SELECT * FROM MEMBER WHERE ID = '".addslashes($_POST['id'])."' ";
$resultData = new \stdClass;
if($result = $mysqli->query($query)) {
$resultData = $result->fetch_object();
$result->close();
}
else{
throw new Exception("사이트 오류가 발생하였습니다.");
}
if( !isset($resultData)){
// 계정정보가 없다는 메시지는 보안상 좋지 않기 때문에 정확하게 명시해줄 필요가 없다.
throw new Exception("로그인에 실패하였습니다.");
}
// 비밀번호가 틀렸다는 메시지는 보안상 좋지 않기 때문에 정확하게 명시해줄 필요가 없다.
if( $resultData->PASSWORD != $_POST['password']){ throw new Exception("로그인에 실패하였습니다."); }
// 아이디 저장 여부에 따른 처리
if( !empty($_POST['id-check']) && $_POST['id-check'] == 'Y'){
setcookie("AUTH_ID_CHECK",$_POST['id'],time()+(86400*364),"/",$_SERVER['HTTP_HOST']); // 1년간 저장
}
else{
setcookie("AUTH_ID_CHECK",'',time()-3600,"/",$_SERVER['HTTP_HOST']); // 쿠키 삭제
}
// 로그인 정보를 세션에 저장한다.
session_start();
$_SESSION['member'] = $resultData;
$response['rst'] = 'success';
$response['msg'] = '';
$mysqli->close();
}
catch(Exception $e){
$response['msg'] = "[".$e->getLine()."] ".$e->getMessage();
}
// 결과응답
die(json_encode($response));
로그인후 로그아웃을 할 수 있는 기능을 구현다.
<?php
// 세션 시작
session_start();
// 로그인 여부에 따른 처리
$member = false;
if(isset($_SESSION['member']) && $_SESSION['member'] != ''){
unset($_SESSION['member']);
die(json_encode(array('rst'=>'success')));
}
else{
die(json_encode(array('rst'=>'fail','msg'=>'Access Deny!')));
}
위와 같이 로그인 기능 및 로그인 후 로그아웃 기능 까지 구현하는 방법에 대해 알아보았다. 다음 편에서는 회원정보를 수정하는 예제에 대해 알아보도록 하자.