---
order: 50
navTitle: 登录
---
# SuperPage交互-登录

使用**登录**交互，可以通过低代码方式在页面中搭建登录界面，其功能与系统自带的[登录](../../../../dev/references/web-api/auth/signin.md)功能逻辑一致。如在SuperPage页面中点击登录按钮，即可弹出登录对话框进行登录操作：

![登录](./images/login1.gif)

示例地址：[登录](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E7%99%BB%E5%BD%95)

## 使用登录{#start}

使用**登录**交互，一般需要配合[文本输入](../../components/input/textinput.md)、[密码输入](../../components/input/passwordinput.md)、[按钮](../../components/common/button.md)、[文本](../../components/common/text.md)等组件使用，使用文本输入组件来输入用户信息；使用密码输入组件来输入密码信息。然后在登录交互中获取该输入信息，与数据库中存储的信息进行比对，一致就能登录成功。具体操作步骤如下：

![操作步骤](./images/login.gif)

1. **添加组件：** 在页面中添加`用户名`文本输入组件、`密码`输入组件以及`确定`按钮
2. **添加交互并设置属性：**
   1. 选中`确定`按钮，添加**登录**交互
   2. 在交互中，**用户名**设置为`=[用户名：].[值]`，**密码**设置为`=[密码].[值]`即可，更多设置可查看[登录设置](#setting)

## 登录设置{#setting}

在登录交互中，需要获取用户输入的用户名、密码等信息，与数据库中的数据进行匹配。同时也可以根据需求进行其他属性设置，具体如下：

- **用户名**：必填项，获取用户输入的用户名信息，如`=[用户名：].[值]`
- **密码**：必填项，获取用户输入的密码信息，如`=[密码].[值]`
- **验证码**：获取用户输入的验证码信息，如`=[验证码].[值]`。验证码由后端自动生成以图片形式显示，根据用户的输入自动在服务层校验。使用该值主要防止恶意软件随意登录
- **用户类型**：包括**系统用户**、**外部用户**两种，当为系统用户时，自动与`/sysdata/data/tables/sec/USERS.tbl`模型表中的数据进行匹配；当为外部用户时，自动与`/sysdata/data/tables/sec/EXTERNAL_USERS.tbl`模型表中的数据进行匹配。默认为系统用户
- **登录成功后刷新页面**：登录成功后立即刷新页面
- **成功后关闭对话框**：当登录操作是在一个对话框中操作时，登录成功后可关闭该对话框
- **将错误信息显示在指定位置**：勾选后，会弹出**目标组件**，该下拉框中只能选择文本组件，并将错误信息`用户名或密码错误`显示在选中的文本组件中