身分

協助使用者註冊

註冊表單通常是使用者第一次與網站上的表單互動。良好的註冊表單設計極為重要，同時也應提供安全的表單。

讓我們來看看申請表單，以及如何協助使用者在網站上完成註冊。

盡量簡化註冊表單，只顯示建立帳戶所需的表單控制項。請勿將表單控制項加倍，讓使用者能正確取得帳戶詳細資料。請改為傳送確認電子郵件。

您可以使用適當的 autocomplete 屬性，協助使用者填寫帳戶詳細資料。在電子郵件欄位使用 autocomplete="email"，使用 autocomplete="new-password" 做為新密碼欄位。

您也可以提供顯示密碼 (<button>) 協助使用者輸入安全的密碼。
進一步瞭解解鎖密碼模式。

請勿以純文字格式儲存或傳送密碼。請務必加上鹽和雜湊密碼，請勿嘗試自行開發雜湊演算法。

提供多重驗證功能，尤其是儲存個人或機密資料時。簡訊動態密碼最佳做法與使用 WebAuthn 啟用高強度驗證會說明如何實作多重驗證機制。

確保使用者未使用遭外洩的密碼。舉例來說，您可以使用 I Been Pwned 提供的 API 偵測遭外洩的密碼，並建議使用者填入其他新密碼，或在密碼遭駭時警告使用者。

一起來瞭解如何建立登入表單，確保使用者能輕鬆登入網站。

將註冊按鈕和登入按鈕的位置顯而易見。請確認您的表單可在觸控裝置上使用：

協助瀏覽器和密碼管理工具自動填入帳戶詳細資料。使用 autocomplete="email" 做為電子郵件欄位，使用 autocomplete="current-password" 做為目前的密碼欄位。

如要協助使用者手動填入帳戶詳細資料，請在電子郵件欄位使用 type="email"，在行動裝置上顯示適當的螢幕小鍵盤。

在電子郵件和密碼欄位中使用 required 屬性，以便在使用者提交表單時發出警告。建議您使用即時驗證，在使用者輸入無效資料後立即加以修正，而不需等待表單提交。

為維護使用者隱私，根據預設，您為 <input type="password"> 填入的文字會經過模糊處理。顯示 <button> 來切換所輸入文字的顯示設定，協助使用者輸入密碼。

定期與真人測試您的登入和註冊表單，確認驗證能正常運作。您可以透過數據分析和實際使用者評估 (RUM) 收集實際資料，並透過 Lighthouse 和 PageSpeed Insights 等工具自行執行測試。進一步瞭解如何測試可用性及收集數據分析資料。

確保您的表單可以在不同瀏覽器和平台上正常運作。只要使用鍵盤或螢幕閱讀器 (例如 Mac 上的 VoiceOver 或 Windows NVDA)，即可在各種螢幕大小上測試表單。

請確保使用者可以變更每項帳戶設定，包括電子郵件地址、密碼和使用者名稱

請清楚說明您儲存的資料類型，並協助使用者隨時下載所有個人資料。確保使用者可以視需要刪除自己的帳戶。某些地區的帳戶管理功能 (例如這些功能) 可能需要法律要求。

讓使用者輕鬆更新密碼。

變更密碼前，先要求使用者提供目前的密碼，並傳送電子郵件有關密碼變更的電子郵件，並選擇還原並鎖定帳戶。

新增要求新密碼的選項，並考慮提供用來申請新密碼的 .well-known 網址。