使用Harmony SDK自定义UI颜色图标与文案-实人认证-阿里云

金融级实人认证服务Harmony SDK提供自定义UI颜色、icon图标和UI文案的接口，开发者可以通过调用setCustomUI或setCustomTxtConfig接口进行自定义。本文为您介绍UI自定义接口说明以及相关的代码示例。

重要

部分自定义配置可能需要依赖SDK升级，建议您在使用之前将SDK升级至最新版本。

页面 UI 颜色和 ICON 自定义

目前支持自定义引导页、活体认证页及OCR页面的字体颜色以及图标。

接口说明

Harmony SDK中提供了自定义UI的接口：setCustomUIConfig。

/**
 * UI自定义
 * @param config json文本
 * @return 配置文件检测出的异常信息
 */
  public static setCustomUIConfig(config:string) : string {
      ......
  }

参数说明：config 传入UI颜色配置 JSON 字符串。
返回值：当 SDK 对 config 参数内容解析的时候遇到错误或者异常信息时会通过提示信息的方式返回，当您在配置参数无效时，请重点关注此值信息。

调用示例

ZimFacadeExt.setCustomUIConfig('{"guideConfig":{}, "faceConfig":{}, "docConfig":{}}');

UI颜色配置

{
  "guideConfig": {
    "titleCloseBase64":"",
    "titleBackBase64":"",
    "dialogExitTitleColor": "#000000",
    "dialogExitMsgColor": "#000000",
    "dialogExitCancelColor": "#0E83E6",
    "dialogExitConfirmColor": "#0E83E6",
    "dialogNetworkFailedTitleColor": "#000000",
    "dialogNetworkFailedMsgColor": "#000000",
    "dialogNetworkFailedConfirmColor": "#0E83E6"
  },
  "faceConfig": {
    "faceBgColor": "#FFFFFF",
    "faceTitleColor": "#000000",
    "faceProgressStartColor": "#dfe6eb",
    "faceProgressEndColor": "#FF6A00",
    "circleTxtBgAlpha": "0.25",
    "circleTxtColor": "#ffffff",
    "exitIconBase64": "",
    "submitTextColor": "#E4E4E4",
    "submitLoadingIconBase64": "",
    "dialogPermissionFailedTitleColor": "#000000",
    "dialogPermissionFailedMsgColor": "#000000",
    "dialogPermissionFailedConfirmColor": "#0E83E6",
    "dialogExitTitleColor": "#000000",
    "dialogExitMsgColor": "#000000",
    "dialogExitCancelColor": "#0E83E6",
    "dialogExitConfirmColor": "#0E83E6",
    "dialogTimeOutTitleColor": "#000000",
    "dialogTimeOutMsgColor": "#000000",
    "dialogTimeOutConfirmColor": "#0E83E6",
    "dialogNetworkFailedTitleColor": "#000000",
    "dialogNetworkFailedMsgColor": "#000000",
    "dialogNetworkFailedConfirmColor": "#0E83E6",
    "dialogSDKErrTitleColor": "#000000",
    "dialogSDKErrMsgColor": "#000000",
    "dialogSDKErrConfirmColor": "#0E83E6",
    "dialogTooManyRetriesTitleColor": "#000000",
    "dialogTooManyRetriesMsgColor": "#000000",
    "dialogTooManyRetriesConfirmColor": "#0E83E6",
    "dialogCamOpenFailedTitleColor": "#000000",
    "dialogCamOpenFailedMsgColor": "#000000",
    "dialogCamOpenFailedConfirmColor": "#0E83E6"
  },
  "docConfig": {
    "infoPageBgColor": "#FFFFFF",
    "infoDividerColor": "#F6F6F6",
    "exitIconBase64": "",
    "stageSelectedBgBase64": "",
    "stageDefaultBgBase64": "",
    "stageDoneBgBase64": "",
    "stageLineDefaultColor": "#D8D8D8",
    "stageLineSelectedColor": "#1296db",
    "stageSelectedTxtColor": "#000000",
    "stageDefaultTxtColor": "#888888",
    "infoTipsColor": "#000000",
    "bottomTipsColor": "#888888",
    "takeRequestColor": "#1296db",
    "takeRequestTitleColor": "#FFFFFF",
    "takeRequestExitIconBase64": "",
    "takeRequestImgBase64": "",
    "takeEnterIconBase64": "",
    "frontDefaultImgBase64": "",
    "backDefaultImgBase64": "",
    "infoNoticeIconBase64": "",
    "infoNoticeBgColor": "#1F1296db",
    "infoNoticeTxtColor": "#1296db",
    "infoCertNameColor": "#000000",
    "infoCertNoColor": "#000000",
    "resultCertNameColor": "#000000",
    "resultCertNoColor": "#000000",
    "infoHintColor": "#E5484D",
    "cleanIconBase64": "",
    "nextBgColor": "#1296db",
    "nextTxtColor": "#FFFFFF",
    "dialogIdentifyFailTitleColor": "#000000",
    "dialogIdentifyFailExitIconBase64": "",
    "dialogIdentifyFailTxtColor": "#000000",
    "dialogIdentifyFailHintColor": "#888888",
    "dialogIdentifyFailConfirmColor": "#1296db",
    "dialogNetworkErrTitleColor": "#000000",
    "dialogNetworkErrMsgColor": "#000000",
    "dialogNetworkErrConfirmColor": "#0E83E6",
    "dialogNetworkErrCancelColor": "#0E83E6",
    "dialogExitTitleColor": "#000000",
    "dialogExitMsgColor": "#000000",
    "dialogExitConfirmColor": "#0E83E6",
    "dialogExitCancelColor": "#0E83E6",
    "dialogFailTooManyTitleColor": "#000000",
    "dialogFailTooManyMsgColor": "#000000",
    "dialogFailTooManyConfirmColor": "#0E83E6",
    "dialogNoPermissionTitleColor": "#000000",
    "dialogNoPermissionMsgColor": "#000000",
    "dialogNoPermissionCancelColor": "#0E83E6",
    "takePhotoExitIconBase64": "",
    "flashOnIconBase64": "",
    "flashOffIconBase64": "",
    "takePhotoIconBase64": "",
    "photoRetakeIconBase64": "",
    "photoConfirmIconBase64": "",
    "livenessTipsColor": "#000000",
    "livenessMsgColor": "#555555",
    "livenessImgBase64": "",
    "livenessLoadingImgBase64": "",
    "livenessLoadingMsgColor": "#FFFFFF",
    "livenessLoadingBgColor": "#000000",
    "chooseTakePhotoColor": "#040405",
    "chooseFromAlbumColor": "#040405",
    "chooseCancelColor": "73040405",
    "ocrActionSheetMaskColor": "80000000"
  }
}

UI颜色配置字段详细说明

模块	key	截图	补充说明
引导页 guideConfig	titleBackBase64		返回icon的base64 例如：“data:image/jpeg;base64,/9j..”
	titleCloseBase64		退出icon的base64 例如：“data:image/jpeg;base64,/9j..”
	dialogNetworkFailedTitleColor		网络异常弹框配色
	dialogNetworkFailedMsgColor
	dialogNetworkFailedConfirmColor
	dialogExitTitleColor		退出弹窗配色
	dialogExitMsgColor
	dialogExitCancelColor
	dialogExitConfirmColor
活体页 faceConfig	faceBgColor		刷脸页背景色
	faceTitleColor		刷脸页标题字体颜色
	faceProgressStartColor		取景框（环形进度条）颜色起始色值
	faceProgressEndColor		取景框（环形进度条）颜色终止色值
	circleTxtBgAlpha		蒙层不透明度取值范围：（0，1）
	circleTxtColor		蒙层上方文案颜色
	exitIconBase64		退出icon的base64 例如：“data:image/jpeg;base64,/9j..”
	submitTextColor		认证提交loading提示文案字体颜色
	submitLoadingIconBase64		loading的base64 例如：“data:image/jpeg;base64,/9j..”
	dialogPermissionFailedTitleColor		权限拒绝弹框配色
	dialogPermissionFailedMsgColor
	dialogPermissionFailedConfirmColor
	dialogExitTitleColor		退出弹框配色
	dialogExitMsgColor
	dialogExitCancelColor
	dialogExitConfirmColor
	dialogTimeOutTitleColor		操作超时弹框配色
	dialogTimeOutMsgColor
	dialogTimeOutConfirmColor
	dialogNetworkFailedTitleColor		网络异常弹窗配色
	dialogNetworkFailedMsgColor
	dialogNetworkFailedConfirmColor
	dialogSDKErrTitleColor		操作失败弹窗配色
	dialogSDKErrMsgColor
	dialogSDKErrConfirmColor
	dialogTooManyRetriesTitleColor		重试过多弹框配色
	dialogTooManyRetriesMsgColor
	dialogTooManyRetriesConfirmColor
	dialogCamOpenFailedTitleColor		摄像头打开异常弹窗配色
	dialogCamOpenFailedMsgColor
	dialogCamOpenFailedConfirmColor
OCR 页面 docConfig	infoPageBgColor		ocr 识别信息页背景色
	infoDividerColor		分隔条颜色
	exitIconBase64		关闭按钮 base64 格式
	stageSelectedBgBase64		进度条节点选中背景图片 base64 格式
	stageDefaultBgBase64		进度条节点默认背景图片 base64 格式
	stageDoneBgBase64		进度条完成节点背景图片 base64 格式
	stageLineDefaultColor		进度条横线默认颜色
	stageLineSelectedColor		进度条横线颜色
	stageSelectedTxtColor		进度条文字选中状态颜色
	stageDefaultTxtColor		进度条文字默认状态颜色
	infoTipsColor		图片显示框上方提示文案颜色
	bottomTipsColor		图片显示框下方提示文案颜色
	takeRequestColor		“拍摄要求”文字颜色
	takeRequestTitleColor		“拍摄要求”弹框标题颜色
	takeRequestExitIconBase64		拍摄要求弹框关闭按钮图片 base64 格式
	takeRequestImgBase64		摄要求图片路径 base64 格式
	takeEnterIconBase64		拍摄图标 base64 格式
	frontDefaultImgBase64		身份证人像面默认图片 base64 格式
	backDefaultImgBase64		身份证国徽面默认图片 base64 格式
	infoNoticeIconBase64		识别信息确认提示 base64 格式
	infoNoticeBgColor		“识别信息确认提示”背景色
	infoNoticeTxtColor		“识别信息确认提示”文字颜色
	infoCertNameColor		识别结果“姓名”颜色
	infoCertNoColor		识别结果“身份证号”颜色
	resultCertNameColor		识别出的姓名的颜色
	resultCertNoColor		识别出的身份证号颜色
	infoHintColor		姓名/身份证号未填写提示颜色
	cleanIconBase64		信息删除图标 base64 格式
	nextBgColor		页面底部按钮背景色
	nextTxtColor		页面底部按钮文案色


	dialogIdentifyFailTitleColor		识别失败弹框 title 颜色
	dialogIdentifyFailTitleColor		识别失败弹框 title 颜色
	dialogIdentifyFailExitIconBase64		“识别失败”弹框关闭按钮图标 base64 格式
	dialogIdentifyFailImgBase64		“识别失败”弹框图片 base64 格式
	dialogIdentifyFailImgBase64		“识别失败”弹框图片 base64 格式
	dialogIdentifyFailTxtColor		“识别失败”弹框中“证件图像未符合要求”文字颜色
	dialogIdentifyFailHintColor		“识别失败”弹框中“请按要求拍摄...”文字颜色
	dialogIdentifyFailConfirmColor		“识别失败”弹框,"重新拍摄"按钮文字颜色
	dialogNetworkErrTitleColor		"网络异常"弹框配色
	dialogNetworkErrMsgColor		"网络异常"弹框配色
	dialogNetworkErrConfirmColor
	dialogNetworkErrCancelColor
	dialogExitTitleColor		“退出”弹框配色
	dialogExitMsgColor
	dialogExitConfirmColor
	dialogExitCancelColor
	dialogFailTooManyTitleColor		“识别失败次数过多”弹框配色
	dialogFailTooManyMsgColor
	dialogFailTooManyConfirmColor
	dialogNoPermissionTitleColor		“摄像头权限引导弹框”配色
	dialogNoPermissionMsgColor
	dialogNoPermissionCancelColor
	dialogNoPermissionToSureColor
	livenessTipsColor		“跳转活体认证”页标题颜色
	livenessMsgColor		“跳转活体认证”页提示颜色
	livenessImgBase64		“跳转活体认证”页图片 base64 格式
	livenessImgBase64		“跳转活体认证”页图片 base64 格式
	livenessLoadingImgBase64		“跳转活体认证”页 loading 图片 base64 格式
	livenessLoadingImgBase64		“跳转活体认证”页 loading 图片 base64 格式
	livenessLoadingMsgColor		“跳转活体认证”页 loading 文字颜色
	livenessLoadingBgColor		“跳转活体认证”页 loading 背景颜色
	takePhotoExitIconBase64		关闭拍照页按钮图标 base64 格式
	takePhotoExitIconBase64		关闭拍照页按钮图标 base64 格式
flashOnIconBase64		闪光灯打开状态图标 base64 格式


flashOffIconBase64		闪光灯关闭状态图标 base64 格式
takeTipsColor		拍照提示文案颜色
takeTipsColor		拍照提示文案颜色
takePhotoIconBase64		“拍摄”按钮图 base64 格式
takePhotoIconBase64		“拍摄”按钮图 base64 格式
photoRetakeIconBase64		“重新拍摄”按钮图标 base64 格式
photoRetakeIconBase64		“重新拍摄”按钮图标 base64 格式
photoConfirmIconBase64		“确认图片”图标路径 base64 格式



chooseTakePhotoColor		图片来源弹框“拍照”字体颜色
chooseFromAlbumColor		图片来源弹框“从相册中选择”字体颜色
chooseCancelColor		图片来源弹框“取消”字体颜色
ocrActionSheetMaskColor		弹窗遮罩的颜色

文案自定义

目前支持引导页、活体认证页及OCR页面展示文案自定义。

接口说明

Harmony SDK 中提供了自定义文案的接口：setCustomTxtConfig。

  /**
   * 文案自定义
   * @param config json文本
   * @return 设置结果，空字符串表示正常，失败的参考返回错误信息
   */
  public static setCustomTxtConfig(config:string) : string {
    ......
  }

参数说明：config 传入文案配置JSON 字符串。
返回值：当 SDK 对 config 内容解析的时候遇到错误或者异常信息时会通过提示信息的方式返回，当您在配置参数无效时，请重点关注此值信息。

调用示例

ZimFacadeExt.setCustomTxtConfig('{"guideConfig":{},"faceConfig":{},"docConfig":{}}');

文案配置

{
  "guideConfig": {
    "dialogExitTitle": "确定退出吗?",
    "dialogExitMsg": "露个脸就能通过",
    "dialogExitConfirm": "确定",
    "dialogExitCancel": "取消",
    "dialogNetworkFailedTitle": "网络不给力",
    "dialogNetworkFailedMsg": "请检查网络",
    "dialogNetworkFailedConfirm": "确定"
  },
  "faceConfig": {
    "faceNotFound": "没有检测到脸",
    "faceTooFar": "靠近一点",
    "faceTooClose": "离远一点",
    "faceNotIn": "把脸移入圈内",
    "badPitch": "请正对手机",
    "badYaw": "请正对手机",
    "faceTooMore": "请保持单人操作",
    "faceIsMoving": "再清晰一点",
    "faceBrightless": "脸部亮一点",
    "faceBadQuality": "请露出正脸",
    "eyesOnScreen": "请注视屏幕",
    "blink": "眨眨眼",
    "leftYaw": "向左摇头",
    "rightYaw": "向右摇头",
    "stackTime": "请保持不动",
    "isBlur": "再清晰一点",
    "faceInitTxt": "请正对屏幕",
    "faceTitleBlink": "拿起手机，眨眨眼",
    "leftYawLiveness": "拿起手机，向左摇头",
    "rightYawLiveness": "拿起手机，向右摇头",
    "photinusCommTips": "请把脸移入圈内保持不动",
    "processing": "正在处理",
    "dialogExitTitle": "确定退出吗?",
    "dialogExitMsg": "露个脸就能通过",
    "dialogExitConfirm": "确定",
    "dialogExitCancel": "取消",
    "dialogCamOpenFailedTitle": "摄像头打开异常",
    "dialogCamOpenFailedMsg": "请重启app或手机后再次尝试",
    "dialogCamOpenFailedConfirm": "确定",
    "dialogCamOpenFailedCancel": "取消",
    "dialogTooManyRetriesTitle": "本次操作失败",
    "dialogTooManyRetriesMsg": "刷脸失败次数过多，请稍后再试",
    "dialogTooManyRetriesConfirm": "我知道了",
    "dialogTimeOutTitle": "操作超时",
    "dialogTimeOutMsg": "正对手机，更容易成功",
    "dialogTimeOutConfirm": "再试一次",
    "dialogNetworkFailedTitle": "网络不给力",
    "dialogNetworkFailedMsg": "请检查网络",
    "dialogNetworkFailedConfirm": "确定",
    "dialogSDKErrTitle": "本次操作失败",
    "dialogSDKErrMsg": "抱歉，系统出错了，请再试一次",
    "dialogSDKErrConfirm": "确定"
  },
  "docConfig": {
    "stageFrontTips": "人像面",
    "stageBackTips": "国徽面",
    "stageLivenessTips": "实人认证",
    "frontInfoTips": "拍摄人像面",
    "frontInfoBottomTips": "证件人像面",
    "backInfoBottomTips": "证件国徽面",
    "backInfoTips": "拍摄国徽面",
    "takeRequireTxt": "拍摄要求",
    "takeRequireTitle": "拍摄要求",
    "resultCheckTips": "请确认以下身份信息，如有误请点击修改",
    "certNameTitle": "姓名",
    "certNameHint": "请输入姓名",
    "certNoTitle": "身份证号",
    "certNoHint": "请输入身份证号",
    "nextTxt": "下一步",
    "confirmTxt": "确认身份信息无误",
    "livenessTips": "实人认证",
    "livenessMsg": "拍摄您本人人脸，请确保正对手机，光线充足",
    "livenessLoadingMsg": "即将进入刷脸页...",
    "dialogIdentityFailTitle": "识别失败",
    "dialogIdentityFailRequireTitle": "证件图像未符合要求",
    "dialogIdentityFailRequireMsg": "请按要求拍摄本人有效身份证",
    "dialogIdentityFailRetry": "重新拍摄",
    "dialogNetworkTimeOutTitle": "识别超时",
    "dialogNetworkTimeOutMsg": "网络连接超时，请重新识别",
    "dialogNetworkTimeOutConfirm": "重新识别",
    "dialogNetworkTimeOutCancel": "退出",
    "identityLoadingMsg": "识别中",
    "dialogExitTitle": "确定退出吗？",
    "dialogExitMsg": "拍张照就能通过",
    "dialogExitCancel": "取消",
    "dialogExitConfirm": "确定",
    "dialogTooManyRetriesTitle": "识别失败次数过多",
    "dialogTooManyRetriesMsg": "请退出后重试",
    "dialogTooManyRetriesConfirm": "退出",
    "dialogNoPermissionTitle": "温馨提示",
    "dialogNoPermissionMsg": "请打开摄像头权限",
    "dialogNoPermissionCancel": "取消",
    "dialogNoPermissionToSet": "去设置",
    "takeFrontTips": "拍摄身份证人像面",
    "takeBackTips": "拍摄身份证国徽面"
  }
}

文案配置字段详细说明

模块	key	截图	补充说明
引导页 guideConfig	dialogExitTitle		手动退出弹框文案说明手动点击“X”（退出）或“暂不认证”时弹出。
	dialogExitMsg
	dialogExitConfirm
	dialogExitCancel
	dialogNetworkFailedTitle		网络异常弹框文案
	dialogNetworkFailedMsg
	dialogNetworkFailedConfirm
活体页 faceConfig	faceTitleBlink		刷脸页标题文案
	leftYawLiveness
	rightYawLiveness
	photinusCommTips
	faceNotFound		取景框内提示文案
	faceTooFar
	faceTooClose
	faceNotIn
	badPitch
	badYaw
	faceTooMore
	faceIsMoving
	faceBrightless
	faceBadQuality
	eyesOnScreen
	blink
	leftYaw
	rightYaw
	stackTime
	isBlur
	faceInitTxt
	processing		认证提交时loading文案
	dialogTooManyRetriesTitle		重试次数过多弹窗文案
	dialogTooManyRetriesMsg
	dialogTooManyRetriesConfirm
	dialogCamOpenFailedTitle		摄像头打开异常弹窗文案
	dialogCamOpenFailedMsg
	dialogCamOpenFailedConfirm
	dialogSDKErrTitle		操作失败弹窗文案
	dialogSDKErrMsg
	dialogSDKErrConfirm
	dialogNetworkFailedTitle		网络异常弹窗文案
	dialogNetworkFailedMsg
	dialogNetworkFailedConfirm
	dialogExitTitle		手动退出弹窗文案
	dialogExitMsg
	dialogExitConfirm
	dialogExitCancel
	dialogTimeOutTitle		操作超时弹窗文案
	dialogTimeOutMsg
	dialogTimeOutConfirm
OCR页面 docConfig	stageFrontTips
	stageBackTips
	stageLivenessTips
	frontInfoTips
	frontInfoBottomTips
	backInfoBottomTips
	backInfoTips
	takeRequireTxt
	takeRequireTitle
	resultCheckTips
	certNameTitle
	certNoTitle
	certNameHint
	certNoHint
	invalidCertName
	invalidCertNo
	nextTxt
	confirmTxt
	livenessTips
	livenessMsg
	livenessLoadingMsg
	dialogIdentityFailTitle
	dialogIdentityFailRequireTitle
	dialogIdentityFailRequireMsg
	dialogIdentityFailRetry
	dialogNetworkTimeOutTitle
	dialogNetworkTimeOutMsg
	dialogNetworkTimeOutConfirm
	dialogNetworkTimeOutCancel
	identityLoadingMsg
	dialogExitTitle
	dialogExitMsg
	dialogExitConfirm
	dialogExitCancel
	dialogTooManyRetriesTitle
	dialogTooManyRetriesMsg
	dialogTooManyRetriesConfirm
	dialogNoPermissionTitle
	dialogNoPermissionMsg
	dialogNoPermissionCancel
	dialogNoPermissionToSet
	takeFrontTips
	takeBackTips