iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

不只是登入畫面!一起打造現代化登入系統 系列

現在每個網站幾乎都需要登入系統,但你對登入的運作了解多少呢?
在這 30 天,我們將一起使用 React 與 TypeScript 從零打造完整的登入系統,逐步學會表單驗證、狀態管理、社群登入與 Token 流程。
如果你也想挑戰自己,跟我一起踏上這段 30 天的學習旅程吧!

鐵人鍊成 | 共 30 篇文章 | 3 人訂閱 訂閱系列文 RSS系列文 團隊夢幻公牛
DAY 21

安全再進化[1 / 5 ]:Firebase Email 驗證信

就算我們已經有 Token 驗證、Cookie、Redux 權限管理,但「用戶的 Email 真的屬於他本人嗎?」這件事還沒確認。 為了避免 假帳號 / 垃圾註...

2025-10-05 ‧ 由 阿杰 分享
DAY 22

安全再進化[1 / 5 ]:客製化 Firebase 驗證信內容

Firebase 雖然幫我們寄 Email 驗證信,但預設長得有點陽春,而且還是英文標題。如果你的產品是中文系使用者,或是想導回自己的網站頁面,那就需要 自訂驗...

2025-10-06 ‧ 由 阿杰 分享
DAY 23

寄送 Firebase Email 驗證信(Email Verification)

Firebase 提供了現成的 Email 驗證機制,能在使用者註冊後寄出一封驗證信,使用者點擊信中的連結後,就能正式啟用帳號。這能有效防止假帳號與垃圾註冊。...

2025-10-07 ‧ 由 阿杰 分享
DAY 24

忘記密碼、重設密碼與變更密碼

這篇會帶你一步步實作: 忘記密碼(寄送重設密碼信) 透過信件連結重設密碼 已登入狀態下的「變更密碼」 忘記密碼:寄送重設密碼信 Firebase 提供 s...

2025-10-08 ‧ 由 阿杰 分享
DAY 25

變更密碼前的使用者重新驗證

為什麼需要重新驗證? 在 Firebase 裡,若使用者登入時間太久、或嘗試進行敏感操作(Sensitive Operation),像是: 更改密碼 更改 e...

2025-10-09 ‧ 由 阿杰 分享
DAY 26

多重身份驗證(MFA)

什麼是 MFA?為什麼需要? MFA(Multi-Factor Authentication)是除了密碼以外,再加一道驗證,例如: 第一層 第二層 常見組...

2025-10-10 ‧ 由 阿杰 分享
DAY 27

進階版 MFA 實作:Email / Google 登入 + SMS 二階段驗證

上一篇我們完成了 Firebase 提供的 MFA(SMS 驗證碼)綁定流程,這篇我們把它升級成「真正實用」的版本: 支援 三種登入方式:Email + Pa...

2025-10-11 ‧ 由 阿杰 分享
DAY 28

CI/CD 流程實作

為什麼要做 CI/CD? CI/CD(Continuous Integration / Continuous Deployment)是一套自動化流程,主要目的:...

2025-10-12 ‧ 由 阿杰 分享
DAY 29

CI/CD 實作 — React + Firebase(Preview → Staging → Production)

已安裝並設定 Firebase CLI(本地) 在 Firebase Console 建好 staging 與 production project(或使用相...

2025-10-13 ‧ 由 阿杰 分享
DAY 30

登入與帳號安全機制總體檢 Checklist

如果你還以為「登入系統 = Email + 密碼 + 一顆登入按鈕」,那這篇可能會刷新你的三觀。 在這整個系列裡,我從「最基本的 Firebase Login」...

2025-10-14 ‧ 由 阿杰 分享