跳至主要内容

Login

在 ChatGPT 中打开
阴影 dwc-login 24.01
Java API

Login组件通过提供一个现成的登录对话框，简化用户身份验证，带有用户名和密码字段。它包括输入验证、可自定义标签和消息、密码可见性控制，以及对额外自定义字段的支持。

创建 Login 对话框​

通过实例化组件并调用 open() 来创建 Login 对话框以显示它。对话框默认包含用户名和密码字段、输入验证和一个登录按钮。

显示代码

登录提交​

当用户输入用户名和密码时，Login 组件验证这些输入是否为必填字段。一旦验证通过，将触发表单提交事件，传递输入的凭据。为防止多次提交，[Sign in]按钮会立即禁用。

以下是一个基本的 Login 组件示例。如果用户名和密码都设置为 "admin"，登录对话框将关闭，并出现[Logout]按钮。如果凭据不匹配，则显示默认错误消息。

显示代码

禁用 [Sign in] 按钮

默认情况下，Login 在验证登录输入为正确时，立刻禁用 [Sign in] 按钮，以防止多次提交。您可以使用 setEnabled(true) 方法重新启用 [Sign in] 按钮。

允许空密码

您可以通过使用 setEmptyPassword(true) 方法，允许用户仅使用用户名登录。

表单动作 25.10​

Login 组件可以直接将表单数据提交到指定的 URL，而不是通过提交事件处理提交。当设置了动作 URL 时，表单会以标准 POST 请求的方式使用用户名和密码作为表单参数。

Login login = new Login();
login.setAction("/api/auth");

使用 setAction() 时，表单提交绕过 LoginSubmitEvent，而是执行传统的 HTTP POST 请求到指定的端点。用户名和密码作为表单参数发送，分别命名为 "username" 和 "password"。具有名称属性的自定义字段也包括在 POST 请求中。

提示

如果未设置动作 URL，则表单提交通过 LoginSubmitEvent 处理，使您能够在服务器端以编程方式处理凭据。

国际化 (i18n)​

Login 组件中的标题、描述、标签和消息可以通过 LoginI18n 类完全自定义。这种灵活性使您可以根据特定的本地化要求或个性化偏好，调整登录界面。

显示代码

自定义字段​

Login 组件包括几个插槽，允许您根据需要添加额外字段。自定义字段在表单提交时会自动收集，并可以通过提交事件的数据映射进行访问。

以下登录示例添加了一个客户 ID 的自定义字段。这可以帮助您管理在多个用户之间共享内容的公司或部门。

显示代码

名称必填

自定义字段必须使用 setName() 设置名称才能包含在表单提交中。姓名用作从 event.getData() 检索字段值的键。

取消按钮​

Login 组件包含一个默认隐藏的 [Cancel] 按钮。当用户尝试访问受限区域并需要一个选项返回到他们之前的位置而不完成登录时，这尤其有用。

要使取消按钮可见，请为其提供一个标签。您还可以监听取消事件，以适当处理取消。

显示代码

隐藏元素

要隐藏元素，请将其标签设置为空字符串。这允许您在不从代码中移除组件的情况下切换可见性。

密码管理器​

该组件与基于浏览器的密码管理器协同工作，以简化登录过程。在基于 Chromium 的浏览器中，它与 PasswordCredential API 集成，提供：

  • 自动填充：如果用户为该网站保存了凭据，浏览器可能会自动填写用户名和密码字段。
  • 凭据管理：登录后，浏览器可以提示用户保存新凭据，从而使未来的登录更快、更轻松。
  • 凭据选择：如果保存了多个凭据，浏览器可以为用户提供从多个保存的集合中进行选择的选项。

样式​

Loading...