본문으로 건너뛰기

로그인 (/login/form)

게이트웨이 웹 UI 진입 화면. 로그인 후 모든 /ui/* UI 경로 접근 가능.

2026.05+ 박스의 초기 비번

install.sh 첫 설치 시 박스마다 random 비번이 자동 생성됩니다 (기본 admin123! 이 아닐 수 있음). 박스 SSH 접근 가능하면:

sudo cat /etc/kopens/credentials.txt   # chmod 0600 root, 박스 안에서만

이 파일에 admin / mqtt / opcua / API key / keystore 비번이 한 곳에 출력되어 있습니다. factory provisioning 시 인쇄/저장 후 박스 봉인 권장.

1. 화면 구성​

       ┌─────────────────────────────────────────────┐
       │  ░░░ 다중 SVG 웨이브 (5겹) + 오로라 + 빛 점  │
       │                                             │
       │            🌀 (회전 로고)                    │
       │            플랜트펄스                        │
       │            엣지                   │
       │            [HOSTNAME 뱃지]                  │
       │                                             │
       │            👤 [사용자 ID]                    │
       │            🔑 [패스워드]                     │
       │                                             │
       │            [🔓 로그인]                       │
       │                                             │
       │            KOPENS ©                         │
       │                                             │
       │                          ┌──────────────┐   │
       │                          │ IIoT 게이트   │   │
       │                          │ 웨이 일러스트 │   │
       │                          └──────────────┘   │
       └─────────────────────────────────────────────┘

1.1 배경 시각 효과​

  • 다크 네이비 그라디언트 — linear-gradient(135deg, #061830 0%, #0a2452 35%, #07182f 75%, #03101f 100%)
  • 5겹 SVG 웨이브 (.login_wave .wv1 ~ .wv5) — 서로 다른 amplitude/phase 로 부드럽게 흐름
  • 오로라 conic-gradient (.login_aurora) — 화면 중심에서 천천히 회전
  • 6개 빛 orb (.orb) — radial-gradient, 다른 좌표에서 둥둥
  • 우측 하단 IIoT 게이트웨이 일러스트 (.edge_pc_deco .edge_gw_svg) — clamp(200px, 22vw, 320px) drop-shadow + breathe 애니메이션. PlantPulse Edge 의 정체성 시각화 용도

효과는 모두 inline <style> 또는 pp-login.css 에 정의 — 다른 페이지로 이동하면 사라집니다 (login 페이지에만 적용).

1.2 폼 영역​

영역내용
로고 + 이름PlantPulse Edge 로고 (회전) + 한글 명칭
HOSTNAME 뱃지${edge_context.hostname} — 어느 게이트웨이인지 즉시 식별
사용자 ID영문/숫자/@ — placeholder 사용자 ID
패스워드평문 전송 — HTTPS 권장
로그인 버튼submit

2. 동작 흐름​

단계결과
폼 submitPOST /login/login (user_id + password)
응답 OK3초 동안 로딩 스피너 (fa-spinner-third fa-spin) 노출 → /ui/main 으로 이동
응답 실패alert 박스 (shake 애니메이션, 빨강 강조) — "로그인 아이디 및 패스워드를 확인하신 후, 정확하게 입력하여 주십시오."

세션 attribute _USER_LOGIN (JSONObject) 에 사용자 정보 저장 — UserFilter / ApiAuthFilter 가 이 attribute 로 세션 통과 판정.

3초 로딩이 길게 느껴지면

플랫폼 측 토큰 검증/리다이렉트 race 가 정착될 시간을 줍니다. 너무 빠르게 /ui/main 으로 넘어가면 처음 접속이 401 인증 redirect 되어 로그인 화면 재진입하는 일이 있어, UX 안정성 위해 의도적으로 둔 딜레이입니다.

3. 입력 검증​

필드제약
사용자 ID4–20 자 (영문 / 숫자 / @ 등)
패스워드4–20 자, 평문 전송 (HTTPS 권장)

required="true" — HTML5 검증으로 빈 값 차단. minlength/maxlength 도 적용.

4. 자주 빠지는 함정​

증상원인 / 해결
로그인 직후 다시 로그인 화면세션 쿠키 차단 / 혼합 도메인 (HTTPS ↔ HTTP). 같은 origin 으로 접근
모든 비밀번호 거부Cassandra pe.app_user_login 테이블 비어있음. 시스템 관리자에 초기 사용자 등록 요청
세션이 자꾸 끊어짐Tomcat 세션 timeout 짧음 — app.properties 의 security.session.timeout.minutes 늘리기. 또는 PersistentManager + FileStore 설정 (이미 적용됨 — 재시작에도 세션 유지)
다른 PC 에서 동시 로그인허용 (멀티 세션) — RBAC / 단일 로그인 강제 미지원
IIoT 일러스트가 안 보임브라우저 zoom 이 너무 작거나 viewport 가 매우 좁은 경우 (clamp 의 minimum 200px 가 viewport 보다 큼). 데스크톱 권장

5. 보안 노트​

  • HTTPS 권장 — 외부망 노출 시 HTTPS 강제 (Tomcat connector 또는 nginx/Apache 리버스 프록시 앞단 배치)
  • REST /api/v1/* 는 인증 필수 — ApiAuthFilter 가 다음 인증 방식 중 하나라도 만족하면 통과:
    • X-API-Key 헤더 (EDGE_REST_API_KEY_FILE 또는 EDGE_REST_API_KEY 로 주입한 값)
    • Authorization: Bearer <키> 헤더
    • 또는 로그인 세션 (브라우저로 이미 로그인한 상태) — _USER_LOGIN attribute 가 있으면 세션 통과
  • ?api_key=<키> 쿼리 파라미터는 URL 기록/프록시 캐시에 키가 남을 수 있어 401 로 거부됨
  • 키는 app.properties 의 edge.rest.api.key 에서 설정 + edge.rest.api.auth=true 일 때만 강제. 자세한 내용 REST API 가이드
  • API 호출 audit 로그 — 모든 /api/* 호출은 ApiAccessLogFilter 가 한 줄 로그 기록 (메서드/경로/상태/지속/IP/사용자/auth 모드/UA), IP 는 기본 RemoteAddr 기준, apikey 평문은 앞 4자리만 + 길이로 마스킹
  • 비밀번호 변경 — 우상단 톱니바퀴 → 환경 설정 → edge.admin_password → 저장 → 재시작 (자세히)

6. 더 알아보기​