ID Verification Native SDK 提供自訂 UI 顏色及表徵圖的配置介面。開發人員可通過 setCustomUIConfig 介面,以檔案或 JSON 資料格式傳入 UI 配置,實現介面自訂。本文介紹該介面的參數說明及相關程式碼範例。
部分自訂配置依賴 SDK 版本,使用前請將 SDK 升級至最新版本。
當 UI 自訂配置與驗證介面的擴充參數存在衝突時,以 UI 自訂配置為準。
配置生效規則與建議
最低 SDK 版本要求:1.4.0 及以上。
預設繼承機制:未傳遞的配置項或其樣式屬性,系統將自動採用預設值。
非法配置項處理:
顏色格式須為
#RRGGBB或#AARRGGBB。若傳入非法值,系統將自動採用預設值,並返回對應錯誤提示。Base64 表徵圖須為帶合法首碼的 Base64 圖片字串(如
data:image/png;base64,...)。若傳入非法值,系統將自動採用預設值,並返回對應錯誤提示。
增量配置建議:建議僅傳遞需要修改的配置項,其餘配置項保持預設值,以降低配置複雜度。
介面說明
Android端
介面定義
Android SDK 提供 setCustomUIConfig 介面,用於自訂 UI 顏色及表徵圖。調用該方法並傳入相應參數,即可實現 UI 自訂效果。
/**
* 設定自訂UI顏色和icon表徵圖
*
* @return 設定檔檢測出的異常資訊。
* @description 此介面用於設定自訂UI。
* @paramType paramType 參數類型{@link IDTFacade} ,可傳範圍
* {@link IDTFacade#EXT_PARAMS_CONFIG_JSON} | {@link IDTFacade#EXT_PARAMS_CONFIG_ASSETS_NAME})。
*
* @params {@link String} params 參數值,與paramType相對應的值。
*/
public String setCustomUIConfig(@IDTFacade int paramType, String param) {
// ...
}入參說明
名稱 | 類型 | 說明 |
paramType | int | 配置自訂入參的類型,可選值如下: |
param | String | 根據 |
傳回值
String 類型。當 SDK 解析 param 內容時遇到錯誤或出現異常,將通過該傳回值返回提示資訊。若配置參數無效,請重點關注傳回值中的錯誤資訊。
調用樣本
// 方式一:傳入 assets 檔案名稱
String customUIErrMsg = IdentityPlatform.getInstance()
.setCustomUIConfig(IDTFacade.EXT_PARAMS_CONFIG_ASSETS_NAME, "DTCustomUIConfig.json");
// 方式二:傳入 JSON 字串
String customUIErrMsg = IdentityPlatform.getInstance()
.setCustomUIConfig(IDTFacade.EXT_PARAMS_CONFIG_JSON, jsonConfig);
// 建議聯調階段列印傳回值
Log.d("CustomUI", "errMsg: " + customUIErrMsg);iOS端
iOS SDK 提供 setCustomUI 介面,用於自訂 UI 顏色及表徵圖。調用該方法並傳入相應參數,即可實現 UI 自訂效果。
/**
* 設定自訂UI顏色和icon表徵圖
*
* @completeBlock 設定檔檢測出的異常資訊。
* @configuration 自訂UI的jsonString。
*/
- (void)setCustomUI:(nonnull NSString *)configuration
complete:(void(^_Nullable)(BOOL success, NSError * _Nullable error, NSDictionary *warningDict))completeBlock {
......
}入參說明
名稱 | 類型 | 說明 |
configuration | String | 自訂UI的jsonString |
completeBlock | block | 結果資訊回調:
|
傳回值
NSDictionary 類型。當 SDK 解析 param 內容時遇到錯誤或出現異常,將通過該傳回值返回提示資訊。若配置參數無效,請重點關注傳回值中的錯誤資訊。
調用樣本
[[AliyunIdentityPlatform sharedInstance] setCustomUI:customUIJSON complete:^(BOOL success, NSError * _Nullable error, NSDictionary *warningDict) {
if (!success) {
NSLog(@"自訂 UI 解析失敗: %@", error.localizedDescription);
} else if (warningDict.count > 0) {
NSLog(@"自訂 UI 警示: %@", warningDict);
}
}];配置結構概覽
新版配置採用 6 個頂層目錄,每個頂層目錄下包含對應的詳細欄位配置:
{
"commonConfig": { },
"dialogConfig": { },
"guideConfig": { },
"ocrConfig": { },
"faceConfig": { },
"nfcConfig": { }
}頂層目錄 | 控制範圍 |
| 跨頁面通用配置:Loading 文案顏色、主操作按鈕、返回/關閉表徵圖 |
| 全 SDK Alert 彈窗:標題、本文、按鈕文字顏色 |
| 引導頁:主標題、內容文字顏色 |
| OCR 識別頁及結果頁 |
| 刷臉頁:標題、提示文字、背景、進度條 |
| NFC 讀取頁、讀取狀態彈層及資訊輸入頁 |
全量預設配置
以下 JSON 中所有顏色均取 SDK 預設值,Base64 表徵圖以預留位置表示。可直接複製後按需修改:
{
"commonConfig": {
"loadingMessageColor": "#000000",
"btnBGColor": "#FF6A00",
"btnDisableBGColor": "#D5D5D5",
"btnMessageColor": "#F9F9FA",
"btnDisableMessageColor": "#F9F9FA",
"exitIconBase64": "data:image/png;base64,..."
},
"dialogConfig": {
"titleColor": "#000000",
"messageColor": "#888888",
"primaryActionColor": "#FF6A00",
"secondaryActionColor": "#000000",
"singleActionColor": "#FF6A00"
},
"guideConfig": {
"titleColor": "#3D3D3D",
"contentColor": "#333333"
},
"ocrConfig": {
"borderColor": "#ffffff",
"titleColor": "#ffffff",
"albumLabelColor": "#ffffff",
"takePhotoLabelColor": "#ffffff",
"submitTitleColor": "#ffffff",
"floodLightBase64": "data:image/png;base64,...",
"unFloodLightBase64": "data:image/png;base64,...",
"autoScanBase64": "data:image/png;base64,...",
"takeShootBase64": "data:image/png;base64,...",
"albumBase64": "data:image/png;base64,...",
"takePhotoBase64": "data:image/png;base64,...",
"submitBase64": "data:image/png;base64,...",
"resultTitleColor": "#000000",
"resultTipColor": "#000000",
"resultTipBgColor": "#EDEDED",
"resultErrorTipColor": "#C80000",
"resultErrorTipBgColor": "#FFE0DC",
"resultErrorTipIconBase64": "data:image/png;base64,...",
"resultInfoTitleColor": "#333333",
"resultInfoContentColor": "#999999",
"resultInfoContentBgColor": "#F7F7F7",
"resultInfoBorderColor": "#FF6A00"
},
"faceConfig": {
"titleColor": "#000000",
"tipColor": "#000000",
"bgColor": "#ffffff",
"progressStartColor": "#80ffffff",
"progressEndColor": "#FF6A00"
},
"nfcConfig": {
"titleColor": "#3D3D3D",
"contentColor": "#3D3D3D",
"readStatusTextColor": "#3D3D3D",
"readStatusExitBase64": "data:image/png;base64,...",
"inputTitleColor": "#262626",
"inputLabelColor": "#333333",
"inputEditColor": "#333333",
"inputEditHintColor": "#999999"
}
}最小配置樣本
僅修改最常用的主按鈕和主標題顏色,其餘配置項均使用 SDK 預設值:
{
"commonConfig": {
"btnBGColor": "#FF6A00",
"btnMessageColor": "#FFFFFF"
},
"ocrConfig": {
"titleColor": "#FFFFFF"
},
"faceConfig": {
"titleColor": "#000000"
}
}
詳細欄位說明與預設值
commonConfig
欄位名 | 欄位含義 | 預設顏色 | Andriod效果圖 | iOS效果圖 |
| Loading 文案色, |
|
|
|
| 主操作按鈕背景色(可點擊態) |
|
|
|
| 主操作按鈕背景色(不可點擊態) |
|
|
|
| 主操作按鈕文案色(可點擊態) |
|
|
|
| 主操作按鈕文案色(不可點擊態) |
|
|
|
| 頁面級返回/關閉按鈕表徵圖 |
|
|
|
dialogConfig
欄位名 | 欄位含義 | 預設顏色 | Andriod效果圖 | iOS效果圖 |
| 彈窗標題文字色 |
|
|
|
| 彈窗本文文字色 |
|
|
|
| 雙按鈕態主操作按鈕文字色(右側) |
|
|
|
| 雙按鈕態次操作按鈕文字色(左側) |
|
|
|
| 單按鈕態唯一按鈕文字色 |
|
|
|
guideConfig
欄位名 | 欄位含義 | 預設顏色 | Andriod效果圖 | iOS效果圖 |
| 引導頁主標題文字色 |
|
|
|
| 引導頁內容文字色 |
|
|
|
ocrConfig
欄位名 | 欄位含義 | 預設顏色 | Andriod效果圖 | iOS效果圖 |
| 掃描框 / 鏤空地區邊框色 |
|
|
|
| 識別頁頂部提示文案色 |
|
|
|
| 相簿選擇按鈕文字色 |
|
|
|
| 拍照 / 掃描切換按鈕文字色 |
|
|
|
| 閃光燈開啟表徵圖 |
|
|
|
| 閃光燈關閉表徵圖 |
|
|
|
| 自動掃描按鈕表徵圖 |
|
|
|
| 拍照按鈕切換表徵圖 |
|
|
|
| 相簿選擇按鈕表徵圖 |
|
|
|
| 拍照按鈕表徵圖 |
|
|
|
| 提交提示文案色 |
|
|
|
| 提交按鈕表徵圖 |
|
|
|
| 結果網頁標題文字色 |
|
|
|
| 頂部提示條正常態文字色 |
|
|
|
| 頂部提示條正常態背景色 |
|
|
|
| 頂部提示條校正失敗態文字色 |
|
|
|
| 頂部提示條校正失敗態背景色 |
|
|
|
| 校正失敗提示表徵圖 |
|
|
|
| 資訊區條目標題色 |
|
|
|
| 資訊區輸入框文字色 |
|
|
|
| 資訊區輸入框背景色 |
|
|
|
| 資訊區輸入框邊框色(校正失敗描邊) |
|
|
|
faceConfig
欄位名 | 欄位含義 | 預設顏色 | Andriod效果圖 | iOS效果圖 |
| 刷臉框頂部提示文案色 |
|
|
|
| 刷臉框內提示文案色 |
|
|
|
| Face Service頁面背景色 |
|
|
|
| 環形進度條起始色 |
|
| 無(無法設定初始值) |
| 環形進度條終止色 |
|
|
|
nfcConfig
欄位名 | 欄位含義 | 預設顏色 | Andriod效果圖 | iOS效果圖 |
| NFC 讀取網頁標題文字色 |
|
|
|
| NFC 讀取頁本文文字色 |
|
|
|
| 讀取狀態彈層狀態文案色 |
|
| 無(系統彈窗無法修改) |
| 讀取狀態彈層關閉表徵圖 |
|
| 無(系統彈窗無法修改) |
| 資訊輸入網頁標題文字色 |
|
|
|
| 輸入頁三個標籤的統一文字色 |
|
|
|
| 輸入頁三個輸入框的統一文字色 |
|
|
|
| 輸入頁三個輸入框的統一預留位置色 |
|
|
|




























































































