用户界面-如何告诉浏览器身份验证成功



在常规电子邮件/密码表单的场景中,提交的表单向服务器发出POST请求以验证客户端凭据。

如何告知浏览器身份验证是否成功?即,如何告诉浏览器是否记住电子邮件/密码组合。

这是表单布局:

<form action="" method="post">
    <fieldset>
        <legend>Sign in</legend>
        <label>
            <span>Email</span>
            <input type="text" name="ay[email]">
        </label>
        <label>
            <span>Password</span>
            <input type="password" name="ay[password]">
        </label>
        <input type="submit" value="Sign in">
    </fieldset>
</form>

该过程中没有涉及JavaScript。

如果您正在执行form提交操作以验证会话,浏览器将询问用户是否要记住username/password组合。此外,浏览器将检查用户添加到浏览器的任何异常情况,如never remembernever remember for the site等。

Q:身份验证是否成功A:设置cookie。第二,你不能强迫浏览器记住组合,你可以设置cookie,在其中你可以使用时间,就像谷歌一样需要多少年:)

大多数解决此问题的尝试都涉及到对登录的浏览器启发进行黑客攻击,这很容易出错,而且很容易过时。因此,我们应该了解浏览器本身对使用其身份验证功能的建议。

遗憾的是,目前还没有跨浏览器标准(即将推出的isLoggedIn API看起来就是这样),但与此同时,我们从Chromium Wiki的创建惊人密码表单:中得到了一些建议

确保表单提交清晰

密码管理员需要一些表格已提交的指示。请确保您的网页在表单上执行以下操作之一提交:

  • 执行到另一页的导航
  • 使用History.pushState或History.replaceState模拟导航,并完全删除密码形式

此外,如果使用执行异步请求XMLHttpRequest或fetch,请确保成功状态为在响应标头中正确设置。

遵循现有惯例

仅仅为了它而与众不同是不值得的。这将导致用户体验的全面下降。例如,这意味着,如果登录失败,就不能导航到单独的网页:这是出乎意料的,会让用户和密码管理器都感到困惑。

由此,我们可以向至少一个浏览器推断以下登录失败的信号:

  • HTTP响应的状态代码是一个错误。

  • 表单提交不会导航到另一个页面(如果您未能成功登录,登录页面可能会重新加载,但至关重要的是,它们保持在同一URL)。

  • 当用户尝试时,表单根本不提交——这可能是因为HTML表单验证阻止了提交,或者JS检查服务器是否接受登录并在表单提交事件中调用.preventDefault。(前者不适用于错误的凭据;仅适用于requiredminlength等基本检查。)

遗憾的是,我可以确认其中一些技术不适用于跨浏览器:例如,Firefox乐观地在表单提交的HTTP响应到达之前显示其"保存凭据"菜单。Mozilla在这个确切的问题上有一个漏洞,但对他们来说,做正确的事情来保持与现有网站的兼容性似乎同样棘手。

更令人痛心的是,来自该错误的复制:

Matthew N.[:MattN]•2年前

我们现在应该仔细检查一下其他浏览器是如何处理这一问题的。我想其他人现在开始在这方面模仿我们了。

最新更新