[웹에이전시 개발] 백오피스 로그인 처리

프리터코더·2023년 7월 21일

0

웹에이전시 전문 프리랜서 개발자 프리터코더입니다.

이번 챕터에서는 웹사이트 개발 과정 중 백오피스 로그인 처리를 작업합니다.

<백오피스 로그인 처리> 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게 일하나 시리즈 중 하나입니다.


1

백오피스 로그인 처리를 위해 가장 먼저 생각해야 하는 건 관리자 계정 데이터베이스 사용 여부입니다.

2

데이터베이스를 사용하면 관리자 계정을 여러 개 만들 수 있고, 각 계정별로 권한을 따로 부여할 수도 있습니다. 반면 권한관리까지 포함된 계정관리는 조금 더 개발하기 번거롭고, 권한에 필요한 정책 수립이 필요하며 관리자를 위한 관리자 계정이 추가로 필요합니다.
백오피스 사용자 관리 화면, 백오피스 사용자 권한 관리 화면을 합치면 최소한 5페이지 이상의 화면이 필요할 꺼에요.

3

만약 프로젝트 완료 후 웹사이트 관리를 웹에이전시에서 한다면 어차피 담당자는 한사람일테고, 외주사 내부에서 관리하므로 굳이 다계정일 필요는 없습니다.
반면 웹사이트 관리의 주체가 클라이언트라면 웹에이전시보다는 조금 더 큰 회사일 가능성이 높으므로 권한 관리 기능이 필요할 겁니다.

4

권한 관리가 필요한 수준의 웹사이트라면 10-20페이지 내에서 끝나는 소규모 사이트보다는 더 복잡할 거에요. 아마 특정 기능이 존재하는 SI 식 프로젝트일 것이라고 생각합니다.

5

실제로 미스사이공 사이트에 백오피스가 존재하는지, 백오피스가 있다면 권한 관리는 어떤 식으로 하는지까지는 제가 알 수 있는 방법이 없습니다. 따라서 저는 절충형으로 "백오피스 관리자는 한사람이라고 가정하고 데이터베이스는 사용하되 권한 관리는 사용하지 않는" 방법으로 개발을 진행해 보겠습니다.

6

이번 개발에서는 관리자가 한명이기 때문에, 기존에 등록된 관리자가 없을 경우 처음으로 입력하는 ID와 비밀번호가 관리자의 ID, 비밀번호가 된다. 이미 관리자가 존재하는 경우 기존의 ID와 비밀번호로만 로그인이 가능하다. 라는 정책을 세웁니다.

기획자 팁
백오피스 관리자의 범위를 생각해 두시고 백오피스 기획서에 넣어주세요.

7

데이터베이스 테이블을 생성합니다.

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'
;

8

데이터베이스 연결 정보를 웹서버에 알려줍니다.

const DB_HOST = "localhost";
const DB_PORT = "3306";
const DB_USER = "root";
const DB_PASSWORD = "";
const DB_NAME = "miss420";
const DB_CHARSET = "utf8";

9

서버 코드를 작성합니다.

<?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", "관리자 로그인 실패.");
        }
    }
?>

10

잘 작동하는지 확인합니다. 먼저 데이터베이스가 비어있는지 확인해 봅니다.
076

11

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

기획자 팁
각 상황에 따른 문구를 정해서 백오피스 기획서에 넣어 주세요.

12

데이터베이스에 데이터가 잘 들어갔는지 확인합니다.
077

13

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

기획자 팁
암호 찾기는 만들 수 없어요. 암호 재설정 기능만 개발이 가능해요.

14

일부러 비밀번호를 틀려봅니다.
073

15

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

16

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

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


개발 요청은 프리터 코더 소개를 읽어보시고, 이메일 로 부탁드립니다.

profile
일용직 개발자. freetercoder@gmail.com

0개의 댓글