Dify 工作流实战：快速搭建 Web 登录界面

在开发 AI 应用时，我们常遇到一个痛点：Dify 原生工作流虽然逻辑强大，但缺乏用户交互界面。如果仅靠自然语言对话来处理身份验证，用户体验往往不够直观。用户需要清晰的输入框来填写账号密码，系统也需要可靠的验证机制。通过 Dify 的模板转换节点（Template Transform），我们可以渲染 HTML 表单，将聊天窗口升级为具备专业认证能力的 Web 应用。

核心思路：HTML 表单与 JSON 解析

Dify 的模板转换节点支持渲染 HTML 代码。关键在于利用 data-format="json" 属性，让前端表单提交的数据自动转换为后端可处理的 JSON 格式。这样，后续的 Python 代码节点就能直接解析用户输入，无需复杂的字符串处理。

1. 设计登录表单模板

在工作流中添加模板转换节点，编写如下 HTML 结构。这里包含了用户名、密码输入框及登录按钮。

<form data-format="json">
  <label for="username">用户名：</label>
  <input type="text" name="username" />
  <label for="password">密码：</label>
  <input type="password" name="password" />
  <button>登录</button>
</form>

注意 data-format="json" 属性，这是数据流转的关键。它确保了用户点击登录后，输入内容会被封装成标准的 JSON 对象传递给下一个节点。

2. 配置验证逻辑

接下来添加代码节点处理验证。实际项目中，这里的逻辑应替换为企业内部的 API 调用，但在原型阶段，我们可以使用硬编码模拟。

def main(input_string):
    # 解析前端传来的 JSON 数据
    import json
    try:
        data = json.loads(input_string)
        username = data.get('username')
        password = data.get('password')
        
        # 模拟验证逻辑
        if username == "svcvit" and password == "123456":
            return {"is_login": 1, "user_token": "user_token_test", "role": "admin"}
        else:
            return {"is_login": 0, "user_token": "", "error_msg": "账号或密码错误"}
    except Exception as e:
        return {"is_login": 0, "error_msg": "请求格式错误"}

这里增加了异常捕获和默认值获取，防止因前端传参缺失导致流程中断。返回的字典中包含了登录状态、令牌以及可选的错误信息。

3. 流程控制与会话管理

验证结果出来后，需要使用条件分支节点（If-Else）分流：

登录成功：将 user_token 存入会话变量（Session Variable），并在后续对话中识别用户身份。
登录失败：直接输出错误提示，不进入业务逻辑。

对于会话状态，建议在登录成功后立即设置全局变量，例如 session.user_token。这样在同一个会话周期内，无论切换到哪个节点，系统都能读取到当前用户的登录凭证，实现跨节点的权限校验。

常见问题排查

在实际落地过程中，可能会遇到以下几个典型问题：

表单提交无响应：检查 HTML 表单是否包含 data-format="json"，并确保代码节点接收的是字符串类型的 JSON 而非原始对象。
登录状态丢失：确认会话变量的作用域设置正确。Dify 的会话变量通常绑定在当前对话 ID 下，若需持久化存储，建议结合外部数据库。
图片显示异常：若登录页包含 Logo 等图片，需确保 URL 可公开访问，避免跨域限制导致加载失败。

进阶扩展

当基础登录功能跑通后，可以进一步丰富应用场景：

集成第三方认证：修改代码节点，对接 OAuth 2.0 或 LDAP 服务，实现单点登录（SSO）。
多角色权限控制：在验证逻辑中增加角色字段（如 role），根据角色动态展示不同的工作流分支，实现细粒度的权限隔离。
优化交互体验：虽然 Dify 不支持自定义 CSS 样式表，但可以通过调整 HTML 标签的属性（如 style 内联样式）来微调按钮大小和颜色，提升视觉一致性。

总结

利用 Dify 工作流构建 Web 交互界面，本质上是利用其强大的编排能力弥补原生 UI 的不足。不需要复杂的前端框架知识，只需理解节点间的连接逻辑和数据流转，就能快速搭建出企业级的用户认证系统。这种方法特别适合内部工具的原型开发和现有系统的轻量级集成。随着平台功能的迭代，未来会有更多 UI 组件可用，让 AI 应用更加人性化。