Web SDK - PC UI自定义配置说明 - ID Verification

Web SDK - PC支持用户界面样式的自定义。您可以根据需要自定义引导页、证件采集页、OCR结果编辑页以及活体检测页的图标、按钮颜色、背景颜色等样式。

配置方法

根据配置模板，将自定义样式的JSON字符串，通过服务端的Initialize接口中的StyleConfig字段传给阿里云服务端初始化后使用。

不传对应配置则使用默认配置；不传对应配置项的样式则使用默认样式。为了减少初始化请求的大小，建议只传递需要修改的配置，其他配置项保持阿里云默认配置。

说明

JSON字符串中不可含有正则表达式中的特殊字符。

配置模板

JavaScript

const styleConfig = {
  guidePage: {
    step1Icon: "", // 步骤一icon，图片宽*高：200*200
    step2Icon: "", // 步骤二icon，图片宽*高：200*200
    pathIcon: "", // 步骤之间的连接线icon，图片宽高：320*3
    startBtnBgColor: "#FF6A00", // 开始认证按钮背景色，默认：#FF6A00
    startBtnTextColor: "#FFFFFF", // 开始认证按钮文字颜色，默认：#FFFFFF
  },
  ocrPage: {
    backIcon: "", // 返回按钮icon，图片宽*高：24*24
    uploadIcon: "", // 上传icon，图片宽*高：16*16
    uploadTextColor: "#FF6A00", // 上传文字颜色，默认：#FF6A00
    submitBtnBgColor: "#FF6A00", // 提交按钮背景颜色，默认：#FF6A00
    submitBtnTextColor: "#FFFFFF", // 提交按钮文字颜色，默认：#FFFFFF
  },
  alert: {
    top: "45%", // 弹窗距离上边距离，默认：45%
    left: "50%", // 弹窗距离左边距离，默认：50%
    width: "480px", // 弹窗宽，默认：480px
    primaryBtnBgColor: "#FF6A00", // 主按钮背景色，默认：#FF6A00
    primaryBtnTextColor: "#FFFFFF", // 主按钮文字颜色，默认：#FFFFFF
    btnBgColor: "#FFFFFF", // 次要按钮背景色，默认：#FFFFFF
    btnBgTextColor: "#FF6A00", // 次要按钮文字颜色，默认：#FF6A00
    btnBorder: "1px solid #FF6A00", // 次要按钮边框样式，默认：1px solid #FF6A00
  }
};

JSON

{
  "guidePage": {
    "step1Icon": "",
    "step2Icon": "",
    "pathIcon": "",
    "startBtnBgColor": "#FF6A00",
    "startBtnTextColor": "#FFFFFF"
  },
  "ocrPage": {
    "backIcon": "",
    "uploadIcon": "",
    "uploadTextColor": "#FF6A00",
    "submitBtnBgColor": "#FF6A00",
    "submitBtnTextColor": "#FFFFFF"
  },
  "alert": {
    "top": "45%",
    "left": "50%",
    "width": "480px",
    "primaryBtnBgColor": "#FF6A00",
    "primaryBtnTextColor": "#FFFFFF",
    "btnBgColor": "#FFFFFF",
    "btnBgTextColor": "#FF6A00",
    "btnBorder": "1px solid #FF6A00"
  }
}

配置项说明

自定义页面的颜色设置：SDK支持客户传入不同UI组件颜色的色值，以实现颜色的替换。
自定义icon：指SDK支持客户传入不同icon或图片资源，以实现效果替换。icon大小和位置不变。
自定义框样式：指SDK支持客户传入不同资源文件，以实现效果替换。框大小和位置不变。

模块页面	元素	说明	配置项	配置项说明
引导页	示例图	支持客户替换示例图	`"guidePage": { "step1Icon": "", "step2Icon": "", "pathIcon": "" }`	互联网可访问的图片地址。 step1Icon、step2Icon：eKYC引导页步骤一、二图标，大小：`200x200`。 pathIcon: 步骤之间的连接线icon, 大小：`320x3`。
	按键背景颜色/按键字体颜色	无	`"guidePage": { "startBtnBgColor": "#FF6A00", "startBtnTextColor": "#FFFFFF" }`	startBtnBgColor：开始按钮背景颜色值。 startBtnTextColor：开始按钮文字颜色值。
	按键背景颜色/按键字体颜色	无
证件采集页	返回按钮icon/上传图片icon	无	`"ocrPage": { "backIcon": "", "uploadIcon": "" }`	互联网可访问的图片地址。 backIcon: 返回按钮图片，大小：`2424`。 uploadIcon: 上传图片icon，大小：`1616`。
	上传文字样式	无	`"ocrPage": { "uploadTextColor": "#FF6A00" }`	上传文字颜色，默认：`#FF6A00`。
	提交按钮样式	无	`"ocrPage": { "submitBtnBgColor": "#FF6A00", "submitBtnTextColor": "#FFFFFF" }`	submitBtnBgColor：提交按钮背景颜色，默认：`#FF6A00`。 submitBtnTextColor：提交按钮文字颜色，默认：`#FFFFFF`。
弹窗样式定制	上边距离	无	`"alert": { "top": "45%" }`	弹窗距离上边距离，默认：`45%`。
	左边距离	无	`"alert": { "left": "50%" }`	弹窗距离左边距离，默认：`50%`。
	宽度	无	`"alert": { "width": "480px" }`	弹窗宽，默认：`480px`。
	主按钮样式：背景色文字颜色	无	`"alert": { "primaryBtnBgColor": "#FF6A00", "primaryBtnTextColor": "#FFFFFF" }`	primaryBtnBgColor：主按钮背景色，默认：`#FF6A00`。 primaryBtnTextColor：主按钮文字颜色，默认：`#FFFFFF`。
	次要按钮样式：背景色文字颜色边框样式	无	`"alert": { "btnBgColor": "#FFFFFF", "btnBgTextColor": "#FF6A00", "btnBorder": "1px solid #FF6A00" }`	btnBgColor：次要按钮背景色，默认：`#FFFFFF`。 btnBgTextColor：次要按钮文字颜色，默认：`#FF6A00`。 btnBorder：次要按钮边框样式，默认：`1px solid #FF6A00`。