Harmony SDK UI 自定义配置说明

金融级实人认证服务Harmony SDK提供自定义UI颜色、icon图标和UI文案的接口,开发者可以通过调用setCustomUIsetCustomTxtConfig接口进行自定义。本文为您介绍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

image.png

返回iconbase64

例如:“data:image/jpeg;base64,/9j..”

titleCloseBase64

image.png

退出iconbase64

例如:“data:image/jpeg;base64,/9j..”

dialogNetworkFailedTitleColor

image.png

网络异常弹框配色

dialogNetworkFailedMsgColor

dialogNetworkFailedConfirmColor

dialogExitTitleColor

image.png

退出弹窗配色

dialogExitMsgColor

dialogExitCancelColor

dialogExitConfirmColor

活体页

faceConfig

faceBgColor

image.png

刷脸页背景色

faceTitleColor

image.png

刷脸页标题字体颜色

faceProgressStartColor

image.png

取景框(环形进度条)颜色起始色值

faceProgressEndColor

image.png

取景框(环形进度条)颜色终止色值

circleTxtBgAlpha

image.png

蒙层不透明度

取值范围:(0,1)

circleTxtColor

image.png

蒙层上方文案颜色

exitIconBase64

image.png

退出iconbase64

例如:“data:image/jpeg;base64,/9j..”

submitTextColor

image.png

认证提交loading提示文案字体颜色

submitLoadingIconBase64

image.png

loadingbase64

例如:“data:image/jpeg;base64,/9j..”

dialogPermissionFailedTitleColor

image.png

权限拒绝弹框配色

dialogPermissionFailedMsgColor

dialogPermissionFailedConfirmColor

dialogExitTitleColor

image.png

退出弹框配色

dialogExitMsgColor

dialogExitCancelColor

dialogExitConfirmColor

dialogTimeOutTitleColor

image.png

操作超时弹框配色

dialogTimeOutMsgColor

dialogTimeOutConfirmColor

dialogNetworkFailedTitleColor

image.png

网络异常弹窗配色

dialogNetworkFailedMsgColor

dialogNetworkFailedConfirmColor

dialogSDKErrTitleColor

image.png

操作失败弹窗配色

dialogSDKErrMsgColor

dialogSDKErrConfirmColor

dialogTooManyRetriesTitleColor

image.png

重试过多弹框配色

dialogTooManyRetriesMsgColor

dialogTooManyRetriesConfirmColor

dialogCamOpenFailedTitleColor

image.png

摄像头打开异常弹窗配色

dialogCamOpenFailedMsgColor

dialogCamOpenFailedConfirmColor

OCR 页面

docConfig

infoPageBgColor

image.png

ocr 识别信息页背景色

infoDividerColor

image.png

分隔条颜色

exitIconBase64

image.png

关闭按钮 base64 格式

stageSelectedBgBase64

image.png

进度条节点选中背景图片 base64 格式

stageDefaultBgBase64

image.png

进度条节点默认背景图片 base64 格式

stageDoneBgBase64

image.png

进度条完成节点背景图片 base64 格式

stageLineDefaultColor

image.png

进度条横线默认颜色

stageLineSelectedColor

image.png

进度条横线颜色

stageSelectedTxtColor

image.png

进度条文字选中状态颜色

stageDefaultTxtColor

image.png

进度条文字默认状态颜色

infoTipsColor

image.png

图片显示框上方提示文案颜色

bottomTipsColor

image.png

图片显示框下方提示文案颜色

takeRequestColor

image.png

“拍摄要求”文字颜色

takeRequestTitleColor

image.png

“拍摄要求”弹框标题颜色

takeRequestExitIconBase64

image.png

拍摄要求弹框关闭按钮图片 base64 格式

takeRequestImgBase64

image.png

摄要求图片路径 base64 格式

takeEnterIconBase64

image.png

拍摄图标 base64 格式

frontDefaultImgBase64

image.png

身份证人像面默认图片 base64 格式

backDefaultImgBase64

image.png

身份证国徽面默认图片 base64 格式

infoNoticeIconBase64

image.png

识别信息确认提示 base64 格式

infoNoticeBgColor

image.png

“识别信息确认提示”背景色

infoNoticeTxtColor

image.png

“识别信息确认提示”文字颜色

infoCertNameColor

image.png

识别结果“姓名”颜色

infoCertNoColor

image.png

识别结果“身份证号”颜色

resultCertNameColor

image.png

识别出的姓名的颜色

resultCertNoColor

image.png

识别出的身份证号颜色

infoHintColor

image.png

姓名/身份证号未填写提示颜色

cleanIconBase64

image.png

信息删除图标 base64 格式

nextBgColor

image.png

页面底部按钮背景色

nextTxtColor

image.png

页面底部按钮文案色

dialogIdentifyFailTitleColor

image.png

识别失败弹框 title 颜色

dialogIdentifyFailExitIconBase64

image.png

“识别失败”弹框关闭按钮图标 base64 格式

dialogIdentifyFailImgBase64

image.png

“识别失败”弹框图片 base64 格式

dialogIdentifyFailTxtColor

image.png

“识别失败”弹框中“证件图像未符合要求”文字颜色

dialogIdentifyFailHintColor

image.png

“识别失败”弹框中“请按要求拍摄...”文字颜色

dialogIdentifyFailConfirmColor

image.png

“识别失败”弹框,"重新拍摄"按钮文字颜色

dialogNetworkErrTitleColor

image.png

"网络异常"弹框配色

dialogNetworkErrMsgColor

image.png

dialogNetworkErrConfirmColor

image.png

dialogNetworkErrCancelColor

image.png

dialogExitTitleColor

image.png

“退出”弹框配色

dialogExitMsgColor

image.png

dialogExitConfirmColor

image.png

dialogExitCancelColor

image.png

dialogFailTooManyTitleColor

image.png

“识别失败次数过多”弹框配色

dialogFailTooManyMsgColor

image.png

dialogFailTooManyConfirmColor

image.png

dialogNoPermissionTitleColor

image.png

“摄像头权限引导弹框”配色

dialogNoPermissionMsgColor

image.png

dialogNoPermissionCancelColor

image.png

dialogNoPermissionToSureColor

image.png

livenessTipsColor

image.png

“跳转活体认证”页标题颜色

livenessMsgColor

image.png

“跳转活体认证”页提示颜色

livenessImgBase64

image.png

“跳转活体认证”页图片 base64 格式

livenessLoadingImgBase64

image.png

“跳转活体认证”页 loading 图片 base64 格式

livenessLoadingMsgColor

image.png

“跳转活体认证”页 loading 文字颜色

livenessLoadingBgColor

image.png

“跳转活体认证”页 loading 背景颜色

takePhotoExitIconBase64

image.png

关闭拍照页按钮图标 base64 格式

flashOnIconBase64

image.png

闪光灯打开状态图标 base64 格式

flashOffIconBase64

image.png

闪光灯关闭状态图标 base64 格式

takeTipsColor

image.png

拍照提示文案颜色

takePhotoIconBase64

image.png

“拍摄”按钮图 base64 格式

photoRetakeIconBase64

image.png

“重新拍摄”按钮图标 base64 格式

photoConfirmIconBase64

image.png

“确认图片”图标路径 base64 格式

chooseTakePhotoColor

image.png

图片来源弹框“拍照”字体颜色

chooseFromAlbumColor

image.png

图片来源弹框“从相册中选择”字体颜色

chooseCancelColor

image.png

图片来源弹框“取消”字体颜色

ocrActionSheetMaskColor

image.png

弹窗遮罩的颜色

文案自定义

目前支持引导页活体认证页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

image.jpeg

手动退出弹框文案

说明

手动点击“X”(退出)或“暂不认证”时弹出。

dialogExitMsg

dialogExitConfirm

dialogExitCancel

dialogNetworkFailedTitle

image.jpeg

网络异常弹框文案

dialogNetworkFailedMsg

dialogNetworkFailedConfirm

活体页

faceConfig

faceTitleBlink

image.png

刷脸页标题文案

leftYawLiveness

rightYawLiveness

photinusCommTips

faceNotFound

image.png

取景框内提示文案

faceTooFar

faceTooClose

faceNotIn

badPitch

badYaw

faceTooMore

faceIsMoving

faceBrightless

faceBadQuality

eyesOnScreen

blink

leftYaw

rightYaw

stackTime

isBlur

faceInitTxt

processing

image.png

认证提交时loading文案

dialogTooManyRetriesTitle

image.png

重试次数过多弹窗文案

dialogTooManyRetriesMsg

dialogTooManyRetriesConfirm

dialogCamOpenFailedTitle

image.png

摄像头打开异常弹窗文案

dialogCamOpenFailedMsg

dialogCamOpenFailedConfirm

dialogSDKErrTitle

image.png

操作失败弹窗文案

dialogSDKErrMsg

dialogSDKErrConfirm

dialogNetworkFailedTitle

image.png

网络异常弹窗文案

dialogNetworkFailedMsg

dialogNetworkFailedConfirm

dialogExitTitle

image.png

手动退出弹窗文案

dialogExitMsg

dialogExitConfirm

dialogExitCancel

dialogTimeOutTitle

image.png

操作超时弹窗文案

dialogTimeOutMsg

dialogTimeOutConfirm

OCR页面

docConfig

stageFrontTips

image.png

stageBackTips

image.png

stageLivenessTips

image.png

frontInfoTips

image.png

frontInfoBottomTips

image.png

backInfoBottomTips

image.png

backInfoTips

image.png

takeRequireTxt

image.png

takeRequireTitle

image.png

resultCheckTips

image.png

certNameTitle

image.png

certNoTitle

image.png

certNameHint

image.png

certNoHint

image.png

invalidCertName

image.png

invalidCertNo

image.png

nextTxt

image.png

confirmTxt

image.png

livenessTips

image.png

livenessMsg

image.png

livenessLoadingMsg

image.png

dialogIdentityFailTitle

image.png

dialogIdentityFailRequireTitle

image.png

dialogIdentityFailRequireMsg

image.png

dialogIdentityFailRetry

image.png

dialogNetworkTimeOutTitle

image.png

dialogNetworkTimeOutMsg

image.png

dialogNetworkTimeOutConfirm

image.png

dialogNetworkTimeOutCancel

image.png

identityLoadingMsg

image.png

dialogExitTitle

image.png

dialogExitMsg

image.png

dialogExitConfirm

image.png

dialogExitCancel

image.png

dialogTooManyRetriesTitle

image.png

dialogTooManyRetriesMsg

image.png

dialogTooManyRetriesConfirm

image.png

dialogNoPermissionTitle

image.png

dialogNoPermissionMsg

image.png

dialogNoPermissionCancel

image.png

dialogNoPermissionToSet

image.png

takeFrontTips

image.png

takeBackTips

image.png