Web SDK - PC UI自訂配置說明 - ID Verification

Web SDK - PC支援使用者介面樣式的自訂。您可以根據需要自訂引導頁、證件採集頁、OCR結果編輯頁以及活體檢測頁的表徵圖、按鈕顏色、背景顏色等樣式。

配置方法

根據配置模板，將自訂樣式的JSON字串，通過服務端的Initialize介面中的StyleConfig欄位傳給阿里雲服務端初始化後使用。

不傳對應配置則使用預設配置；不傳對應配置項的樣式則使用預設樣式。為了減少初始化請求的大小，建議只傳遞需要修改的配置，其他配置項保持阿里雲預設配置。

說明

JSON字串中不可含有Regex中的特殊字元。

配置模板

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`。