<<HTML5登入頁面展示>>

說明：

這是一組運用單一 HTML5 製作的登入頁面範例（純前端 only），主要功能與構成如下：

視覺：使用大量 CSS 特效，例如 glass、neon、scanlines、vignette，部分範例另使用 Canvas 動畫、粒子、星空、雪花等視覺效果。

登入驗證（純前端）：使用者送出登入資料後，JavaScript 會先將帳號與密碼組合成： aes_帳號_密碼， 再透過 ex_md3n("aes_"+userid+"_"+pwd, 1000) 產生登入用私鑰 uk。

HTML 程式碼內含一個 lkd 陣列，裡面存放一組或多組 X60 格式的 ckey。 系統會依序呼叫：

exesDecrypt(ckey, uk)

如果 X60 解密成功並回傳非空字串，即視為登入成功。 解密結果會寫入 jobs_login_key Cookie， 密碼則使用 ex_md3() 後寫入 jobs_login_pwd， 帳號寫入 jobs_login_name。

登入成功後會轉址到 sys_login_start_fear4ddju.php； 若所有 X60 ckey 都無法正確解密，則顯示登入失敗訊息或 ACCESS DENIED 視窗。

本範例目前展示帳號為 admin， 密碼為 admin。

 

外部資源：

載入 4 個外部 JavaScript 檔案（前端登入驗證、常用函式庫）， 如自行改為 CGI / PHP / AJAX 等後端驗證方式，則可依實際需求移除前端驗證模組。

JavaScript：

EXES / X60 加解密： https://jplop.netlify.app/js/exes.js

EX_MD3 / EX_MD3N： https://jplop.netlify.app/js/ex_md3.js

弱密碼資料庫（部分範例未使用）： https://jplop.netlify.app/js/database.js

AJAX 模組（部分範例未使用）： https://jplop.netlify.app/js/tw-sack.js

 

展示、原始碼(Demo)：

深海

駭客任務

DOS 6.22

LINUX

聊天機器人

大腦連線

水墨（引用 1 JPG 圖、2 字型）

桌面綿羊（引用 1 JPG 圖）

火星（引用 1 JPG 圖）

草原（引用 1 JPG 圖）

攻殼機動隊（引用 1 JPG 圖）

自動人型（引用 1 JPG 圖）

生化奇兵（引用 1 JPG 圖）

MAC（引用 1 JPG 圖）

Windows Server（引用 1 JPG 圖）

Linux（引用 1 JPG 圖）

最終幻想（引用 1 JPG 圖）

惡靈古堡（引用 1 JPG 圖）

NASA KM（引用 1 JPG 圖）

展示用的正確帳號、密碼均為 "admin"

 

使用教學：

1. 複製 login*.html 至自己的網站中。

只需將提供的 login*.html 複製到網站即可執行。 登入頁面本身使用前端 JavaScript 執行 EXES / X60 驗證， 不需要另外安裝 JavaScript 後端模組。

2. 純前端驗證方式：設定登入帳號與密碼。

新版前端登入流程使用 EX_MD3N + EXES X60 方式，需要準備兩個要素：

• 後端驗證字串（登入成功後寫入 jobs_login_key）
• 前端登入帳號 / 密碼（提供使用者輸入）

A. 設定 jobs_login_key：

請自行準備一組只有後端程式知道用途的驗證字串。

目前展示範例使用：

AiTbFRmdaEMedbrA8dHDRr7LA8aRb4fdQLjnRRdji

B. 建立前端登入帳號密碼：

• 示範帳號：admin
• 示範密碼：admin

 

第一步：使用 EX_MD3N 建立登入私鑰。

請前往 EX_MD3N 密碼疊代工具： https://jplop.netlify.app/teac_ex_md3

輸入文字（String）：

aes_admin_admin

格式為： aes_帳號_密碼

運算次數（Count）： 1000

也就是 JavaScript 中實際執行：

var uk = ex_md3n( "aes_" + userid + "_" + pwd, 1000 );

admin / admin 對應的 uk 為：

L7uEDb4HenR4hy8QnyjE68Q7D4M8jyRyTrDbeLL7eRjamtiLF4jLn8hhhj8RehjLMbjfrdDuQ3QH3d8G3aER8nr68bQeaT4utjMjFFGbiierEhe4nHdGHmA6fbMhH6uATf6nQer7ejf33LynMD4TuLTTy6DRGfe6DirtmaMdjMbahALy3bGH3G6MMRy44dT37druATmfyQ6Gjb6yD

 

第二步：使用 EXES 建立 X60 ckey。

請前往 EXES / X60 建立工具： https://jplop.netlify.app/util_aes_utility

密鑰欄位輸入前一步得到的 uk。

內容欄位輸入 jobs_login_key：

AiTbFRmdaEMedbrA8dHDRr7LA8aRb4fdQLjnRRdji

加密後會得到一組以 X60 開頭的字串。

例如：

X60iUfrF5JqnkrLjC4wzWhhbsOw1z7nFVoGJ8Omy13dOYeJmojfVcWuKemdpXspAAITsbXclv4P2B10PVrZroyNoEAMghKoLKHNTd3wk4jZVQunk6KBEuxOSLvve29gSmBqbqtezJua1HnTILeTRBdBONhcboZ8tsLxG8YVDqvtlQXGT1ShK8qvEP5vKFwtRU0sFVTNsA5AGDvrgxFjts3YQhpDAR998JvuvkrekepH4O8LD2ce1kzYgsdadNGPSgGOGoSWMem67lexYu

注意：EXES 加密包含隨機資料， 因此即使密鑰與內容完全相同， 每次產生的 X60 字串也可能不同， 這是正常現象。

 

第三步：將 X60 放入 login*.html。

var lkd = [ { "ckey":"X60..." }, { "ckey":"[第二組帳號密碼對應的 X60]" }, { "ckey":"[第三組帳號密碼對應的 X60]" } ];

每一個 X60 ckey 都可以對應不同的登入帳號 / 密碼， 但解密後可指向相同或不同的 jobs_login_key。

 

第四步：HTML 登入驗證。

登入時產生 uk：

var uk = ex_md3n( "aes_" + userid + "_" + pwd, 1000 );

再利用 EXES 解密：

var decrypted = exesDecrypt( lkd[i].ckey, uk ); if (decrypted != "") { document.cookie = "jobs_login_key=" + escape(decrypted); document.cookie = "jobs_login_pwd=" + ex_md3(pwd); document.cookie = "jobs_login_name=" + userid; }

 

C. 設定後端 Cookie 驗證：

建立後端 PHP 程式碼，例如檔名： sys_login_start_fear4ddju.php

<?php // 目標 Cookie 名稱 $cookie_name = 'jobs_login_key'; // 檢查是否有收到 Cookie if (!isset($_COOKIE[$cookie_name])) { echo "登入失敗"; exit(); } // 取得登入頁解密後寫入的值 $cookie_value = $_COOKIE[$cookie_name]; // 正確的 jobs_login_key $correct_value = "AiTbFRmdaEMedbrA8dHDRr7LA8aRb4fdQLjnRRdji"; // 比對 if ($cookie_value === $correct_value) { echo "登入成功"; } else { echo "登入失敗"; exit(); } ?>

 

新版登入流程摘要：

帳號 + 密碼 │ ▼ "aes_" + userid + "_" + pwd │ ▼ ex_md3n(..., 1000) │ ▼ 產生 uk │ ▼ exesDecrypt(X60_ckey, uk) │ ├── 解密失敗 → 登入失敗 │ └── 解密成功 │ ▼ jobs_login_key │ ├── jobs_login_pwd = ex_md3(password) ├── jobs_login_name = userid │ ▼ sys_login_start_fear4ddju.php

 

安全性說明：

本範例屬於純前端登入展示。 JavaScript、X60 ckey 以及驗證流程都會下載至瀏覽器， 因此適合教學、Demo、簡易入口或非敏感內容使用。

若網站包含重要資料、會員資料、管理功能或其他敏感資訊， 建議將真正的帳號密碼驗證放在 PHP / CGI / API 等伺服器端執行， 並使用伺服器端 Session 管理登入狀態。

相容性說明：

現代瀏覽器（建議）

Chrome / Firefox / Edge / Safari

建議使用最新版本。 各登入頁依設計不同，可能使用 Canvas、 requestAnimationFrame、CSS Variables (--var)、 backdrop-filter、class、let、const、 template literals 等現代瀏覽器功能。

EXES / EX_MD3 模組

登入驗證已由舊版 AES + EX_MD2 更新為 EXES X60 + EX_MD3。

ckey 已不再使用舊 OpenSSL AES 的 U2FsdGVkX1... 格式，而改為 X60... 格式。

可能的問題 / 限制

雖然 EXES / EX_MD3 函式庫本身著重相容性， 但部分 Demo 頁面大量使用 ES6 與新版 CSS， 因此 Internet Explorer，尤其 IE11， 仍可能因 CSS Variables、class、let / const、 backdrop-filter 等功能而出現樣式或 JavaScript 相容性問題。

如需完整支援舊版 IE， 必須針對各登入頁另外進行 ES5 語法轉換與 CSS fallback。