웹프로그래밍2012. 8. 29. 14:55

드디어 마지막으로 만들 로그아웃 부분이다. 로그아웃은 앞에서 만든 로그인 유지를 생각하면 쉽다.

로그인 유지를 위해서 만들어낸 정보를 다시 그대로 파기시키면 끝이기 때문이다.

따라서, 파기해야 할 값은 바로:

1) 세션에 등록된 값 파기

2) 데이터베이스에 등록된 값 파기

정도로 볼 수 있다.



<?php


//세션을 사용하기 위해 선언하는 부분

session_cache_limiter('');

session_start();

//데이터베이스에 접근하기 위한 부분

$dbid = "DB아이디";

$dbpass = "DB비밀번호";

$dbname ="DB네임";

$dbhost = "localhost";

$sqlConn = mysql_connect($dbhost, $dbid, $dbpass);

mysql_select_db($dbname, $sqlConn);


//세션에 등록된 아이디 가져오기

$id = $_SESSION['id'];


//세션에 등록된 토큰 파기

$_SESSION['token'] = 0;

//세션에 등록된 아이디 파기

$_SESSION['id'] = 0;

//데이터베이스에서 토큰 초기화

$tokenKill = "UPDATE MEMBERS SET token=0 WHERE id='$id'";

$tokenKill = mysql_query($tokenKill);

?>


값을 모두 0으로 초기화 하는 것이 중요하다.


Posted by 김또또
웹프로그래밍2012. 8. 28. 20:16

저번에는 로그인 처리의 구현을 해봤는데, 이번에는 로그인 유지하는 부분이다.

지난 부분을 살짝 뒤짚어보면 로그인 유지를 위한 키 값을 데이터베이스와 세션에 등록시켰던 부분이 있었다.

이번에는 그 두가지를 모두 불러와서 대조하고 사용할 것이다.


<?php

//세션을 사용하기 위해 선언하는 부분
session_cache_limiter('');
session_start();
//데이터베이스에 접근하기 위한 부분
$dbid = "DB아이디";
$dbpass = "DB비밀번호";
$dbname ="DB네임";
$dbhost = "localhost";
$sqlConn = mysql_connect($dbhost, $dbid, $dbpass);
mysql_select_db($dbname, $sqlConn);

//세션에서 토큰(키 값)을 가져온다.
$getSessionToken = $_SESSION['token'];
//세션에서 아이디를 가져온다.
$id = $_SESSION['id'];
//*사실 아이디와 같은부분은 서버에 부담을 최소화하기위해 쿠키에 저장하는게 바람직하다.
//데이터베이스에서 id가 가진 토큰을 가져온다.
$getDBToken = "SELECT token FROM MEMBERS WHERE id='$id'";
$getDBToken = mysql_query($getDBToken);
$getDBToken = mysql_result($getDBToken, 0);
//세션에 등록한 토큰과 데이터베이스의 토큰이 일치하면
if($getDBToken == $token && $token)
//로그인 인정
$login = 1;
else
$login = 0;
?>


다시 한번 강조하지만 이것은 간단한 로그인 구현을 목적으로 한 코딩이다.

실제로는 앞서 1편에서 말했듯이 HTTPS 프로토콜을 사용하며, 대조 시에 사용되는 정보도 IP주소 등을 포함해 더욱 많다.

여기서 작성된 코드는 단순히 토큰을 세션에 넣어두고, 데이터베이스에도 넣어둔 것을 비교해가면서 로그인 여부를 구현한다.


Posted by 김또또
웹프로그래밍2012. 8. 28. 12:15




2) 로그인 처리


가장 중요한 부분은 아무래도 여기다.

그런데 사전작업이 조금 필요하다. 로그인을 하려면 아이디/비밀번호가 일단 데이터베이스에 등록되어 있어야 하니깐,

mySQL 안에 임의로 MEMBERS라는 테이블 안에 id(char), password(char), token(char 64) 정도로 필드를 만들어두자.

각각의 필드는 다음의 역할을 할 것이다.


1) id : 로그인에 필요한 아이디
2) password: 로그인에 필요한 비밀번호
3) token: 로그인 한 후에 로그인 유지를 위해 임의의 값을 여기에 넣어둔 후 대조함으로써 로그인 유지


그리고 적당히 자신이 로그인에 쓸 아이디와 비밀번호를  mySQL에 하나 넣어둔다. token 값은 그냥 0으로 두고.


이제 코딩을 해보자면, 

<?php
//세션을 사용하기 위해 선언하는 부분
session_cache_limiter('');
session_start();
//데이터베이스에 접근하기 위한 부분
$dbid = "DB아이디";
$dbpass = "DB비밀번호";
$dbname ="DB네임";
$dbhost = "localhost";
$sqlConn = mysql_connect($dbhost, $dbid, $dbpass);
mysql_select_db($dbname, $sqlConn);
//아이디와 비밀번호의 값을 POST방식으로 받는 것
$id = $_POST['loginID'];
$pass = $_POST['loginPASS'];
//입력받은 아이디가 존재하는지 체크하기 위해 데이터베이스에서 id를 가져옴
$getID = "SELECT id FROM MEMBERS WHERE id='$id'";
$getID = mysql_query($getID);
$getID = mysql_fetch_array($getID);
//아이디가 있다면
if($getID['id']) {
//아이디를 바탕으로 그 아이디가 가진 곳의 비밀번호를 가져온다
$getPASS = "SELECT password FROM MEMBERS WHERE id='$id'";
$getPASS = mysql_query($getPASS);
$getPASS = mysql_result($getPASS, 0);
//데이터베이스에서 가져온 비밀번호가 입력받은 비밀번호와 같다면,
if($getPASS == $pass) {
//64자리의 무작위 문자열을 생성한다.
//이 64자리의 임의의 수가 바로 토큰으로 로그인 대조에 사용할 키 값.
$key = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789^/';
for($i=0;$i<=63;$i++)
$token .= $key[rand(0,63)];
//방금 만든 토큰을 데이터베이스에 업데이트한다.
//입력받은 아이디가 있는 위치에 업데이트.
$updateToken = "UPDATE MEMBERS SET token='$token' WHERE id='$id'";
$updateToken = mysql_query($updateToken);
//세션에 토큰 즉 키 값을 등록한다.
$_SESSION['token'] = $token;
return 0;
}
else {
echo "PASSWORD ERROR";
return 1;
}
}
else {
echo "ID DOESN'T EXIST";
return 1;
}
?>

isset()이나 is_null()로 변수를 좀 체크하는게 좋긴하겠지만.. 이정도로도 적당히 넘어갈 수 는 있을 것 같다.

설명은 주석으로 붙여놨으니 필요없을듯 하다.


Posted by 김또또
웹프로그래밍2012. 8. 28. 11:51

음 아무래도 진짜 로그인에는 HTTPS 프로토콜을 이용해서 전송되는 값을 암호화해야겠지만,

일단 간단하게 세션과 데이터베이스로 로그인 구성을 만들어 보자.

대충 만들어야 할 것은,


1) 로그인 폼

2) 로그인 처리

3) 로그인 유지

4) 로그아웃


정도가 되시겠다.


로그인 폼은 말그대로 로그인 할 때의 아이디/비밀번호 입력하는 창이고,

로그인 처리는 아이디 혹은 비밀번호의 일치 여부와 로그인 됐음을 알리는 신호를 보내며,

로그인 유지는 로그인이 됐으니까 어느 페이지에서도 로그인 값을 유지시킬 때 쓰면 되겠다.

로그아웃은 로그아웃이고.


이번에 만드려는 로그인은 제목에 쓴 대로 세션과 데이터베이스를 이용해서 작성해보려고 한다. (물론 HTML과 PHP는 기본 포함)


1) 로그인 폼

간단하게 로그인 폼을 구현해보자. CSS를 사용하여 이쁘게 만들면 보기도 좋겠지만, 

간단한 로그인 구현이 목적이니깐 간결하게 만들어서,


<html>

<form action="login.php" method="POST">

<span>id</span>

<br />

<input type="text" id="loginID">

<br />

<span>pass</span>

<br />

<input type="password" id="loginPASS">

<br />

<input type="submit" value="로그인">

</form>

</html>


 아이디와 비밀번호는 각각 loginID, loginPASS라는 id로 지정시켜놓고, 이 값을 login.php로  POST방식을 통해 보낸다.

전송 방식에는 POST와  GET방식이 있는데, GET방식은 홈페이지 주소에 나타나는 정보,

예를 들자면,

http://test.com/?page=3

page=3과 같이 주소를 통해서 page의 값이 3임을 보내는 방식을 말한다.

반면, POST방식은 주소에서 값이 드러나지 않으며, 페이지 내부에서 보낸다. 

쉽게 생각해보더라도 GET방식은 주소에 바로 노출이 되기 때문에, 로그인에는 적합하지 않으므로 POST방식을 사용한다.


Posted by 김또또
웹프로그래밍2012. 8. 28. 10:50

ajax는 비동기식 자바스크립트와 xml을 이야기하는데, 

대충 말하자면 페이지의 전체적인 로드없이 필요한 부분의 정보만 가져오는걸 말한다.

(참고로 말하자면 ajax의 발음은 아약스, 아작스 등으로 불리지만, 에이젝스가 정확하다고 한다.)

우리가 인터넷 페이지에서 회원가입을 할 때, 자동으로 아이디가 중복인지 체크해주는 기능같은 것이 ajax를 이용한 하나의 예다.


ajax는 보통,


function ajaxCreateRequest() {

var request = false;

if(window.XMLHttpRequest) {

request = new XMLHttpRequest;

}

else if(window.ActiveXObject) {

request = new ActiveXObject("Microsoft.XMLHTTP");

}

if(!request)

alert("This Browser doesn't support AJAX!");

return request;

}


이런 형태로 선언이 되어왔는데, 이 경우 낮은 버전의 IE에서는 ajax 객체를 로드할 수 없다는 에러가 뜬다.

그래서 이용하는게 바로 jQuery에서 지원하는 ajax()다.

기존의 형태로 ajax를 통해 다른 페이지의 데이터를 불러오려면,


i = ajaxCreateRequest();

var url = 'something.php';

var param = 'id=1';

i.onreadystatechange = iStatus;

i.open('POST', url, true);

i.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");

i.send(param);


와 같은 형태의 코드를 작성해야 했다.

그러나, jQuery를 이용하면 일련의 코드를 단축시킬 수 있다.


$.ajax({

url:"something.php",

type: "POST",

dataType: "HTML",

data: {id:'1'}

}).done(function(variable) {alert("AJAX LOADED"); });


아주 직관적인 방식으로, 일종의 JSON 표기법으로 명료하게 표현할 수 있다.

이렇게 함으로써 코드의 길이도 줄이고, 여러 브라우저들의 호환성 즉 크로스 브라우징을 가능케 한다.


Posted by 김또또
웹프로그래밍2012. 8. 27. 02:27

구글 오픈소스 프로젝트에서 지원하는 html5shiv.js의 내용이다.


 html5shiv.js

*첨부파일입니다.

첨부한 코드 파일을 ftp에 올린 후, HTML5를 지원하게 만들 페이지의 헤드부분의 최상단에 

<script src="html5shiv.js"></script>

라고 추가 하면된다.

예)

<!DOCTYPE>
<html>
    <head>
        <script src="html5shiv.js"></script>
        <title>test page</title>
    </head>
    <body>
        중략
    </body>
</html>


Posted by 김또또
웹프로그래밍2012. 8. 27. 02:26

--쿠키 설정--

function SetCookie(CookieID, CookieData, CookieExpDate) {
document.cookie = CookieID + '=' + CookieData;
};
--쿠키정보 가져오기--

function GetCookie(CookieID) {
var searchID = CookieID + '=';
var cookie = document.cookie;
if(cookie.length > 0) {
StartIndex = cookie.indexOf(CookieID);
if(StartIndex != -1) {
StartIndex += CookieID.length;
EndIndex = cookie.indexOf(';', StartIndex);
if(EndIndex == -1) EndIndex = cookie.length;
return unescape(cookie.substring(StartIndex + 1, EndIndex));
}
}
};

--쿠키 초기화(지우기)--

function DelCookie(CookieID) {
SetCookie(CookieID, '0', 0);
};


Posted by 김또또
웹프로그래밍2012. 8. 27. 02:25

<?php

 

    $id = "아이디";

    $pass = "비밀번호";

    $name = "DB 이름";

    $host = "localhost";


    $dbConn = mysql_connect($host, $id, $pass);

    mysql_select_db($name, $dbConn);


?>


이렇게 하고 mysql을 사용하려는 페이지의 상단에 include()를 통해 위 코드가 있는 페이지를 불러주면 된다.


만약 클래스화 해서 사용하고 싶다면,


--dbConnect.php--


<?php

class DB {

var $id = "아이디";

var $pass = "비밀번호";

var $name = "db이름";

var $host  = "localhost";

var $connection;

var $exec;

var $q;

var $result;

function DB() {

$this->connection = mysql_connect($this->host, $this->id, $this->pass);

mysql_select_db($this->name, $this->connection);

}

function sql_query() {

$this->exec = mysql_query($this->q);

return $this->exec;

}

}

?>


이렇게 저장한 뒤에, mySQL을 사용하려는 페이지의 상단에 include()를 사용하여 로드 후, 쿼리를 $객체->q에 심으면 된다.


-예-


<?php

    include "dbConnect.php";

    $db = new DB;

    $db->q = "SELECT * FROM DB_TEST";

    $db->sql_query();

    //후략

?>



Posted by 김또또
웹프로그래밍2012. 8. 27. 02:24

#testDiv {

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    -ms-border-radius: 3px;

    -o-border-radius: 3px;

    border-radius: 3px;

}


<div id="testDiv">test</div>




webkit은 크롬과 사파리, moz는 파이어폭스, ms는 IE8, o는 오페라, 마지막은 IE9를 지칭한다.


Posted by 김또또
웹프로그래밍2012. 8. 27. 02:24

<?php

    session_cache_limit('');

    session_start();


    $uid = "세션에 등록할 정보";


    $_SESSION['uid'] = $uid;

?>


쿠키가 사용자의 컴퓨터에 정보를 보관하는 것과는 달리, 세션은 데이터를 서버에 보관하기 때문에 좀 더 보안적인 측면에서 좋다.


php로 세션을 이용하기 위해서는 php의 코드가 시작하는 가장 첫번째 줄에 session_start() 를 써야한다.


session_cache_limit()는 '만료된 페이지'라고 뜨는 것을 방지해준다.


또한 세션에 등록하기 위해서는 $_SESSION['변수']; 를 사용하여야한다.


Posted by 김또또