🔐 서버측 로그인 적용 가이드

방법 비교 (무료 우선)

◎ 1순위 · Cloudflare Access (무료·이메일 인증)

지정한 이메일 주소로 접속을 제한합니다. 로그인 시 이메일로 인증코드가 발송됩니다. 도메인을 Cloudflare에 연결해야 합니다.

1. cloudflare.com 가입 → 회사 도메인을 Cloudflare에 추가(네임서버 변경). 확인 필요: 도메인·DNS는 기업 홈페이지 담당자와 협의(현재 Gabia 사용).
2. 대시보드 → Zero Trust 진입(무료 플랜 선택).
3. Access → Applications → Add an application → Self-hosted.
4. 애플리케이션 이름·도메인 입력(예: 사이트 전체 또는 /admin-hub.html 등 관리자 경로).
5. Add a policy → 정책 이름 입력 → Include → Emails에 허용할 팀원 이메일 추가.
6. 저장 → 이후 해당 경로 접속 시 이메일 인증코드를 입력해야 열립니다. 완료.

○ 2순위 · Netlify Edge Function 기본인증 (무료·코드 1개)

공용 아이디·비밀번호로 관리자 경로를 보호합니다. 도메인 이전 없이 Netlify에서 바로 됩니다.

1. 사이트 최상단에 netlify.toml 파일 생성 후 아래 내용 추가:

   [[edge_functions]]
     path = "/admin-hub.html"
     function = "auth"
   [[edge_functions]]
     path = "/accident-admin.html"
     function = "auth"
   # 보호할 관리자 페이지마다 위 블록 추가
   # (admin, ra-admin, training-admin, compliance, report-form, monthly-report)

2. netlify/edge-functions/auth.js 파일 생성 후 아래 코드 붙여넣기:

   export default async (request, context) => {
     const auth = request.headers.get("authorization");
     const USER = "ksmate";           // 원하는 아이디
     const PASS = "안전비밀번호";      // 원하는 비밀번호로 변경
     const expected = "Basic " + btoa(USER + ":" + PASS);
     if (auth !== expected) {
       return new Response("인증이 필요합니다", {
         status: 401,
         headers: { "WWW-Authenticate": 'Basic realm="KSmate 안전보건팀"' },
       });
     }
     return context.next();
   };

3. 두 파일을 GitHub 저장소에 올리고 Commit → Netlify가 자동 배포.
4. 이후 관리자 경로 접속 시 브라우저 로그인창이 뜨고, 아이디·비밀번호를 입력해야 열립니다. 완료.

적용 후 정리

1. 서버측 인증 적용 후에는 gate.html/auth-guard.js(간이 잠금)는 보조용으로 남기거나 제거해도 됩니다.
2. 공개 조회 화면(index·safety·calendar 등)은 보호 대상에서 제외할지 결정 — 사내 전용이면 사이트 전체 보호, 대외 공개가 필요하면 관리자 경로만 보호.

체크리스트