2023. 11. 18. 16:11ㆍProject/Web Application-개발
프로젝트 일지
마이 페이지를 생성하여 사용자별 개인 정보를 볼 수 있도록 한다. 마이 페이지 요청 시 다시 한번 비밀번호를 입력하여 인증 작업을 거친 후 마이 페이지를 요청한다. 마이 페이지에서는 사용자 정보를 전부 볼 수 있으나 비밀번호는 민감한 정보이기 때문에 볼 수 없다. 그리고 아이디를 제외한 나머지 정보들은 수정이 가능하며 비밀번호를 변경하기 위해서는 현재 비밀번호를 한번 더 입력하여 보안성을 강화하였다.
앞으로 진행할 작업 예정 리스트는 다음과 같다.
- 마이 페이지 생성 및 개인 정보 변경 기능 구현
- 게시판 생성
마이 페이지 구조
마이 페이지는 두 개의 페이지로 이루어져 있으며 각 페이지 마다 데이터 처리 페이지가 존재한다.
- check_pass.php => check_pass_proc.php : 마이 페이지 요청 시 먼저 거쳐가야하는 페이지이다. 이곳에서 먼저 인증 작업을 수행한다.
- my_page.php => my_page_proc.php : 인증 작업 수행 후 진입하는 페이지이다. 해당 페이지에서 현재 로그인되어 있는 사용자의 개인 정보를 비밀번호를 제외하고 볼 수 있다. 또한 아이디를 제외한 나머지 정보들을 변경할 수 있다.
인증 작업
1) check_pass.php
마이 페이지 요청 시 먼저 거쳐가야하는 페이지이다. 인증 작업을 수행한다.
- 해당 페이지 요청 시 로그인되어 있지 않다면 ($_SESSION['user_id'] 변수가 존재하지 않을 시) 로그인되어 있지 않다는 경고 팝업창을 보여주고 login.php 페이지로 이동한다.
- 로그인 상태면 DB를 연결하여 $_SESSION['user_id'] 변수에 저장되어 있는 아이디로 조회하여 아이디는 보여주고 비밀번호는 입력하는 칸이 따로 존재한다. 입력된 비밀번호는 POST 메소드를 사용하여 check_pass_proc.php 페이지로 전달된다.
- 이곳에서는 아이디와 비밀번호를 전부 입력하는 것이 아닌 비밀번호만을 입력하여 다시 한번 인증 작업을 수행하여 보안을 강화하였다.
2) check_pass_proc.php
인증 작업을 처리하는 페이지다. 로그인 작업 중 인증 작업만 수행한다.
- check_pass.php에서 전달된 비밀번호 데이터($_POST['user_pass'])를 $passwd 변수에 저장한다.
- $_SESSION['user_id'] 변수에 저장된 아이디로 DB와 연결해 데이터를 조회한다.
- DB에는 비밀번호가 password_hash() 함수로 해싱되었기 때문에 비밀번호 일치여부를 확인하기 위해서는 password_verify() 함수를 사용하여 판별한다.
- 비밀번호가 일치한다면 my_page.php 페이지로 안내한다.
- 비밀번호가 일치하지 않는다면 비밀번호가 틀렸다는 경고 팝업창을 보여주고 check_pass.php로 안내한다.
마이 페이지 생성 및 개인 정보 변경 기능
1) my_page.php
사용자별 개인 정보를 확인할 수 있는 페이지다. 비밀번호는 민감한 정보라 볼 수 없게 돼있으며 필요에 따라 아이디를 제외한 개인 정보는 변경 가능하다.
- 해당 페이지에 접근하면 $_SESSION['user_id'] 변수에 저장되어 있는 아이디로 DB에 연결하여 사용자 데이터를 조회한다.
- DB에 저장되어있는 사용자의 개인 정보를 보여준다. 아이디를 제외한 각 정보 옆에 '변경' 버튼을 눌러 정보를 변경할 수 있다.
- '변경' 버튼은 토글 방식으로, 클릭 시 onclick 이벤트가 발생한다. 이벤트 발생 시 각 정보마다 자바스크립트 함수가 호출되며 함수 호출 시 각 정보를 바꿀 입력창이 출력된다.
- '회원정보 수정' 버튼은 처음에는 비활성화 되어있으며 변경 내용을 입력하는 창이 하나라도 출력되어 있으면 활성화된다.
- 변경 내용을 입력하는 창이 출력되어있으며 비어있는 상태로 '회원정보 수정' 버튼을 클릭하게 되면 form 태그의 onsubmit 이벤트가 발생한다. 이벤트 발생 시 check_info() 함수가 호출되며 이 함수는 유효성 검사를 수행한다.
- 유효성 검사를 진행하여 비어있는 입력창이 있는 경우 각 정보에 해당하는 코멘트를 출력하도록 한다.
- 비밀번호 변경 버튼을 클릭한 경우 현재 비밀번호와 변경할 비밀번호, 그리고 변경할 비밀번호를 한번 더 확인하기 위한 입력창이 출력된다.
- '비밀번호가 일치하지 않습니다.'라는 코멘트가 출력되는 경우는 첫 번째로 New Password Check 입력칸이 비어있는 상태로 '회원정보 수정' 버튼을 클릭했거나, 두 번째로는 New Password와 New Password Check의 내용이 일치하지 않을 때다.
- '회원정보 수정' 버튼을 클릭하게 되면 유효성 검사를 수행한 후 POST 메소드 방식으로 my_page_proc.php 페이지로 데이터를 전달한다.
2) common.js
3) my_page_proc.php
- 전달받은 데이터들은 배열 변수에 저장한다.
- $_SESSION['user_id'] 변수에 저장된 아이디로 DB와 연결하여 데이터를 조회한다.
- 변경되는 정보가 하나라도 존재하는 경우 조건문에 진입한다.
- 이때 비밀번호의 변경이 있을 경우 먼저 작업을 수행한다. 왜냐하면 인증 작업을 통과하지 못한 경우도 있기 때문이다.
- 인증 작업을 통과하지 못한 경우에는 '비밀번호가 틀렸습니다.' 경고 팝업창을 출력 후 exit()를 호출하여 다음 코드들의 진행을 방지한 다음 my_page.php 페이지로 안내한다.
- 인증 작업을 통과하게 되면 변경할 비밀번호를 password_hash() 함수를 사용하여 해싱 후 DB에 저장한다.
- 마찬가지로 이름과 나이도 변경할 내용이 있다면 변경할 내용을 DB에 저장한다.
- 수정 작업이 성공적으로 완료되면 '회원정보가 성공적으로 변경되었습니다.' 경고 팝업창을 출력 후 my_page.php 페이지로 안내한다.
- 비밀번호 변경 없이 이름과 나이의 정보만 변경
- 비밀번호 변경 시 인증 실패 하여 이름과 나이의 정보도 변경 실패
- 비밀번호 변경 시 인증 성공 하여 이름과 나이의 정보까지 변경
- 비밀번호가 성공적으로 변경된 것 확인
앞으로 할 작업
- 게시판 생성