申請表單最佳做法

協助使用者註冊、登入及管理帳戶詳細資料，盡量減少麻煩。

Sam Dutton

如果使用者需要登入貴網站，則良好的註冊表單設計至關重要。對於連線不佳、使用行動裝置、急忙或處於壓力下的使用者來說，這一點尤其重要。設計不當的註冊表單獲得高跳出率。 每個跳出事件都可能代表失去一位不滿的使用者，而非只是錯失註冊機會。

以下是簡單的註冊表單範例，其中展示了所有最佳做法：

檢查清單

• 盡量避免登入。
• 瞭解如何建立帳戶。
• 清楚顯示如何存取帳戶詳細資料。
• 減少表單雜訊。
• 考量工作階段長度。
• 協助密碼管理工具安全地建議及儲存密碼。
• 不允許使用遭到外洩的密碼。
• 允許貼上密碼。
• 請勿以純文字儲存或傳送密碼。
• 不要強制更新密碼。
• 簡化密碼變更或重設程序。
• 啟用聯合登入。
• 簡化帳戶切換程序。
• 考慮提供多重驗證。
• 請謹慎處理使用者名稱。
• 在實地和實驗室進行測試。
• 在各種瀏覽器、裝置和平台上進行測試。

盡可能避免登入

在導入註冊表單並要求使用者在您的網站上建立帳戶之前，請先考慮您是否確實有必要。盡可能避免將功能設為登入後才能存取。

請勿填寫申請表，但還是建議您填寫此表單！

邀請使用者建立帳戶時，你就會認同他們想達成的目標。 您詢問使用者的意見，希望他們信任您提供個人資料。您儲存的每個密碼和資料項目都會產生隱私權和安全性「資料債務」，成為網站的成本和責任。

如果您要求使用者建立帳戶的主要原因，是為了在導覽或瀏覽工作階段之間儲存資訊，建議您改用用戶端儲存空間。對於購物網站而言，強制要求使用者建立帳戶才能購物，是購物車放棄率的主要原因。你應該將訪客結帳設為預設值。

讓登入流程一目瞭然

明確說明如何在網站上建立帳戶，例如頁面右上方的「Login」或「Sign in」按鈕。避免使用模稜兩可的圖示或模糊不清的文字 (例如「加入我們吧！」)，請按一下「加入我們」)，並不要在導覽選單中隱藏登入選項。可用性專家史蒂夫．克魯格 (Steve Krug) 曾對網站可用性提出以下建議：「不要讓我思考！」如果需要說服網頁團隊成員，請使用數據分析功能，說明不同選項的影響。

請務必為透過 Google 等身分識別服務供應商註冊，且同時使用電子郵件和密碼註冊的使用者連結帳戶。如果您可以從身分識別提供者提供的個人資料中存取使用者的電子郵件地址，並比對這兩個帳戶，就能輕鬆完成這項操作。以下程式碼說明如何存取 Google 登入使用者的電子郵件資料。

// auth2 is initialized with gapi.auth2.init()
if (auth2.isSignedIn.get()) {
  var profile = auth2.currentUser.get().getBasicProfile();
  console.log(`Email: ${profile.getEmail()}`);
}

清楚說明如何存取帳戶詳細資料

使用者登入後，請清楚說明如何存取帳戶詳細資料。並特別留意如何變更或重設密碼。

減少表單中的雜亂內容

在註冊流程中，您的工作是盡量減少複雜性，並讓使用者保持專注。減少雜訊。這不是分心和誘惑的時候！

註冊時，請盡量減少要求的資訊。請只在必要時收集額外的使用者資料 (例如姓名和地址)，並讓使用者清楚瞭解提供這些資料的好處。請注意，您傳送和儲存的每項資料都會產生成本和責任。

請勿為了確保使用者輸入正確的聯絡資料，而重複輸入資料。這會讓表單填寫作業變慢，如果表單欄位是自動填入的話，就沒有意義。請改為在使用者輸入聯絡詳細資料後傳送確認碼，並在使用者回覆後繼續建立帳戶。這是常見的註冊模式，使用者也習慣這種模式。

您可以考慮採用無密碼登入機制，每次使用者在新裝置或瀏覽器上登入時，都會傳送一組驗證碼給使用者。Slack 和 Medium 等網站就採用了這類版本。

與聯合登入功能一樣，這項功能還有一個額外好處，就是您不必管理使用者密碼。

考量工作階段長度

無論您採用何種方法處理使用者身分，都必須謹慎決定工作階段長度：使用者可保留登入狀態多久，以及可能導致您將他們登出的因素。

請考量使用者是使用行動裝置還是電腦，以及他們是在電腦上或共用裝置上分享。

協助密碼管理工具安全地建議及儲存密碼

您可以協助第三方和內建的瀏覽器密碼管理工具建議及儲存密碼，讓使用者不必自行選擇、記住或輸入密碼。密碼管理工具可以在新型瀏覽器、平台專屬和網頁應用程式間同步處理帳戶，且適用於新裝置。

因此，正確地撰寫註冊表單的程式碼極為重要，特別是使用正確的自動完成值。在註冊表單中，請使用 autocomplete="new-password" 輸入新密碼，並盡可能在其他表單欄位中加入正確的自動完成值，例如 autocomplete="email" 和 autocomplete="tel"。您也可以在註冊和登入表單中，為 form 元素本身以及任何 input、select 和 textarea 元素使用不同的 name 和 id 值，協助密碼管理工具。

您也應使用適當的 type 屬性，在行動裝置上提供正確的鍵盤，並啟用瀏覽器內建的基本驗證功能。詳情請參閱付款及地址表單最佳做法。

確保使用者輸入安全的密碼

最佳做法是啟用密碼管理工具，讓系統提供密碼建議，您應鼓勵使用者接受瀏覽器和第三方瀏覽器管理工具建議的高強度密碼。

然而，許多使用者想自行輸入密碼，因此您必須實作密碼強度規則。美國國家標準暨技術研究院 (National Institute of Standards and Technology) 說明瞭如何避免不安全的密碼。

不允許使用遭到外洩的密碼

無論您為密碼設定何種規則，都絕對不應使用在安全性違規事件中曝光的密碼。

您需要檢查使用者輸入密碼後，確認該密碼不是已遭到入侵的密碼。Have I Been Pwned 網站提供 API 供您檢查密碼，您也可以自行以服務形式執行這項作業。

Google 密碼管理工具也可以讓您檢查現有的密碼是否遭外洩。

如果您拒絕使用者提出的密碼，請具體說明拒絕的原因。在輸入欄中顯示問題並說明如何修正，但請在使用者輸入值後立即顯示，而不是在使用者提交註冊表單後，等待伺服器回應時才顯示。

不禁止貼上密碼

部分網站不允許在密碼輸入框中貼上文字。

禁止利用密碼貼上擾亂使用者的密碼、鼓勵使用者容易記住 (且因此更容易遭盜用) 的密碼，而根據英國國家網路安全中心等機構的資料，實際上可能降低安全性。使用者只有在嘗試貼上密碼後，才會知道系統不允許貼上密碼，因此禁止貼上密碼並不會避免剪貼簿的安全漏洞。

切勿以純文字格式儲存或傳輸密碼

請務必使用鹽值和雜湊加密密碼，並不要嘗試自行設計雜湊演算法！

不強制更新密碼

請勿強制要求使用者隨意更新密碼。

強制更新密碼可能會導致 IT 部門所費不貲，且對使用者造成困擾，並且對安全性沒有太大影響。系統還可能鼓勵使用者使用較不安全好記的密碼，或留存密碼的實體記錄。

請監控帳戶是否有異常活動，並提醒使用者，不要強制要求使用者更新密碼。如果可以的話，您也應該監控因資料侵害事件而外洩的密碼。

您也應提供使用者存取帳戶登入記錄的權限，讓他們查看登入的位置和時間。

讓使用者輕鬆變更或重設密碼

請清楚告知使用者如何更新帳戶密碼。在某些網站上，這項工作難度出乎意料。

當然，您也應讓使用者在忘記密碼時，能輕鬆重設密碼。Open Web Application Security Project 提供詳細指引，說明如何處理遺失密碼的問題。

為了保護您的商家和使用者，如果使用者發現密碼遭到入侵，請務必協助他們變更密碼。為簡化這項操作，您應在網站中加入 /.well-known/change-password 網址，將使用者重新導向至密碼管理頁面。這樣一來，密碼管理工具就能直接將使用者導向可變更網站密碼的頁面。這項功能目前已在 Safari 和 Chrome 中實作，也會在其他瀏覽器推出。請參閱「新增可變更密碼的已知網址，協助使用者輕鬆變更密碼」一文。瞭解如何實作此功能。

您也應讓使用者輕鬆刪除帳戶 (如果他們有此需求)。

透過第三方識別資訊提供者提供登入功能

許多使用者偏好使用電子郵件地址和密碼註冊表單，登入網站。不過，您也應讓使用者能夠透過第三方身分識別資訊提供者 (也稱為聯合登入) 登入。

這種方法有幾個優點。如果使用者是透過聯合登入功能建立帳戶，您就不需要要求、傳送或儲存密碼。

您也可以透過聯合登入功能存取其他已驗證的個人資料，例如電子郵件地址，這表示使用者不必輸入這類資料，您也不必親自進行驗證。使用者在取得新裝置時，也可以透過聯合登入功能輕鬆登入。

將 Google 登入整合至網頁應用程式說明如何在註冊選項中加入聯合登入功能。您也可以使用其他身分驗證平台。

簡化帳戶切換程序

許多使用者會共用裝置，並使用同一個瀏覽器切換帳戶。無論使用者是否使用聯合登入功能，您都應簡化帳戶切換程序。

考慮提供多重驗證

多重驗證功能可確保使用者提供多種驗證方式。舉例來說，除了要求使用者設定密碼，您也可以強制使用者透過電子郵件或簡訊傳送的一次性密碼驗證，或是使用應用程式中的一次性密碼、安全金鑰或指紋感應器。簡訊動態密碼最佳做法和透過 WebAuthn 啟用強式驗證說明如何導入多重驗證。

如果您的網站會處理個人或機密資訊，請務必提供 (或強制執行) 多重驗證機制。

處理使用者名稱

除非 (或直到) 您需要使用者名稱，否則請勿強制要求使用者名稱。讓使用者只需使用電子郵件地址 (或電話號碼) 和密碼註冊及登入，如果他們偏好聯合登入，也可以使用這項功能。請勿強迫使用者選擇並記住使用者名稱。

如果您的網站確實需要使用者名稱，請勿對使用者名稱設下不合理的規則，也不要禁止使用者更新使用者名稱。在後端，您應為每個使用者帳戶產生專屬 ID，而非根據使用者名稱等個人資料產生 ID。

此外，請務必使用 autocomplete="username" 做為使用者名稱。

透過各種裝置、平台、瀏覽器和版本進行測試

在使用者最常用的平台上測試註冊表單。表單元素的功能可能會有所不同，且可視區大小的差異可能會導致版面配置問題。BrowserStack 可讓您在各種裝置和瀏覽器上免費測試開放原始碼專案。

導入數據分析和真實使用者監控

您需要實地資料和實驗室資料，才能瞭解使用者如何體驗註冊表單。Analytics 與實際使用者監控 (RUM) 會為使用者提供實際體驗的資料，例如註冊頁面載入所需的時間、使用者與哪些 UI 元件互動 (或不互動)，以及完成註冊所需的時間。

• 網頁分析：註冊流程中每個網頁的網頁瀏覽、跳出率和離開率。
• 互動分析：目標程序和事件會顯示使用者放棄註冊流程的位置，以及使用者按下按鈕、連結和其他註冊頁面元件所佔比例。
• 網站效能：以使用者為中心的指標可讓您瞭解註冊流程的載入速度是否緩慢，或視覺效果是否不穩定。

稍微調整一下註冊表單的完成率，可能會大幅改變。您可以運用 Analytics 和 RUM 最佳化變更優先順序並排定變更的優先順序，同時監控網站，瞭解本機測試未揭露的問題。

持續學習

• 登入表單最佳做法
• 付款和地址表單的最佳做法
• 建立出色的表單
• 行動表單設計的最佳做法
• 功能更強大的表單控制項
• 建立無障礙表單
• 使用憑證管理 API 簡化註冊流程
• 使用 WebOTP API 在網路上驗證電話號碼

相片來源：@ecowarriorprincess 在 Unsplash 上提供。