마이페이지 구현

오늘은 마이페이지를 구현해 보았다.

로그인 후 마이페이지를 들어가면

 

1. 로그인한 회원의 개인정보가 나타나고,

2. 그 페이지에서 개인정보를 수정 가능하게 구현했다.

 

개인정보는

(1) 비밀번호를 제외한 나머지 정보(이름, 이메일, 주소)를 변경하는 것과

(2) 비밀번호를 포함해서 개인정보를 변경하는 것으로 나눠 구현했다.

 

CSRF 공격에 대한 최소한의 대응방안으로 개인정보 수정버튼을 누르면, 

본인의 현재 패스워드(인증정보)를 입력하게 해서, TABLE내의 pw 컬럼과 일치하면 변경해 주었다.

 

1. 마이페이지 화면 구현(mypage_view.php)

CSS는 할줄 모른다. 하하

마이페이지로 들어가면 로그인한 계정의 아이디, 이름, 이메일, 주소의 정보가 나오게 구현했다.

아이디는 <input >의 text 타입으로 구현했고, readonly를 설정했다.

 

여기까지 구현하는 것은 간단하다, 현재 로그인이 된 상태이기 때문에, 세션이 발급됐을 거고,

그 아이디로 db에 질의 하면된다.

$id = $_SESSION['블라블라'];    < 세션 값 받아오기(항상 맨위에 session_start();를 사용해줘야 한다.)

$query = "select * from basic_table where db_id='$id'";
$result = mysqli_query($conn, $query);
$row = mysqli_fetch_array($result);

이렇게 하면 $row['id'], $row['pw'], $row['email'], $row['address'] 등 table에 저장된 값을 사용할 수 있다.

 

<input>을 이용해 입력폼을 만들어주고 value값에 $row 값을 출력해주면 된다.

 

그리고 가장 중요한 것은 수정버튼을 눌렀을 때 바로 수정이 되는 게 아니라,

기존의 비밀번호값을 입력받고, 비밀번호가 맞을 경우에만 수정을 해 주어야 한다.

 

방법은 아래와 같이 구현했다.

 <input type="hidden" name ="current_pw" id ="current_pw">
블라블라
블라블라
블라블라
<input type="submit" name="con" value="수정" onClick="document.getElementById('current_pw').value = prompt('현재 비밀번호를 입력해 주세요.', '비밀번호')">

그리고 위에 사용된 모든 <input> 태그의 value들은 POST방식으로 값을 넘겨준다.

 

 

 

 

2. 회원 개인정보 변경(mypage_server.php)

mypage_view.php 에서 여러 <input>를 사용하여, 아이디, 이름, 이메일, 주소, 현재 패스워드를 POST방식으로 넘겨 받았다.

만약 비밀번호를 변경하려 했다면, 변경할 패스워드, 그 패스워드 확인 이렇게 2개의 값을 더 받아왔을 것이다.

$id = $_POST['m_id'];
$name = $_POST['m_name'];
$email = $_POST['m_email'];
$addr = $_POST['m_addr'];
$pw1 = $_POST['m_pw1'];  변경할 패스워드
$pw2 = $_POST['m_pw2'];  변경할 패스워드 확인
$pw = $_POST['current_pw']; // 현재 패스워드

우선 정보가 변경된다는 것은

프롬프트를 통해 입력받은 현재 패스워드가 정확하다는 이야기이기 때문에 이 부분을 아래와 같이 구현했다.

$query = "select * from basic_table where db_id='$id' and db_pw='$pw'";
$result = mysqli_query($conn, $query);

$row = mysqli_fetch_array($result);

 

위의 문장의 $row 값이 존재한다면, 프롬프트를 통해 입력받은 패스워드가 같다는 이야기이다.

아래의 내용은 입력받은 패스워드가 현재 패스워드가 맞다는 전제하에 진행된다.

 

자 먼저, 패스워드를 변경하지 않고 나머지 개인정보만 변경하는 경우는 패스워드를 입력하는 두개의 <input> 태그의  value 값이 빈값이 넘어오게 될 것이다. 그부분을 아래와 같이 구현했다.

 

if($row) {  
      if($pw1 == NULL && $pw2 == NULL){

     if(empty($name)){
               echo "<script>alert('이름을 입력해 주세요..')</script>";           
               echo "<script>location.replace('./mypage_view.php');</script>";       
        } else {           
            $new_name = $name;        }

 첫번째 if문 : $row의 값이 존재할 경우(입력한 현재 패스워드가 맞을 경우)

 두번째 if 문 : 패스워드 변경을 위한 두칸이 NULL값으로 들어오는지 확인하고, 참일 경우

 변수 $name이 빈값인지 확인해 준다.(보통 회원가입시 이름값을 입력하기에 빈값일 리는 없다.)

 빈값이 아닐 경우(else) $name의 값을 $new_name;에 넣어준다.

이메일, 주소 모두 같은 방식으로 처리한다.

그러면 현재 이름, 이메일, 주소 값을 새로운 변수에 입력받았고, 이 변수들을 사용해 쿼리문을 만들면 된다.

$query1 = "update basic_table set db_name='$new_name',db_email='$new_email',db_address='$new_addr' where db_id='$id'";      
mysqli_query($conn, $query1);

        echo "<script>alert('정상적으로 수정 되었습니다.')</script>";

        echo "<script>location.replace('./mypage_view.php');</script>";

 

짝짝짝 !!

 

다음으로는 패스워드도 함께 또는 패스워드만 변경하는 경우이다.

별 다른 것은 없다, 위의 IF문 밑에 elseif를 사용해 경우에 맞게 분기 해 주면 된다.

 

첫번째는 변경하기 위해 입력한 두 번의 패스워드가 일치하지 않을 경우

스크립트를 사용해 얼럿을 띄우고, 다시 마이페이지로 돌아가게 만들면 되고,

 

변경을 위해 입력한 두 번의 패스워드가 일치 하는 경우

위에 사용했던 UPDATE문과 똑같이 사용해 주되, pw하나를 더 추가해주면된다.

(pw를 변경시 본인이 회원가입 받을 때 입력받은 패스워드를 어떤 방식으로 해쉬화 했는지 알아야 한다.)

(pw 변경시에도 그와 똑같은 방법으로 pw를 해쉬화 해서 저장해 주어야 한다.

 

패스워드를 변경하지 않는 경우 변경할 패스워드를 입력하기 위한 두개의 input은 빈값이 넘어 올 것이기 때문에

그 부분을 먼저 처리해주었다.

$pw1 = hash('sha256',$pw1);
$query1 = "update basic_table set db_pw='$pw1', db_name='$new_name',db_email='$new_email',db_address='$new_addr' where db_id='$id'";
mysqli_query($conn, $query1);
echo "<script>alert('정상적으로 수정 되었습니다.')</script>";
echo "<script>location.replace('./mypage_view.php');</script>";

 

그리고 마지막으로 최초의 if문에서 if($row) 가 거짓일 경우 수정을 위해 입력했던 현재 패스워드가 맞지 않다는 의미이므로 비밀번호가 틀렸다는 얼럿을 띄워주면된다.

 

코드 분기 구조는 아래와 같다.

if{ // 개인정보 수정을 위해 입력한 현재 패스워드가 맞는경우
    if{ // 패스워드 변경을 위해 입력한 패스워드 1,2가 NULL인 경우(패스워드 외에 개인정보 변경)
        // 패스워드를 제외한 나머지 개인정보 변경
    } else if{ // 패스워드 변경을 위해 입력한 패스워드 1,2가 서로 다를 경우
       
    } else if{  // 패스워드 변경을 위해 입력한 패스워드 1,2가 같을 경우
                // 패스워드만 or 패스워드 포함 다른 개인정보 변경
    }
} else { // 개인정보 수정을 위해 입력한 현재 패스워드가 맞지 않는 경우
}