什麼是 MFA？為什麼需要？ MFA（Multi-Factor Authentication）是除了密碼以外，再加一道驗證，例如： 第一層 第二層 常見組...
為什麼需要重新驗證？ 在 Firebase 裡，若使用者登入時間太久、或嘗試進行敏感操作（Sensitive Operation），像是： 更改密碼 更改 e...
這篇會帶你一步步實作： 忘記密碼（寄送重設密碼信） 透過信件連結重設密碼 已登入狀態下的「變更密碼」 忘記密碼：寄送重設密碼信 Firebase 提供 s...
Firebase 提供了現成的 Email 驗證機制，能在使用者註冊後寄出一封驗證信，使用者點擊信中的連結後，就能正式啟用帳號。這能有效防止假帳號與垃圾註冊。...
Firebase 雖然幫我們寄 Email 驗證信，但預設長得有點陽春，而且還是英文標題。如果你的產品是中文系使用者，或是想導回自己的網站頁面，那就需要 自訂驗...
就算我們已經有 Token 驗證、Cookie、Redux 權限管理，但「用戶的 Email 真的屬於他本人嗎？」這件事還沒確認。 為了避免 假帳號 / 垃圾註...
在前面幾節，我們已經完成： Token 驗證（Express / Firebase Functions / MSW） Token 儲存（LocalStorag...
當我們拿到 Firebase 的 idToken 後，下一個問題就是 ——「要放哪裡？」前端有三個常見選擇： 儲存方式 優點 缺點 適用情境 Lo...
把 Token 丟去 /auth/verify 只是「確認他是不是合法使用者」，但接下來還有兩件事要處理： 把驗證結果存起來（避免每次重新整理都重發 API）...
後端準備好了（不論你用的是 Express + Firebase Admin，還是用 MSW 模擬），接下來的重點就是： 前端要怎麼把 Firebase 拿到...
在做前端登入系統時，你可能會想：「我不是已經用 Firebase Login 登入了嗎？為什麼還要搞一個後端驗證？」別急，這篇文章用最輕鬆的方式帶你理解，還會附...
我們在專案中已經導入 Firebase Auth，但很多人做到一半會突然冒出幾個問號： Firebase 有 JWT 嗎？ Access Token、ID T...
JWT 是什麼？JWT（JSON Web Token）是一種 基於 JSON 的安全傳遞憑證，常用於： 使用者登入後的身份驗證 API 存取授權 在分散式...
在前幾篇，我們已經有了「 房門與門鎖 」的表單驗證，也做好「 屋況驗收 」。但如果門鎖只是裝飾，任何人都能翻窗進來，那這棟房子還是非常危險。這時候，就需要 Fi...
在上一篇，我們已經完成了 Vitest 的初始化，並撰寫了第一個單元測試。但光有測試檔還不夠，我們也要透過覆蓋率來檢視測試是否完整，避免有些功能被遺漏沒檢查到。...
在上一篇的「房門與門鎖」篇章中，我們已經完成了登入 / 註冊表單的設計，讓使用者能夠順利進出這棟「房子」🙂。但光是蓋好門，還不足以保證整體的品質。接下來就要進入...
之前我們在前面的篇章知道了如何使用 大括號 {} 來幫助我們顯示變數資料。而有時候我們會想顯示不只一項資料，而是從擁有數個 值 得 陣列（Array） 中，顯示...
在上一篇，我們完成了登入表單的驗證，算是裝好了「基本門鎖」。但如果你常用現代網站或 App，應該會發現：許多平台除了傳統帳號密碼之外，還提供了「社群登入」選項。...
在上一篇我們完成了登入頁的組件化設計，讓程式碼更易於維護。既然基礎結構已經打好，接下來就能專心加入更進階的功能了🥳。這一篇，我們要把表單驗證的部分徹底完成，延續...
上一篇我們替登入頁加入了基本的驗證功能，但隨著功能增多，程式碼也開始變得雜亂，閱讀與維護的成本逐漸升高🫠。在本篇中，我們會透過 組件化 ( Componenti...
上一篇，我們將整體專案做好了初始化，TypeScript 與 ESLint 都能夠正常運作了😌。那麼接下來就要迎接新篇章 — 起大厝。不是哦 不是這樣哦，我們的...
昨天簡單了介紹一下 React，跟之後會使用到的線上測試環境。今天會接下來介紹 React 裡的 import 跟 export。然後我後來發現 快速開始 裡的...
上一篇我們已經建立好 React + TypeScript 的新專案環境了，但這還只是開始😌。這篇會是初始化專案的重要關鍵，我們要來聊聊 Vite 預設專案裡尚...
今天主要閱讀的內容，會是 React 官網裡的 快速開始 (Quick Start) 頁。但在開始閱讀之前，會想簡單介紹一下我所知道的 React。 React...
登入功能幾乎是每個網站必備的核心，但你真的了解它是怎麼運作的嗎？ 哈囉！ 我是正在經歷 "畢業即失業" 的求職者🤣，目前正朝著競爭激烈的前端...
✨ 華麗煙火背景+動態台灣國旗+繽紛文字，視覺衝擊直達心靈！🇹🇼 在這充滿煙火和歡呼聲的雙十國慶日，我們用 Vue.js 和創意設計，打造出一個專屬於中華民...
骨架屏黑科技，提升載入體驗 大家好！今天我們要聊一聊網頁開發中的一個「秘密武器」——骨架屏（Skeleton Loading）！有沒有發現，有些網站在內容還...
運用漸變、動畫與動態樣式，讓你的網頁元素閃耀出迷人的色彩魅力！ 哈囉！受夠了中規中矩的文字了嗎？是時候讓你的網頁閃耀起來啦！ 今天我們要用 Vue.js 來玩...
讓導航欄脫穎而出！用 Vue.js 和 GSAP 強調呼吸感的品牌互動 哈囉各位！今天我們要來搞點大動作，帶大家一起用 Vue.js 和 GSAP 打造一個超...
探索 Vue.js 循環動效，為您的網頁注入獨特的貓咪魅力，感受每一刻的‘MADE WITH LOVE’。 哈囉各位，今天我們要一起來揭開文字循環特效的神秘面...
阿杰
lihsuanh
Sunny.Cat
iThome鐵人賽
看影片追技術