使用 Web 组件在登录页面中保存凭据

Posted 2023-02-21

【中文标题】使用 Web 组件在登录页面中保存凭据

【英文标题】：Save credential in login page with web component

【发布时间】：2021-08-12 23:00:28

【问题描述】：

我正在尝试使用用户名和密码输入以及登录按钮构建一个简单的登录页面，但不同之处在于我的输入和按钮是 Web 组件（我们使用的是jb-input）。

当用户登录并将用户重定向到他/她的仪表板时，chrome 和 Firefox 不会要求保存凭据，这可能是因为我们使用影子 DOM 和浏览器的 Web 组件无法检测到带有用户名的输入元素和密码名称属性。 我怎样才能让它工作并让 chrome 和 Firefox 或任何其他密码管理器检测成功登录并保存用户凭据？

【参考方案1】：

不要使用 shadowDOM，因此 Browser Tab 可以访问所有 DOM 元素。

或者如果你确实需要shadowDOM，添加隐藏在DOM中的非shadowDOM输入，你的代码在Web组件可以读取。

shadowDOM 对密码管理员来说是密封的盒子，他们不能（或者说不会）访问。 与使用 <iframe> 作为密码表单没有什么不同。

也许有一天他们会潜入openshadowRoots

【参考方案2】：

正如 Danny 所提到的，您的输入 Web 组件必须可从“文档”层访问（很可能通过避免 shadowDOM）。

您可以看到a live working example 基于Polymer here（演示的用户名和密码均为：'admin'）构建的登录表单的a live working example，其中输入字段可通过浏览器密码访问经理。 source code of this example中也提到了：

组件必须可从document 层访问，以允许密码管理器正确处理表单值。

该组件没有 shadowRoot，因此 <form> 和输入字段可以在全局范围内设置样式。

也可以通过使用Polymer 的功能丰富的元素（如dom-bind 或dom-if）找到解决此问题的方法，因为它们允许在主文档。

【讨论】：

请注意，Google 偏离了 Polymer，现在正在开发 Lit（它的 Polymer“框架”样式功能较少）