Configuring the Web User Interface (UI)

Objective

After completing this lesson, you will be able to customize the CIAM user experience using the Web UI Builder.

使用 Web UI 构建器定制 CIAM 用户体验

SAP Customer Data Cloud 提供默认的开箱即用屏幕集,用于实施 CIAM 用户体验。

存在以下内容的五个屏幕截图:注册/登录屏幕、首选项/配置文件更新、安全/隐私设置、订阅和密码重置。这些是系统屏幕捕获,用于说明如何使用 UI 构建器定制站点。

Web UI 构建器允许您设计 CIAM 用户体验,例如:

  1. 注册和登录
  2. 首选项和概要更新
  3. 安全和隐私设置
  4. 订阅(精简注册)
  5. 密码重置

您可以使用拖放方法轻松定制缺省屏幕集。您还可以品牌化屏幕集的外观,以使用 CSS 和 JavaScript 无缝匹配公司的品牌。

Web UI 构建器设计器

这是 SAP Customer Data Cloud UI 构建器

SAP Customer Data Cloud 中的 UI 构建器。

ui 构建器允许您以快速简单的方式定制屏幕集。Web UI 构建器的主要功能包括:

  • 拖放编辑功能
  • 优化移动屏幕和响应式设计
  • 适合多种屏幕大小和语言的预览选项
  • 用于处理语言翻译的本地化选项
  • 从 UI 元素到方案属性的直接映射
  • 使用 CSS 编辑器定制 
  • 用于处理屏幕集事件的 JavaScript 参数

注意:也可以使用可选的高级 HTML 定制,但它不是 UI 构建器的一部分。

屏幕模板

这是定制用户界面的第一步。此下拉菜单列出了可用的可定制模板屏幕。您还可以通过选择 +新屏幕选项创建新屏幕

SAP Customer Data Cloud UI 构建器中屏幕下拉菜单的屏幕截图。橙色突出显示框突出显示屏幕下拉菜单和添加新屏幕按钮。

标准控制

此标准控件菜单包含可用于定制所选屏幕模板的各种预配置标准 UI 元素。简单控件通常连接到 SAP Customer Data Cloud 中的 HTML 元素或直接功能。您可以添加文本框、链接、下拉菜单、复选框或按钮,以突出显示一些常用选项。选择标准控制后,您可以拖放到屏幕区域。

从 SAP Customer Data Cloud 的 UI 构建器页面捕获标准控件选项和屏幕。橙色突出显示框指向标准小部件和屏幕。

在标准控件下方,您可以在 Captcha、Widgets、Passkey 和 TFA 部分下找到附加定制项目。

CAPTCHA、小部件、密钥和 TFA 选项的屏幕截图,位于 SAP Customer Data Cloud 中 UI 构建器的左侧菜单。

captcha: CAPTCHA (完全自动化公共图灵测试告诉计算机和人类分离), 是区分人类用户与自动攻击者的最流行的方法之一。SAP Customer Data Cloud 支持将 CAPTCHA 挑战添加到登录和注册屏幕。CAPTCHA 服务可保护您的网站免受自动黑客攻击。

小组件:在每个屏幕集内,小部件起着关键作用。这些小部件可完全自定义,允许您根据特定需求对其进行定制。例如,小部件可以允许客户添加电话号码、连接到社交登录或添加照片。

密码:FIDO 代表最先进的身份验证解决方案,可消除密码需求,缓解网络钓鱼风险。它与移动设备和主流桌面 Web 浏览器兼容。除了单设备凭据外,FIDO 还引入了名为多设备凭据或密钥的新技术。这项创新简化了 FIDO 在各种设备、平台和操作系统的身份验证方法。密钥提供可恢复性,防止设备丢失,并确保无论用户何时何地需要它们,都无需依赖传统口令。

TFA:双因素验证 (TFA) 通过引入附加验证层来增强用户验证流程的安全性。在输入登录和密码凭据后,SAP Customer Data Cloud 会生成唯一代码并通过电子邮件或电话(通过语音消息/SMS)将其发送给用户。用户随后输入此代码以完成验证过程。

属性面板

通过属性面板,可以进一步自定义先前从标准控件和微件菜单中选择的控件或微件。您可以修改字段名称、更改宽度或高度,或使字段成为命名几个选项所需的字段。

UI 构建器右侧属性面板选项的屏幕截图。橙色突出显示框指出各种属性的选项,例如设计器工具内的“屏幕标识”、“行为”、“内部名称”、“标题”、“成功屏幕”、“宽度”和“高度”字段。

向屏幕添加现有字段