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>发起实人认证请求。
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。