注册表单最佳实践
帮助您的用户轻松注册、登录和管理他们的帐户详细信息。
如果用户需要登录您的网站，那么良好的注册表单设计至关重要。对于连接不良、使用移动设备、匆忙或压力大的人来说尤其如此。设计不佳的注册表单会导致高跳出率。每次跳出都可能意味着失去用户和造成用户不满意——而不仅仅是错过注册机会。
这是一个非常简单的注册表单示例，演示了所有最佳实践：
清单 #
- 如果可以，请避免登录。
- 明确如何创建帐户。
- 明确如何访问帐户详细信息。
- 减少表单杂乱项。
- 考虑会话长度。
- 帮助密码管理器安全地建议和存储密码。
- 不允许泄露密码。
- 允许密码粘贴。
- 切勿以纯文本形式存储或传输密码。
- 不要强制更新密码。
- 使更改或重置密码变得简单。
- 启用联合登录。
- 使帐户切换变得简单。
- 考虑提供多重身份验证。
- 注意用户名。
- 在现场和实验室中进行测试。
- 在一系列浏览器、设备和平台上进行测试。
如果可以，请避免登录 #
在您实施注册表单并要求用户在您的网站上创建帐户之前，请考虑您是否真的需要这样做。在可能的情况下，您应该避免在登录后设置门控功能。
最好的注册表单是没有注册表单！
通过要求用户创建一个帐户，您会介于他们和他们想要实现的目标之间。您是在请求帮助，并要求用户信任您的个人数据。您存储的每个密码和数据项都带有隐私和安全“数据债务”，成为您网站的成本和责任。
如果您要求用户创建帐户的主要原因是在导航或浏览会话之间保存信息，请考虑改用客户端存储。对于购物网站，强迫用户创建帐户进行购买被认为是放弃购物车的主要原因。您应该将访客结帐设为默认值。
使登录变得明显 #
明确如何在您的网站上创建帐户，例如使用页面右上角的登录或登录按钮。避免使用模棱两可的图标或模糊的措辞（“加入！”、“加入我们”）并且不要在导航菜单中隐藏登录信息。可用性专家 Steve Krug 总结了这种网站可用性的方法：不要让我思考！如果您需要说服网络团队中的其他人，请使用分析来显示不同选项的影响。
当窗口尺寸大于此处显示的尺寸时，Gmail 会显示登录链接和创建帐户按钮。
确保为通过身份提供商（例如 Google）注册并且还使用电子邮件和密码注册的用户关联帐户。如果您可以从身份提供商的配置文件数据访问用户的电子邮件地址，并且匹配两个帐户，那么这很容易做到。下面的代码显示了如何访问 Google 登录用户的电子邮件数据。
// auth2 is initialized with gapi.auth2.init()
if (auth2.isSignedIn.get()) {
var profile = auth2.currentUser.get().getBasicProfile();
console.log(`Email: ${profile.getEmail()}`);
}{：#obvious-account-details}
用户登录后，请明确如何访问帐户详细信息。尤其要明确如何更改或重置密码。
减少表单杂乱项 #
在注册流程中，您的工作是将复杂性降至最低并让用户保持专注。减少杂乱项。现在不是分心和诱惑的时候！
在注册时，要求尽可能少。仅在您需要并且用户看到提供该数据的明显好处时才收集其他用户数据（例如姓名和地址）。请记住，您传达和存储的每一项数据都会产生成本和责任。
不要仅仅为了确保用户获得正确的联系方式而加倍输入。这会减慢表单的完成速度，并且如果表单字段是自动填充的，则毫无意义。相反，在用户输入他们的联系方式后向用户发送确认代码，然后在他们响应后继续创建帐户。这是一种常见的注册模式：用户已经习惯了。
您可能希望通过在用户每次在新设备或浏览器上登录时向用户发送代码来考虑免密码登录。Slack 和 Medium 等网站使用了这一版本。
与联合登录一样，这还有一个额外的好处，即您不必管理用户密码。
考虑会话长度 #
无论您对用户身份采取何种方法，您都需要对会话长度做出谨慎的决定：用户保持登录状态的时间以及可能导致您注销的原因。
考虑您的用户是使用移动设备还是桌面设备，以及他们是在桌面设备上共享还是在共享设备上共享。
帮助密码管理器安全地建议和存储密码 #
您可以帮助第三方和内置浏览器密码管理器建议和存储密码，让用户无需自己选择、记住或键入密码。密码管理器在现代浏览器中运行良好，可以跨设备、跨平台特定应用和 Web 应用同步帐户，也适用于新设备。
这使得正确编码注册表单非常重要，尤其是使用正确的自动填充值。对于注册表单，使用 autocomplete="new-password" 建议新密码，并尽可能将正确的自动填充值添加到其他表单字段，例如 autocomplete="email" 和 autocomplete="tel"。您还可以通过在注册和登录表单、form 元素本身以及任何 input、select 和 textarea 元素中使用不同的 name 和 id 值来帮助密码管理器。
您还应该使用适当的 type 属性在移动设备上提供正确的键盘并启用浏览器的基本内置验证。您可以从付款和地址表单最佳实践中了解更多信息。
确保用户输入安全密码 #
启用密码管理器建议密码是最好的选择，您应该鼓励用户接受浏览器和第三方浏览器管理器建议的强密码。
但是，很多用户都希望输入自己的密码，因此您需要实施密码强度规则。美国国家标准与技术研究所解释了如何避免不安全的密码。
不允许泄露密码 #
无论您为密码选择何种规则，您都不应允许在安全漏洞中暴露的密码。
用户输入密码后，您需要检查该密码是否已被泄露。网站 Have I Being Pwned 提供了用于密码检查的 API，或者您可以自己将其作为服务运行。
Google 的密码管理器还允许您检查您现有的任何密码是否已泄露。
如果您确实拒绝了用户建议的密码，请具体告诉他们拒绝的原因。在用户输入值后立即显示问题原因并解释如何修复它们——不要等到他们提交注册表单并不得不等待服务器的响应之后。
不要禁止密码粘贴 #
某些站点不允许将文本粘贴到密码输入中。
禁止密码粘贴会惹恼用户，从而导致用户使用容易记忆的密码（因此可能更容易被破解），并且根据英国国家网络安全中心等组织的说法，实际上可能会降低安全性。用户在尝试粘贴密码后才能意识到不允许粘贴，因此禁止密码粘贴并不能避免剪贴板漏洞。
切勿以纯文本存储或传输密码 #
确保对密码进行salt 和散列——不要尝试发明自己的散列算法！
不要强制更新密码 #
强制更新密码对 IT 部门来说可能代价高昂，让用户感到厌烦，并且对安全性没有太大影响。它还可能造成人们使用不安全、容易记住的密码，或保留密码的物理记录。
您应该监视异常的帐户活动并警告用户，而不是强制更新密码。如果可能，您还应该监控因数据泄露而被泄露的密码。
您还应该让您的用户访问他们的帐户登录历史记录，向他们显示登录发生的时间和地点。
使更改或重置密码变得简单 #
让用户清楚地知道在哪里以及如何更新他们的帐户密码。在某些网站上，这出奇地困难。
当然，您还应该让用户在忘记密码时轻松重置密码。Web 应用安全计划 (Open Web Application Security Project) 提供了有关如何处理丢失的密码的详细指南。
为了确保您的企业和用户的安全，如果用户发现密码已被盗用，帮助他们更改密码尤为重要。为了使这更容易，您应该向重定向到您的密码管理页面的网站添加一个 /.well-known/change-password URL。这使密码管理器可以将您的用户直接导航到他们可以更改您网站密码的页面。此功能现已在 Safari、Chrome 中实现，并且即将在其他浏览器中使用。通过添加用于更改密码的知名 URL 帮助用户轻松更改密码解释了如何实现这一点。
如果用户需要，您还应该让他们轻松删除他们的帐户。
通过第三方身份提供商提供登录 #
许多用户更喜欢使用电子邮件地址和密码注册表单登录网站。但是，您还应该允许用户通过第三方身份提供者登录，也称为联合登录。
这种方法有几个优点。对于使用联合登录创建帐户的用户，您无需询问、交流或存储密码。
您还可以通过联合登录访问其他经过验证的个人资料信息，例如电子邮件地址——这意味着用户无需输入该数据，您也无需自己进行验证。联合登录还可以让用户在使用新设备时更加轻松。
将 Google Sign-In 集成到您的 Web 应用解释了如何将联合登录添加到您的注册选项中。许多其他身份平台可用。
使帐户切换变得简单 #
许多用户使用相同的浏览器共享设备并在帐户之间切换。无论用户是否访问联合登录，您都应该使帐户切换变得简单。
考虑提供多重身份验证 #
多重身份验证意味着确保用户以不止一种方式提供身份验证。例如，除了要求用户设置密码外，您还可以使用通过电子邮件或 SMS 文本消息发送的一次性密码，或使用基于应用的一次性密码、安全密钥或指纹传感器。SMS OTP 最佳实践和使用 WebAuthn 启用强身份验证解释了如何实现多重身份验证。
如果您的站点处理个人或敏感信息，您当然应该提供（或强制执行）多重身份验证。
注意用户名 #
除非（或直到）您需要用户名，否则不要坚持使用用户名。使用户能够仅使用电子邮件地址（或电话号码）和密码进行注册和登录，如果他们愿意，也可以使用联合登录。不要强迫他们选择并记住用户名。
如果您的网站确实需要用户名，请不要对其施加不合理的规则，也不要阻止用户更新其用户名。在您的后端，您应该为每个用户帐户生成一个唯一 ID，而不是基于用户名等个人数据的标识符。
还要确保对用户名使用 autocomplete="username"。
在一系列设备、平台、浏览器和版本上进行测试 #
在用户最常用的平台上测试注册表单。表单元素功能可能会有所不同，视口大小的差异可能会导致布局问题。 BrowserStack 支持在一系列设备和浏览器上对开源项目进行免费测试。
实施分析和真实用户监控 #
您需要现场数据和实验室数据来了解用户如何体验您的注册表单。分析和真实用户监控 (RUM) 为用户的实际体验提供数据，例如加载注册页面需要多长时间、用户交互（或不交互）哪些 UI 组件以及用户完成注册所需的时间。
- 页面分析：注册流程中每个页面的页面浏览量、跳出率和退出率。
- 交互分析：目标渠道和事件表明用户放弃注册流程的位置以及用户点击注册页面的按钮、链接和其他组件的比例。
- 网站性能：以用户为中心的指标可以告诉您注册流程是否加载缓慢或视觉不稳定。
微小的变化会对注册表单的完成率产生很大的影响。分析和 RUM 使您能够优化更改并确定其优先级，并监控您的站点是否存在本地测试未暴露的问题。
继续学习 #
照片：@ecowarrioprincess，来源：Unsplash。