ネイティブ SDK カスタム UI 統合 (新規) - ID Verification - Alibaba Cloud ドキュメントセンター

本人確認ネイティブ SDK では、UI の色やアイコンをカスタマイズできます。setCustomUIConfig インターフェイスを使用して、ファイルまたは JSON 形式で UI 設定を渡すことができます。このトピックでは、インターフェイスパラメータについて説明し、コードサンプルを提供します。

説明

一部のカスタム構成は SDK のバージョンに依存します。ご使用前に SDK を最新バージョンにアップグレードしてください。

UI カスタム構成が検証 API の拡張パラメーターと競合する場合、UI カスタム構成が優先されます。

設定ガイドライン

最小 SDK バージョン ： 1.4.0 以降。
デフォルトの継承 ：設定項目またはそのスタイルプロパティを渡さない場合、システムはデフォルト値にフォールバックします。
無効な設定項目の処理 ：
- カラー値は #RRGGBB または #AARRGGBB フォーマットにする必要があります。無効な値を渡した場合、システムはデフォルト値にフォールバックし、エラーメッセージを返します。
- Base64 アイコンには、data:image/png;base64,... などの有効なプレフィックスを持つ Base64 画像文字列を指定する必要があります。無効な値を渡した場合、システムはデフォルト値にフォールバックし、エラーメッセージを返します。
増分設定 ：設定を簡素化するために、変更が必要な設定項目のみを渡し、その他の項目はデフォルト値のままにします。

API

Android

API 定義

Android SDK は、UI の色とアイコンをカスタマイズするための setCustomUIConfig API を提供します。このメソッドに必要なパラメーターを指定して呼び出し、カスタム UI 設定を適用します。

    /**
     * カスタム UI の色とアイコンを設定します。
     *
     * @return 設定ファイルで検出された例外情報を含む文字列。
     * @description この API は、カスタム UI の設定に使用します。
     * @paramType paramType パラメーターの型 {@link IDTFacade}。有効な値は
     * {@link IDTFacade#EXT_PARAMS_CONFIG_JSON} または {@link IDTFacade#EXT_PARAMS_CONFIG_ASSETS_NAME} です。
     *
     * @param param 指定された paramType に対応するパラメーター値。
     */
    public String setCustomUIConfig(@IDTFacade int paramType, String param) {
     // ...
    }

パラメーター

パラメーター	タイプ	説明
paramType	int	カスタム入力パラメーターのタイプを設定します。使用できる値は次のとおりです。 • `IDTFacade.EXT_PARAMS_CONFIG_ASSETS_NAME`: アプリのアセットファイルタイプです。 `param` パラメーターはアセットファイルの名前を指定します。 • `IDTFacade.EXT_PARAMS_CONFIG_JSON`: JSON 文字列です。 `param` パラメーターはデータを JSON 形式で指定します。
param	String	設定データ。内容は `paramType` の値によって異なります。

戻り値

param の内容の解析中に発生したエラーや例外に関する詳細を含む String を返します。設定が無効な場合は、この値から特定のエラー情報を確認してください。

例

// 方法1：アセットファイル名を渡します
String customUIErrMsg = IdentityPlatform.getInstance()
    .setCustomUIConfig(IDTFacade.EXT_PARAMS_CONFIG_ASSETS_NAME, "DTCustomUIConfig.json");

// 方法2：JSON 文字列を渡します
String customUIErrMsg = IdentityPlatform.getInstance()
    .setCustomUIConfig(IDTFacade.EXT_PARAMS_CONFIG_JSON, jsonConfig);

// 統合テスト中に戻り値を出力することを推奨します。
Log.d("CustomUI", "errMsg: " + customUIErrMsg);

iOS

iOS SDK は、UI の色とアイコンをカスタマイズするための setCustomUI API を提供します。このメソッドに必要なパラメーターを指定して呼び出し、カスタム UI 設定を適用します。

    /**
     * カスタム UI の色とアイコンを設定します。
     *
     * @completeBlock 設定の結果を報告するコールバック。
     * @configuration カスタム UI の JSON 文字列。
     */
   - (void)setCustomUI:(nonnull NSString *)configuration
           complete:(void(^_Nullable)(BOOL success, NSError * _Nullable error, NSDictionary *warningDict))completeBlock {
    ......
}

パラメーター

パラメーター

タイプ

説明

configuration

String

カスタム UI の JSON 文字列。

completeBlock

ブロック

設定の結果を報告するコールバック：

success = YES：設定は正常に適用されました。
success = NO：設定は失敗しました。error オブジェクトに失敗に関する詳細が含まれます。

戻り値

このメソッドには直接の戻り値はありません。代わりに、結果は completeBlock コールバックを介して非同期に返されます。コールバックの warningDict パラメーターは、非推奨のフィールドの使用など、設定に関する警告を含む NSDictionary です。これらの警告によって設定が失敗することはありませんが、確認することを推奨します。

例

[[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": { }
}

パラメーター	説明
`commonConfig`	すべてのページに共通する一般設定です。プライマリアクションボタン、[Back]/[Close] アイコン、読み込みテキストの色などが含まれます。
`dialogConfig`	SDK 全体のアラートダイアログです。タイトル、本文テキスト、ボタンテキストの色を設定します。
`guideConfig`	ガイドページです。メインタイトルと本文テキストの色を設定します。
`ocrConfig`	OCR 認識ページと結果ページです。
`faceConfig`	顔認識ページです。タイトル、プロンプトテキスト、バックグラウンド、プログレスバーを設定します。
`nfcConfig`	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

パラメーター	説明	デフォルト値	Android プレビュー	iOS プレビュー
`loadingMessageColor`	読み込みメッセージの色は `loadingMessageColor` で指定します。デフォルトの色はページによって異なりますが、設定後は単一の色に統一されます。	`#000000` / `#ffffff`
`btnBGColor`	プライマリアクションボタンの背景色 (有効状態)。	`#FF6A00`
`btnDisableBGColor`	プライマリアクションボタンの背景色 (無効状態)。	`#D5D5D5`
`btnMessageColor`	プライマリアクションボタンのテキストの色 (有効状態)。	`#F9F9FA`
`btnDisableMessageColor`	プライマリアクションボタンのテキストの色 (無効状態)。	`#F9F9FA`
`exitIconBase64`	ページの戻る/閉じるボタンのアイコン。	`data:image/png;base64,...`

dialogConfig

パラメーター	説明	デフォルトカラー	Android プレビュー	iOS プレビュー
`titleColor`	ダイアログのタイトルのテキストカラー。	`#000000`
`messageColor`	ダイアログのメッセージのテキストカラー。	`#888888`
`primaryActionColor`	ボタンが 2 つあるダイアログのプライマリアクションボタン (右側) のテキストカラー。	`#FF6A00`
`secondaryActionColor`	ボタンが 2 つあるダイアログのセカンダリアクションボタン (左側) のテキストカラー。	`#000000`
`singleActionColor`	ボタンが 1 つあるダイアログのアクションボタンのテキストカラー。	`#FF6A00`

guideConfig

パラメーター	説明	デフォルトカラー	Android プレビュー	iOS プレビュー
`titleColor`	メインタイトルのテキストの色です。	`#3D3D3D`
`contentColor`	コンテンツのテキストの色です。	`#333333`

ocrConfig

パラメーター	説明	デフォルトの色	Android プレビュー	iOS プレビュー
`borderColor`	スキャンボックスまたは中空エリアの境界線の色。	`#ffffff`
`titleColor`	認識ページ上部のプロンプトテキストの色。	`#ffffff`
`albumLabelColor`	アルバムボタンのテキストの色。	`#ffffff`
`takePhotoLabelColor`	撮影/スキャン切り替えボタンのテキストの色。	`#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,...`
`submitTitleColor`	送信プロンプトテキストの色。	`#ffffff`
`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

パラメーター	説明	デフォルト	Android スクリーンショット	iOS スクリーンショット
`titleColor`	顔認識ページ上部のプロンプトテキストの色です。	`#000000`
`tipColor`	顔認識フレーム内のプロンプトテキストの色です。	`#000000`
`bgColor`	顔認識ページの背景色です。	`#ffffff`
`progressStartColor`	円形プログレスバーの開始色です。	`#80ffffff`		iOS ではサポートされていません。
`progressEndColor`	円形プログレスバーの終了色です。	`#FF6A00`

nfcConfig

パラメーター	説明	デフォルトカラー	Android スクリーンショット	iOS スクリーンショット
`titleColor`	NFC 読み取りページのタイトルのテキスト色を指定します。	`#3D3D3D`
`contentColor`	NFC 読み取りページの本文のテキスト色を指定します。	`#3D3D3D`
`readStatusTextColor`	読み取りステータスポップアップのステータステキストの色を指定します。	`#3D3D3D`		該当なし。システムダイアログは変更できません。
`readStatusExitBase64`	読み取りステータスポップアップの閉じるアイコンに使用する Base64 エンコード画像です。	`data:image/png;base64,...`		該当なし。システムダイアログは変更できません。
`inputTitleColor`	情報入力ページのタイトルのテキスト色を指定します。	`#262626`
`inputLabelColor`	情報入力ページのラベルのテキスト色を指定します。	`#333333`
`inputEditColor`	情報入力ページの入力フィールドのテキスト色を指定します。	`#333333`
`inputEditHintColor`	情報入力ページの入力フィールドのプレースホルダーテキストの色を指定します。	`#999999`