Web SDK - PC UI カスタマイズ手順 - ID Verification - Alibaba Cloud ドキュメントセンター

PC 向け Web SDK は、ユーザーインターフェース (UI) スタイルのカスタマイズをサポートしています。ガイドページ、証明書キャプチャページ、OCR 結果編集ページ、および生体検知ページで、アイコン、ボタンの色、背景色などの要素をカスタマイズできます。

設定方法

サーバー側の Initialize API の StyleConfig フィールドを使用して、カスタムスタイルの JSON 文字列を Alibaba Cloud サーバーに渡して初期化できます。

カスタム構成を指定しない場合は、デフォルトの構成が使用されます。特定の設定項目を省略した場合は、その項目のデフォルトスタイルが使用されます。初期化リクエストのサイズを最小限に抑えるために、変更したい構成のみを渡し、残りは Alibaba Cloud のデフォルト設定に依存することをお勧めします。

説明

JSON 文字列には、正規表現で使用される特殊文字を含めることはできません。

構成テンプレート

JavaScript

const styleConfig = {
  guidePage: {
    step1Icon: "", // ステップ 1 のアイコン。画像のディメンション (幅 × 高さ) は 200 × 200 です。
    step2Icon: "", // ステップ 2 のアイコン。画像のディメンション (幅 × 高さ) は 200 × 200 です。
    pathIcon: "", // ステップ間の接続線のアイコン。画像のディメンション (幅 × 高さ) は 320 × 3 です。
    startBtnBgColor: "#FF6A00", // [認証開始] ボタンの背景色。デフォルト値: #FF6A00。
    startBtnTextColor: "#FFFFFF", // [認証開始] ボタンのテキスト色。デフォルト値: #FFFFFF。
  },
  ocrPage: {
    backIcon: "", // [戻る] ボタンのアイコン。画像のディメンション (幅 × 高さ) は 24 × 24 です。
    uploadIcon: "", // [アップロード] のアイコン。画像のディメンション (幅 × 高さ) は 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"
  }
}

設定項目

カスタムページの色: さまざまな UI コンポーネントに色の値を指定して、デフォルトの色を置き換えることができます。
カスタムアイコン: カスタムアイコンまたはイメージリソースを指定して、デフォルトのものを置き換えることができます。アイコンのサイズと位置は変更されません。
カスタムフレームスタイル: カスタムリソースファイルを指定して、デフォルトのものを置き換えることができます。フレームのサイズと位置は変更されません。

モジュールページ	要素	説明	設定項目	設定項目の説明
ガイドページ	サンプルイメージ	お客様はサンプルイメージを置き換えることができます。	`"guidePage": { "step1Icon": "", "step2Icon": "", "pathIcon": "" }`	インターネット経由でアクセスできるイメージの URL。 step1Icon and step2Icon: eKYC ガイドページのステップ 1 とステップ 2 のアイコン。サイズ: `200 × 200`。 pathIcon: ステップ間の接続線のアイコン。サイズ: `320 × 3`.
	ボタンの背景色/ボタンのフォント色	なし	`"guidePage": { "startBtnBgColor": "#FF6A00", "startBtnTextColor": "#FFFFFF" }`	startBtnBgColor: [開始] ボタンの背景色の値。 startBtnTextColor: [開始] ボタンのテキスト色の値。
	ボタンの背景色/ボタンのフォント色	なし
証明書キャプチャページ	戻るボタンのアイコン/イメージアップロードアイコン	なし	`"ocrPage": { "backIcon": "", "uploadIcon": "" }`	インターネット経由でアクセスできるイメージの URL。 backIcon: [戻る] ボタンのイメージ。サイズ: `24 × 24`。 uploadIcon: [イメージをアップロード] のアイコン。サイズ: `16 × 16`。
	アップロードテキストのスタイル	なし	`"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`。