이전 편에서 회원가입 기능을 구현해 보았다. 이번 편은 회원가입을 이어서 로그인과 로그아웃 기능을 구현하는 예제이며 간단하게 아이디, 비밀번호 그리고 아이디 저장 기능 까지 구현해 보도록 하자 

 

참고로 본 예제는 이전 편에서 회원가입 구현과 연계되니 이전 포스팅을 미리 확인해야 본 예제를 이용하여 기능 구현이 가능하다. 

 
PHP를 이용하여 회원가입 기능을 구현 해보자
본 예제를 이용한 회원가입기능을 테스트하기 위해선 웹 서버가 필요하니 참고바라며 본 예제에서는 이러한 내용들은 포함되지 않았으니 소스코드를 참고하여 웹 서버 지원이 되는 곳에서 테스트를 해보기 바란다. 회원가입 서비스를 구현하기 위해선 여러 기능들이 필요하다. 단 모든 기능들을 예제로 표현하기는 어렵기 때문에 이번 편에서는 단순하게 회원 기본정보만을 이용하···
blog.redinfo.co.kr/post/view?pid=173

 

1. 로그인 FORM 과 로그아웃 | login.php 
<?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 } ?>

 

2. 로그인 체크 | login-complete.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));

 

3. 로그아웃 기능 구현 | logout.php

로그인후 로그아웃을 할 수 있는 기능을 구현다. 

<?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!')));
	}

 

위와 같이 로그인 기능 및 로그인 후 로그아웃 기능 까지 구현하는 방법에 대해 알아보았다.  다음 편에서는 회원정보를 수정하는 예제에 대해 알아보도록 하자.