웹에이전시 전문 프리랜서 개발자 프리터코더입니다.
이번 챕터에서는 웹사이트 개발 과정 중 백오피스 로그인 처리를 작업합니다.
<백오피스 로그인 처리> 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게 일하나 시리즈 중 하나입니다.
백오피스 로그인 처리를 위해 가장 먼저 생각해야 하는 건 관리자 계정 데이터베이스 사용 여부입니다.
데이터베이스를 사용하면 관리자 계정을 여러 개 만들 수 있고, 각 계정별로 권한을 따로 부여할 수도 있습니다. 반면 권한관리까지 포함된 계정관리는 조금 더 개발하기 번거롭고, 권한에 필요한 정책 수립이 필요하며 관리자를 위한 관리자 계정이 추가로 필요합니다.
백오피스 사용자 관리 화면, 백오피스 사용자 권한 관리 화면을 합치면 최소한 5페이지 이상의 화면이 필요할 꺼에요.
만약 프로젝트 완료 후 웹사이트 관리를 웹에이전시에서 한다면 어차피 담당자는 한사람일테고, 외주사 내부에서 관리하므로 굳이 다계정일 필요는 없습니다.
반면 웹사이트 관리의 주체가 클라이언트라면 웹에이전시보다는 조금 더 큰 회사일 가능성이 높으므로 권한 관리 기능이 필요할 겁니다.
권한 관리가 필요한 수준의 웹사이트라면 10-20페이지 내에서 끝나는 소규모 사이트보다는 더 복잡할 거에요. 아마 특정 기능이 존재하는 SI 식 프로젝트일 것이라고 생각합니다.
실제로 미스사이공 사이트에 백오피스가 존재하는지, 백오피스가 있다면 권한 관리는 어떤 식으로 하는지까지는 제가 알 수 있는 방법이 없습니다. 따라서 저는 절충형으로 "백오피스 관리자는 한사람이라고 가정하고 데이터베이스는 사용하되 권한 관리는 사용하지 않는" 방법으로 개발을 진행해 보겠습니다.
이번 개발에서는 관리자가 한명이기 때문에, 기존에 등록된 관리자가 없을 경우 처음으로 입력하는 ID와 비밀번호가 관리자의 ID, 비밀번호가 된다. 이미 관리자가 존재하는 경우 기존의 ID와 비밀번호로만 로그인이 가능하다. 라는 정책을 세웁니다.
기획자 팁
백오피스 관리자의 범위를 생각해 두시고 백오피스 기획서에 넣어주세요.
데이터베이스 테이블을 생성합니다.
CREATE TABLE `backoffice_admin` (
`id` INT NOT NULL AUTO_INCREMENT,
`admin_id` VARCHAR(20) NOT NULL,
`admin_pw` VARCHAR(64) NOT NULL,
`insert_dt` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP(),
`update_dt` DATETIME NOT NULL,
PRIMARY KEY (`id`)
)
COLLATE='utf8_general_ci'
;
데이터베이스 연결 정보를 웹서버에 알려줍니다.
const DB_HOST = "localhost";
const DB_PORT = "3306";
const DB_USER = "root";
const DB_PASSWORD = "";
const DB_NAME = "miss420";
const DB_CHARSET = "utf8";
서버 코드를 작성합니다.
<?php
require_once($_SERVER["DOCUMENT_ROOT"] . "/fc.php");
if(is_post()){
$admin_id = param("admin_id");
$admin_pw = param("admin_pw");
$exist_admin = query_row("select * from backoffice_admin where 1 = 1 limit 1");
if ($exist_admin === null){
$admin_pw = password_hash($admin_pw, PASSWORD_BCRYPT);
insert("backoffice_admin", ["admin_id"=> $admin_id, "admin_pw"=> $admin_pw]);
sess("BACKOFFICE_ADMIN", $admin_id);
redirect("/backoffice/login", "관리자가 생성 완료");
}
if ($exist_admin["admin_id"] == $admin_id && password_verify($admin_pw, $exist_admin["admin_pw"])){
sess("BACKOFFICE_ADMIN", $admin_id);
redirect("/backoffice/menu_item", "관리자가 로그인 성공");
}else{
redirect("/backoffice/login", "관리자 로그인 실패.");
}
}
?>
잘 작동하는지 확인합니다. 먼저 데이터베이스가 비어있는지 확인해 봅니다.

백오피스 로그인 화면에서 관리자를 신규 생성합니다. 저는 임의로 id 는 admin, 비밀번호는 1234 로 넣었습니다.

기획자 팁
각 상황에 따른 문구를 정해서 백오피스 기획서에 넣어 주세요.
데이터베이스에 데이터가 잘 들어갔는지 확인합니다.

데이터를 보면 admin_id 항목은 입력한 대로 들어간 것 같은데 admin_pw 항목은 알 수 없는 글자가 들어가 있습니다. 비밀번호는 암호화해서 저장되어 있기 때문입니다.
비밀번호는 단방향 암호화이기 때문에 원래 암호가 뭔지는 개발자도 알 수 있는 방법이 없습니다. 따라서 "암호 찾기" 기능 구현은 불가능하고 "암호 재설정" 기능만 (만약 필요하다면) 개발이 가능합니다.
기획자 팁
암호 찾기는 만들 수 없어요. 암호 재설정 기능만 개발이 가능해요.
일부러 비밀번호를 틀려봅니다.

로그인이 되는지도 확인합니다.

로그인이 되고 나면 메시지가 보이고, 이후 페이지가 이동합니다.

/backoffice/menu_item URL 이 없다는 메시지입니다. 아직 안만들어서 그런 거니까 크게 신경쓰지 않아도 됩니다.