身份

注册表单通常是用户在您的网站上与表单进行的首次互动。 设计良好的注册表单至关重要,而安全表单则必不可少。

我们来看一个注册表单,以及如何帮助用户在您的网站上注册。

请尽量简化注册表单,仅显示创建帐号所需的表单控件。 请不要为了让用户获取正确的帐号详细信息,而将表单控制功能加倍。 请改为发送确认电子邮件。

帮助用户填写账号详细信息

您可以使用适当的 autocomplete 属性,帮助用户填写其帐号详细信息。 为电子邮件地址字段使用 autocomplete="email",为新密码字段使用 autocomplete="new-password"

详细了解自动填充输入控件

您还可以通过提供用于泄露密码的 <button> 选项,帮助用户输入安全的密码。
详细了解显示密码格式

确保您的注册表单安全无虞

切勿以纯文本形式存储或传输密码。 请务必对密码进行加盐和哈希处理,并且不要试图编造您自己的哈希算法

提供多重身份验证,尤其是在您存储个人数据或敏感数据时。 短信动态密码最佳做法使用 WebAuthn 启用增强型身份验证介绍了如何实现多重身份验证。

确保用户不使用已泄露的密码。 例如,使用 Have I Been Pwned 中的 API 来检测已泄露的密码,并建议您的用户填写其他新密码,或者在他们的密码被泄露时向他们发出警告。

帮助用户登录

我们来看一下如何构建登录表单,以确保用户能够轻松登录您的网站。

将注册按钮和登录按钮的位置放在醒目的位置。 确保您的表单可在触摸设备上使用:

  • 按钮的点按目标大小至少为 48 像素。
  • 表单元素的 font-size 足够大(20px 适合在移动设备上显示)。
  • 表单控件之间有足够的空间 (margin),且输入空间足够大(在移动设备上至少使用 padding: 15px)。

帮助用户填写电子邮件地址和密码

帮助浏览器和密码管理工具自动填充帐号详细信息。 对于电子邮件地址字段,请使用 autocomplete="email";对于当前密码字段,请使用 autocomplete="current-password"

为了帮助用户手动填写其帐号详细信息,请为电子邮件地址字段使用 type="email",以便在移动设备上显示相应的屏幕键盘。

在您的电子邮件地址和密码字段使用 required 属性,这样您可以在用户提交表单时警告无效值。 考虑使用实时验证来帮助用户在输入无效数据后立即更正这些数据,而不是等待用户提交表单。

确保用户可以看到自己输入的密码

默认情况下,您为 <input type="password"> 填写的文本会被遮盖,以尊重用户的隐私。通过显示 <button> 来显示/隐藏所输入文本,帮助用户输入密码。

详细了解如何实现密码泄露 <button>

确保您的登录和注册表单易于使用

定期邀请真人测试您的登录和注册表单,确保身份验证机制符合预期。 您可以使用分析工具和真实用户衡量 (RUM) 来收集现场数据,并使用 LighthousePageSpeed Insights 等工具自行运行测试。 详细了解如何测试易用性以及收集分析数据

确保您的表单可在不同的浏览器中和不同平台上正常运行。 您可以仅使用键盘或使用屏幕阅读器(例如 Mac 上的 VoiceOver 或 Windows 上的 NVDA),在不同尺寸的屏幕上测试表单。

帮助用户更改账号设置

确保用户可以更改每项帐号设置,包括电子邮件地址、密码和用户名。

公开透明您存储的数据,并帮助用户随时下载其所有个人数据。确保用户可以在需要时删除其帐号。 在某些地区,诸如此类的帐号管理功能可能是一项法律要求。

确保用户可以更新密码

让用户能够轻松更新密码。

在更改密码之前要求用户提供当前密码,并发送一封有关密码更改的电子邮件,并提供还原和锁定帐号的选项。

添加请求新密码的选项,并考虑提供 .well-known 网址来请求新密码。

资源