       ┌─────────────────────────────────────────────┐
       │  ░░░ 다중 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. 動作フロー

ステップ	結果
フォーム submit	`POST /login/login` (user_id + password)
応答 OK	3秒間ローディングスピナー (`fa-spinner-third fa-spin`) 表示 → `/ui/main` へ移動
応答失敗	alert ボックス (shake アニメーション、赤で強調) — "ログインIDとパスワードをご確認の上、正確に入力してください。"

セッション attribute _USER_LOGIN (JSONObject) にユーザー情報を保存 — UserFilter / ApiAuthFilter がこの attribute でセッション通過を判定。

3秒のローディングが長く感じられる場合

プラットフォーム側のトークン検証/リダイレクトの race が定着する時間を与えます。あまり速く /ui/main に移行すると、初回アクセスが 401 認証リダイレクトとなりログイン画面に再入場する事態が発生するため、UX 安定性のために意図的に設けた遅延です。

3. 入力検証

フィールド	制約
ユーザー ID	4–20 文字 (英字 / 数字 / @ など)
パスワード	4–20 文字、平文送信 (HTTPS 推奨)

required="true" — HTML5 検証で空値をブロック。minlength/maxlength も適用。

4. よくある落とし穴

症状	原因 / 解決策
ログイン直後に再びログイン画面	セッションクッキー遮断 / 混合ドメイン (HTTPS ↔ HTTP)。同一 origin でアクセス
すべてのパスワードが拒否	Cassandra `pe.app_user_login` テーブルが空。システム管理者に初期ユーザー登録を依頼
セッションが頻繁に切れる	Tomcat セッションタイムアウトが短い — `app.properties` の `security.session.timeout.minutes` を延長。または PersistentManager + FileStore 設定 (既に適用済み — 再起動でもセッション維持)
別 PC から同時ログイン	許可 (マルチセッション) — RBAC / 単一ログイン強制は未対応
IIoT イラストが表示されない	ブラウザの zoom が小さすぎる、または viewport が非常に狭い場合 (clamp の最小 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 <key> ヘッダー
- または ログインセッション (ブラウザで既にログイン済み状態) — _USER_LOGIN attribute があればセッション通過
?api_key=<key> クエリパラメータは URL 履歴/プロキシキャッシュにキーが残る可能性があるため 401 で拒否
キーは app.properties の edge.rest.api.key で設定 + edge.rest.api.auth=true のときのみ強制。詳細は REST API ガイド
API 呼び出し audit ログ — すべての /api/* 呼び出しは ApiAccessLogFilter が 1 行ログ記録 (メソッド/パス/状態/所要時間/IP/ユーザー/auth モード/UA)、IP はデフォルトの RemoteAddr 基準、apikey 平文は先頭 4 文字のみ + 長さでマスキング
パスワード変更 — 右上の歯車 → 環境設定 → edge.admin_password → 保存 → 再起動 (詳細)

さらに学ぶ

ログイン後の最初の画面: ホーム画面
パスワード・API キー変更: パスワード · API キー変更
REST API 認証の詳細: REST API ガイド

1. 画面構成​

1.1 背景の視覚効果​

1.2 フォーム領域​

2. 動作フロー​

3. 入力検証​

4. よくある落とし穴​

5. セキュリティノート​

さらに学ぶ​

1. 画面構成