身份

帮助用户注册

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

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

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

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

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

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

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

确保用户不使用已泄露的密码。例如，使用 Have 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 网址来请求新密码。