ID Verification 提供了 ReactNative 平台外掛程式，可以協助您在 ReactNative 應用中實現 KYC 遠程身分識別驗證功能。本文將結合範例程式碼介紹 ReactNative 平台的接入流程。
配置依賴
您可以參考ReactNative官網文檔接入ReactNative外掛程式，也可以參考本文步驟接入ReactNative外掛程式。
下載SDK
下載IDV ReactNative SDK，下載完成後，解壓該 ZIP 檔案，將獲得一個名為 react-native-idv-library 的本地檔案夾，其中包含 SDK 的 React Native 模組及原生依賴。
引入本地模組
將解壓得到的 react-native-idv-library 檔案夾作為本地模組引入到您的 React Native 專案中。
建議將其放置在與應用專案同級的目錄下。例如，典型的專案結構如下：
Development/
├── App/ # 您的 React Native 應用根目錄
└── react-native-idv-library/ # 解壓後的 SDK 本地模組然後，在應用根目錄（即 App/ 目錄）中，執行以下命令安裝該本地模組：
yarn add ../react-native-idv-library 安裝原生依賴
SDK 包含 Android 和 iOS 原生代碼，需根據目標平台完成對應配置。
Android：
React Native 0.60 及以上版本支援 Autolinking，無需額外操作，構建時會自動連結原生模組。iOS：
進入應用的ios目錄，執行 CocoaPods 安裝命令以整合原生依賴：cd ios bundle exec pod install
開始整合
初始化SDK
install(): Promise<void>與installWithOptions(options: Object): Promise<void>介面：用於初始化 API，分別提供無參數和帶參數兩種調用方式。應在應用啟動後儘早調用其中任一介面以完成初始化。
options：資訊採集可選項，預設可以為null。選擇性參數如下：
ID Verification用戶端內建裝置助手安全模組，為了滿足不同地區資料收集合規要求，提供了不同的資料上報地區。您可以基於使用者屬性不同，設定
CustomUrl和CustomHost指定不同的上報網站。一次應用會話生命週期內只能指定一個地區上報，且服務端查詢時地區需要和上報地區保持一致。各產品服務端支援的地區有所不同，詳情請參考支援的地區。
各地區的
CustomUrl：中國香港：
https://cloudauth-device.cn-hongkong.aliyuncs.com新加坡：
https://cloudauth-device.ap-southeast-1.aliyuncs.com印尼（雅加達）：
https://cloudauth-device.ap-southeast-5.aliyuncs.com美國（矽谷）：
https://cloudauth-device.us-west-1.aliyuncs.com德國（法蘭克福）：
https://cloudauth-device.eu-central-1.aliyuncs.com馬來西亞（吉隆坡）：
https://cloudauth-device.ap-southeast-3.aliyuncs.com
欄位名 | 說明 | 樣本 |
IPv6 | 是否使用IPv6網域名稱上報裝置資訊：
| "1" |
DataSwitch | 裝置資訊上報時機。
說明 建議採用預設配置。 | "1" |
CustomUrl | 設定資料上報伺服器網域名稱。 | 具體內容，請參見各地區的CustomUrl。 |
CustomHost | 設定資料上報伺服器host。 | "cloudauth-device.ap-southeast-1.aliyuncs.com" 說明 此處為新加坡地區樣本，其他地區的host，請參見各地區的CustomUrl。 |
參考樣本：
import IdvLibrary from 'react-native-idv-library';
IdvLibrary.installWithOptions({
CustomUrl:"https://cloudauth-device.ap-southeast-5.aliyuncs.com",
CustomHost:"cloudauth-device.ap-southeast-5.aliyuncs.com"});擷取MetaInfos
getMetaInfo(): Promise<string>：該介面會返回用戶端的環境資訊，用戶端需要使用MetaInfos資訊向商務服務器發送請求，商務服務器隨後使用從用戶端接收到的MetaInfos，向阿里雲發送初始化認證請求，從而擷取transactionId和Protocol，用於後續的認證環節。
參考樣本：
import IdvLibrary from 'react-native-idv-library';
async function handleGetMetaInfo() {
// 擷取元資訊
const _metaInfo = await IdvLibrary.getMetaInfo();
console.log('Meta info:', _metaInfo);
}開始認證
使用verify(transactionId: string, extParams?: Object): Promise<VerifyResult>發起ID Verification請求。
verify()介面參數：
必須的參數：transactionId
擴充參數：
說明每個transactionId只能使用一次，否則會返回錯誤。
傳回值：
Promise<VerifyResult>，包含以下欄位的VerifyResult對象：code：狀態代碼
subCode: 子碼
message：錯誤描述
關於狀態代碼與子碼的具體資訊，請參見Android接入IdentityResponse.code表與iOS接入錯誤碼。
參考樣本：
import { Platform} from 'react-native'; import IdvLibrary from 'react-native-idv-library'; async function handleVerify() { const extParams = Platform.select({ ios: { kIdentityParamKeyLanguage: 'en', kIdentutyParamKeyProtocol:'xxxxxxx' }, android: { SdkLanguage: 'en', Protocol:'xxxxxxxxx' }, }); //認證介面 const result = await IdvLibrary.verify('transactionId', extParams);//transactionId改為從服務端擷取的真實認證ID。 console.log('Verify result:', result); }
自訂UI
使用setCustomUIConfig(param: string): Promise<string>介面自訂UI顏色。
參數：params：傳入JSON格式資料。請參考原生SDK各自的UI自訂配置：
參考樣本：
async function handleSetCustonUiConfig() { const config= "{\"faceConfig\":{ \"faceBGColor\": \"#FF33FF\"}}"; const result=await IdvLibrary.setCustomUIConfig(config); console.log('handleUi:', result); }
平台專屬配置
IDV SDK 依賴裝置的相機、網路等原生能力，需在 Android 和 iOS 工程中完成必要的許可權聲明與構建配置。以下配置為必需項，請務必按目標平台逐一檢查。
Android端
配置aar檔案
拷貝react-native-idv-library/andorid目錄下的libs檔案夾，至接入的React Native專案的android/app目錄下：
然後，在React Native專案的android/app/build.gradle檔案下添加如下配置。
//新增
repositories {
flatDir {
dirs 'libs'
}
}
dependencies {
//新增
implementation fileTree(dir: 'libs', include: ['*.aar'])
}
混淆配置
-dontwarn com.idvlibrary.**
-keep class com.idvlibrary.** {
*;
}
-verbose
-keep class com.idv.identity.platform.api.** {*;}
-keep class com.idv.identity.platform.log.** {*;}
-keep class com.idv.identity.util.IdentityUtils {*;}
-keep class com.idv.identity.ocr.IdentityOcrApi {*;}
-keep class com.idv.identity.platform.model.** {*;}
-keep class com.idv.identity.platform.config.** {*;}
-keep class com.idv.identity.face.IdentityFaceApi {*;}
-keep class com.face.verify.intl.** {*;}
-keep class com.alibaba.fastjson.** {*;}
-keep class face.security.device.api.** {*;}
-keep class net.security.device.api.** {*;}
-keep class com.dtf.toyger.** { *; }
-dontwarn net.security.device.api.**
-dontwarn face.security.device.api.**
-keep class com.idv.identity.service.algorithm.** {*;}
-keep class com.idv.identity.base.algorithm.** {*;}
-keep class com.idv.identity.quality.QualityRouter {*;}
-keep class com.idv.identity.blink.BlinkRouter {*;}
-keep class com.idv.identity.service.IdentityFaceService {*;}
-keep class com.idv.identity.service.ocr.IdentityDocService {*;}
-keep class com.alibaba.sdk.android.oss.** { *; }
-dontwarn okio.**
-dontwarn org.apache.commons.codec.binary.**
# NFC
-keep class com.idv.identity.nfc.IdentityNfcApi { *; }
-keep class org.jmrtd.** {*;}
-keep class net.sf.**{*;}
-keep class org.**{*;}
-keep class cn.**{*;}
# Please add these rules to your existing keep rules in order to suppress warnings.
# This is generated automatically by the Android Gradle plugin.
-dontwarn com.fasterxml.**
-dontwarn com.google.**
-dontwarn java.applet.Applet
-dontwarn java.awt.**
-dontwarn javax.**
-dontwarn org.**
-dontwarn retrofit2.**
-dontwarn springfox.documentation.spring.web.json.Json
#日誌混淆，可選
-assumenosideeffects class android.util.Log {
public static *** d(...);
}
# 若使用的1.3.2之前的版本需要添加如下混淆規則
-keepattributes Signature
-keepattributes *Annotation*
-keep class com.alibaba.fastjson.** { *; }
-keep class * extends com.alibaba.fastjson.TypeReference { *; }iOS端
添加必要許可權
在 Info.plist 中添加以下許可權（許可權描述僅供參考）：
完整範例程式碼
import React from 'react';
import { Platform,Text, View, StyleSheet, Button } from 'react-native';
import IdvLibrary from 'react-native-idv-library';
IdvLibrary.installWithOptions({
CustomHost:"cloudauth-device.cn-hongkong.aliyuncs.com",
CustomUrl:"https://cloudauth-device.cn-hongkong.aliyuncs.com"
})
export default function App() {
const [resultInfo, setValue] = React.useState<string | null>(null);
async function handleVerify() {
const extParams = Platform.select({
ios: {
kIdentityParamKeyLanguage: 'en',
kIdentutyParamKeyProtocol:'xxxxxxx'
},
android: {
SdkLanguage: 'en',
Protocol:'xxxxxxxxx'
},
});
// 驗證身份
const result = await IdvLibrary.verify('transactionId', extParams);//transactionId改為從服務端擷取的真實認證ID。
console.log('Verify result:', result);
setValue(JSON.stringify(result));
}
async function handleGetMetaInfo() {
// 擷取元資訊
const _metaInfo = await IdvLibrary.getMetaInfo();
console.log('Meta info:', _metaInfo);
setValue(_metaInfo);
}
async function handleSetCustonUiConfig() {
const config= "{\"faceConfig\":{ \"faceBGColor\": \"#FF33FF\"}}";
const result=await IdvLibrary.setCustomUIConfig(config);
console.log('handleUi:', result);
}
return (
<View style={styles.container}>
<Text>Result : {resultInfo}</Text>
<Button title="擷取認證資訊" onPress={handleGetMetaInfo} />
<Button title="設定UI" onPress={handleSetCustonUiConfig} />
<Button title="認證" onPress={handleVerify} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});您也可以下載ReactNative Demo體驗完整代碼。
此Demo代碼僅作為整合樣本，建議替換最新版本SDK。