原链：Why are the username and password on two different pages?
把用户名和密码放在两个不同的页面最常见的理由就是同时支持：
- SSO单点登录（例如登录谷歌服务）
- 用户名/密码登录
然而，这种登录方式让人们感到困惑，这可能也就是你阅读本文的原因！网站通常在同一个页面中同时显示用户名框和密码框，以便我们登录。因此，你不是唯一的想知道为什么密码框不见了或在另一个页面的人。
本文将说明此设计决策的安全性，并介绍几种支持多种身份验证路径的登录表单的方式。
将用户名框和密码框分开到两个页面是否会更安全？
这种分离会使凭证填充攻击更加麻烦。它还允许平台执行条件安全检查。例如，站点可以检查帐户是否启用了双重身份验证，如果没有启用，则需要验证码才能登录。这种两页的设计还使得不良行为者在涉及页面重定向时更难创建出具有相似登录页面的钓鱼网站。然而，额外的做成这样可能不值得，除非你还有SSO使用用例。
如果您想深入了解更多，可以在dev.to和Security Stack Exchange上对此主题进行一些很好的讨论。
对于同时处理SSO和用户名/密码登录方式
1. 将用户名和密码分开到不同的页面
这种设计为用户在两种情况下都遵循了一个清晰的路径。输入电子邮件或忘记查找和特定的操作步骤(“下一步”)也可简化了代码的实现。这种分离还支持上面提到的条件安全性检查。
目前，Shopify、Yahoo、谷歌和Twilio等网站都是这样做的。缺点是人们已经注意到并抱怨了。此外，这个方式并不总是能够很好地使用密码管理器的自动填充功能，但是主流的密码管理器(LastPass, 1Password)已经进行了适配调整。
2. 类似下方GIF图片的单个页面
像Dropbox和Segment网站都是这样一个漂亮的界面。 Segment的安全工程师向我展示了它是如何工作的：如果你去https://app.segment.com/网站输入类似foobar@segment.com，那么单点登录的选项将出现。 它可以识别电子邮件域和进行查看是否这个方式使用了Segment的SSO单点登录。 这种方式类似于上面的方式1，但其没有分开在两个独立的页面。 此方式处理更适合用户名/密码登录，并且可以很好的与密码管理器工作，但需要一些额外的JavaScript处理来达到这种变化。
3. 可选密码框
另一个方式是使密码框为可选。漏洞赏金平台Hackerone在他们的登录视图中做到了这一点。它简化了页面，不需要查找域，但是对于平台的单点登录用户来说可能显得有些笨拙。
在单个页面上显示更多选项(选项2或3)允许添加其他身份验证选项，比如添加社交帐号登录按钮。像Pinterest和Twitch这样的网站提供了这样的选择。
如何设计完美的登录表单
Brad Frost在他的帖子“Don't Get Clever with Login Forms”中提出了一些值得商榷的建议。你也可以关注Hacker News的讨论来获得更多的想法。当然，用户名和密码并不是登录页要考虑的唯一因素。您可以使用双重身份验证或电话号码来增强身份验证工作流的安全性。
贵公司是否以另一种方式解决了这个问题?或者还有其他将用户名登录页面分开的原因我没提及到?请在Twitter @kelleyrobinson上告诉我，或者查看Hacker News上的讨论。
网友评论