MODULE 9
收 email 名單:
行銷人最該先做的一件事
報名頁 + 真的存起來的後端 + 看得到、匯得出的後台。全部免費 tier。
為什麼最實用
社群觸及是租來的,
email 名單是你自己的。
兩條路,先選難度
| A. 不部署任何東西 | B. 自己的 Worker + 資料庫 |
|---|
| 做法 | Google 表單 / Formspree / Tally | Cloudflare Worker + D1 |
| 名單存哪 | 那個服務的後台 / Sheet | 你自己的資料庫,完全掌控 |
| 適合 | 只想快、量不大 | 要客製、名單自己擁有、要接系統 |
先說 A,因為它可能就夠你用了。
路線 A:零部署
- Google 表單 — 建表單 → 活動頁放「報名」按鈕連過去;名單自動進 Sheet,可下載 CSV。最省事
- Formspree / Tally — 想讓報名框長在自己頁面裡,貼一段 form 程式碼即可
- 代價:外觀受限、名單在別人家、量大要付費——對多數小活動完全夠
路線 B 架構(模組 6 的延伸)
報名頁(GitHub Pages)──POST email──> Worker ──寫入──> D1 資料庫
↑
你的後台頁 ──GET ?token=管理密碼────────┘ ──回傳名單──> 看 / 匯 CSV
- 報名頁 純前端 POST email
- Worker 驗證 / 擋機器人 / 限流 / 去重 / 寫入;帶密碼的讀取入口給後台
- D1 Cloudflare 免費 SQL 資料庫,名單存這(每天五百萬次讀寫)
部署(wrangler,同模組 6)
wrangler d1 create sanwu-signups # 建庫,記下 database_id
# 把 database_id 填進 wrangler.toml
wrangler d1 execute sanwu-signups --remote --file ./schema.sql
wrangler deploy # 部署 Worker
wrangler secret put ADMIN_TOKEN # 設後台密碼(自己想一組長字串)
ADMIN_TOKEN 是後台鑰匙,藏在 Worker Secret,永遠不寫進任何網頁。
後台登入:三種防護
| 做法一 token | 做法三 Google 登入 | 做法二 CF Access |
|---|
| 門檻 | 一把共享密碼 | 每人 Google 實名 | 每人實名 |
| 要域名嗎 | 不用 | 不用 | 要(Cloudflare) |
| 加/踢人 | 換 token 全員重給 | 改白名單即時 | 移除即時 |
| 成本 | 零,已內建 | 零(建個 Client ID) | 後台搬上 Cloudflare |
基本功:密碼走 Authorization 標頭別放網址。沒域名又想實名 → 做法三 Google 登入(前端只需公開的 Client ID、不用 secret;Worker 驗簽+查白名單,改白名單即時加人/踢人)。
做法三:建 Google OAuth Client ID
先懂:一個帳號可多專案,每專案一個同意畫面 = 一個品牌。「App 名稱」就是登入彈窗顯示的品牌名;選到舊專案會帶出舊品牌 → 想要乾淨品牌就新開專案。
- 1. console.cloud.google.com/apis/credentials → 為這品牌新開專案(別沿用舊的)
- 2. 首次先設 OAuth 同意畫面(External + App 名稱=品牌名 + email)
- 3. 建立憑證 → OAuth 用戶端 ID → 網頁應用程式
- 4. 「已授權的 JavaScript 來源」加你的網域(只協定+網域,如 https://帳號.github.io)
- 5. 建立 → 複製 Client ID(...apps.googleusercontent.com,公開、可放前端;不需 secret)
前端用 GSI 登入拿 ID token → Worker 驗簽+查 ALLOWED_EMAILS 白名單
名單拿到了,然後呢
- CSV 匯進 MailerLite / Mailchimp(免費 tier 群發數百到數千封)做開幕通知
- 進階:Worker 接 email 寄送 API(Resend / Postmark),報名當下自動寄歡迎信
- 本章先做到「收得到、看得到、匯得出」
常見坑
- 裸表單沒擋機器人 → honeypot 隱形欄位 + 每 IP 限流 + 格式驗證(可加 Turnstile)
- 去重沒做 → 靠資料庫 UNIQUE;回應別洩漏「這 email 在不在名單」
- 管理密碼放進前端 → 只能存 Worker Secret,前端是輸入後傳給 Worker 比對
- 個資責任 → 寫清楚用途與退訂、不收沒必要的、別外流
對照:demos/09-email-signup(報名頁 + admin.html 後台,接真的 D1)
動手做
- 任務 — 把報名表單接起來(現成 Google 表單或自架 Worker+D1),自己報名一筆,進後台看到
- 預期 — 後台名單出現你剛剛那筆、能匯出 CSV
- 卡關 — 後台看不到,確認報名頁與後台連同一後端、密碼/登入對
← → 翻頁