網站密碼保護全攻略：從明文到 Hash 到後端驗證

1 選一個強密碼

13 位以上，英文加數字混合。不需要特殊字元，但不要用純數字或常見詞。

例如：thomas2026hub、mysite2026pass、cloudpage2026x

2 生成 SHA-256 Hash

方法 A：用 Python（推薦）

python -c "import hashlib; print(hashlib.sha256('你的密碼'.encode()).hexdigest())"

方法 B：用瀏覽器 DevTools Console

按 F12 打開 DevTools → 切到 Console 頁籤 → 貼上：

crypto.subtle.digest('SHA-256', new TextEncoder().encode('你的密碼'))
  .then(h => console.log(
    Array.from(new Uint8Array(h))
      .map(b => b.toString(16).padStart(2,'0'))
      .join('')
  ))

把輸出的那串 64 字元十六進制字串複製下來。

3 在 HTML 裡加入密碼保護代碼

把以下代碼加入你的 HTML 文件。PW_HASH 換成你在 Step 2 得到的 Hash 值。

<!-- 密碼畫面 -->
<div id="pw-screen">
  <input type="password" id="pw-input"
         placeholder="請輸入密碼" />
  <button onclick="checkPw()">進入</button>
  <div id="pw-error" style="display:none">
    密碼錯誤
  </div>
</div>

<!-- 主要內容（預設隱藏） -->
<div id="main-content" style="display:none">
  ...你的網頁內容...
</div>

<script>
const PW_HASH = '你的hash值';
const PW_KEY  = location.hostname + '_pw';
const PW_DAYS = 30;

async function sha256(s) {
  const d = new TextEncoder().encode(s);
  const h = await crypto.subtle.digest('SHA-256', d);
  return Array.from(new Uint8Array(h))
    .map(b => b.toString(16).padStart(2, '0'))
    .join('');
}

function isPwOk() {
  try {
    const d = JSON.parse(
      localStorage.getItem(PW_KEY) || '{}'
    );
    return d.ok && Date.now() < d.exp;
  } catch (e) { return false; }
}

async function checkPw() {
  const hash = await sha256(
    document.getElementById('pw-input').value
  );
  if (hash === PW_HASH) {
    localStorage.setItem(PW_KEY, JSON.stringify({
      ok: 1,
      exp: Date.now() + PW_DAYS * 864e5
    }));
    document.getElementById('pw-screen')
      .style.display = 'none';
    document.getElementById('main-content')
      .style.display = 'block';
  } else {
    document.getElementById('pw-error')
      .style.display = 'block';
    document.getElementById('pw-input').value = '';
  }
}

// 自動檢查：30天內免重輸
if (isPwOk()) {
  document.getElementById('pw-screen')
    .style.display = 'none';
  document.getElementById('main-content')
    .style.display = 'block';
}

// Enter 鍵觸發
document.getElementById('pw-input')
  .addEventListener('keydown', function(e) {
    if (e.key === 'Enter') checkPw();
  });
</script>

4 部署到 Cloudflare Pages

cd 你的網站文件夾
npx wrangler pages deploy . --project-name=你的項目名 --branch=main

部署完成後，打開網站確認密碼框正常顯示、輸入密碼後能正常進入。

5 把密碼存入 GCP Secret Manager（防忘記）

echo -n "你的密碼" | gcloud secrets create 網站名-password \
  --project=你的專案 --data-file=-

這樣即使忘記密碼，也能用 gcloud secrets versions access latest --secret=網站名-password 查回來。