【译文】为啥输入用户名和密码的操作不在同一页？

朋友，想必你最近登录微软、谷歌的时候已经注意到，输入用户名和密码的逻辑似乎和先前不大一样了。当你熟练地敲下你那文艺的用户名，左手小拇指轻轻按下 tab 键，诶？？？说好的密码框呢？最近看到一篇文章 Why are the username and password on two different pages? 比较好的阐述了这个转变的缘由。

用户名框和密码框分页最常见的原因是要支持下面两个东西：

1. 单点登录（SSO）（比如使用 Google 登录等等）
2. 用户名/密码登录

但是这种登录流程经常让人很困惑，或许这正是你来看这篇文章的原因！通常来说网站会把用户名框和密码框放在同一个页面让我们登录。所以如果你在疑惑为啥密码框没了或者在另一页的话，你不是一个人。

本文着眼于这种设计方案的安全性，并介绍了一些支持多路径验证的登录表单的设计选择。

把用户名框和密码框放到两个页面真的更安全吗？

这种分离会让凭证填充攻击变得更麻烦。同时也让平台能够进行不同情况下的安全检查。比如说，网站可以检查要登入的账户是否开启了两步验证，如果没开启的话，登录时就需要输入验证码。这种需要进行重定向跳转的分页设计也让坏人更难去创建看起来相似的登录页钓鱼网站。但是如果你没用 SSO 单点登录的话，加这么一步其实价值不大。

关于这个话题在 dev.to 和 Security Stack Exchange 上也有一些很棒的讨论，如果你想细究的话可以去看看。

同时处理 SSO 单点登录和用户名/密码登录的选择

1. 把用户名和密码框分页

这种设计提供给了用户不管在哪种场景下都很清晰的操作路径。根据邮箱同步查找来进行不同的后续操作（“继续”）也让场景背后的代码实现变得更加简便。这种分页也提供了上文提到的不同情况下的安全检查。

现在像 Spofity, Google, Yahoo 这样的网站已经这么做了。这么做的负面影响就是人们已经发现并且在抱怨。还有就是，这个流程对密码管理软件的自动填充功能并不是很友好，但是主流的那些（LassPass，1Password）已经支持了。

2. 单页应用查询

像 DropBox 和 Segment 这方面的接口做得很好。Segment 的一位安全工程师向我展示了它的工作原理：如果你访问 https://app.segment.com/ 并且输入邮箱 foobar@segment.com，一个 SSO 单点登录的选项就会出现。它会识别邮箱域名然后查找这个域名所在组织是否使用了 Segment 的 SSO 单点登录。这和选择1很类似但是没有两个分离的登录页。这种选择优先处理用户名/密码登录，这对密码管理软件更友好，但是需要一些 JavaScript 处理，这无疑增加了变数。

3. 可选密码框

另一个选择是让密码框可选。Hackerone，一个漏洞悬赏平台，就在他们的登录页使用了这样的技术。这样做简化了页面，不需要查找组织域名，但对平台的 SAML 用户来说就有点麻烦了。

把用户名密码框显示在单页上（选择2或3）也允许添加一些其他的认证，比如添加社交平台登录按钮，像 Pinterest 和 Twitch 这样的网站已经支持了。

怎样设计完美的登陆表单

Brad Frost 在他的"别在登陆表单上自作聪明"一文中写了一些值得思辨的 tips。你也可以在 Hacker News 上讨论来获取更多主意。当然用户名和密码并不是登录屏上唯一要考虑的东西你可以通过 Twilio 的两步验证和手机号查询来增强登录授权的流程。

贵司是否用另一种方案解决了这个问题？或者有其他我没有提到的分离用户名和密码框的原因？在推特上联系我@kelleyrobinson 或者在下方评论区留言吧。