ID Verification は、React Native アプリケーションにリモート KYC 本人確認機能を実装するための React Native プラグインを提供します。本トピックでは、サンプルコードを用いて連携手順を順に説明します。
依存関係の構成
React Native プラグインの連携は、公式 React Native ドキュメントに従って行うことができます。あるいは、本トピックの手順に従っても構いません。
SDK のダウンロード
ID Verification React Native SDK をダウンロードします。ダウンロード後、ZIP ファイルを展開します。これにより、react-native-idv-library という名前のローカルフォルダが作成されます。このフォルダには、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 以降では自動リンクがサポートされています。追加の手順は不要です。ビルドプロセスがネイティブモジュールを自動的にリンクします。iOS：
アプリケーションのiosディレクトリに移動し、CocoaPods のインストールコマンドを実行してネイティブ依存関係を統合します：cd ios bundle exec pod install
連携の開始
SDK の初期化
install(): Promise<void> または installWithOptions(options: Object): Promise<void> を呼び出します。どちらのメソッドも API を初期化します。パラメーターなしのバージョン、またはオプションを受け取るバージョンのいずれかを使用できます。アプリケーション起動直後にできるだけ早く、いずれかのメソッドを呼び出してください。
options：情報収集のためのオプションパラメーターを指定します。このパラメーターは任意であり、null に設定可能です。パラメーターの内容は以下のとおりです：
ID Verification クライアントには、組み込みの Device Guard セキュリティモジュールが含まれています。異なるリージョンにおけるデータ収集のコンプライアンス要件を満たすため、Device Guard は異なるデータ報告サイトを提供しています。ユーザーの属性に基づき、
CustomUrlおよびCustomHostパラメーターを設定することで、報告サイトを指定できます。単一アプリケーションセッションのライフサイクル内で、データ報告リージョンは 1 つだけ指定できます。サーバー側のクエリリージョンは、報告リージョンと一致している必要があります。 対応するリージョンは製品によって異なります。詳細については、「対応リージョン」をご参照ください。
各リージョンの
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
パラメーター名 | 説明 | 例 |
IPv6 | デバイス情報の報告にIPv6 ドメイン名を使用するかどうかを指定します：
| "1" |
DataSwitch | デバイス情報の報告タイミングです。
説明 デフォルト設定を使用することを推奨します。 | "1" |
CustomUrl | データ報告サーバーのドメイン名を設定します。 | "https://cloudauth-device.ap-southeast-1.aliyuncs.com" |
CustomHost | データ報告サーバーのホストを設定します。 | "cloudauth-device.ap-southeast-1.aliyuncs.com" |
例：
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 を用いて Alibaba Cloud に対して初期化リクエストを送信します。これにより、次の認証ステップで使用される 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 は 1 回のみ使用できます。それ以外の場合、システムはエラーを返します。
戻り値：
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' }, }); // 認証 API const result = await IdvLibrary.verify('transactionId', extParams); // transactionId は、サーバーから取得した実際の検証 ID に置き換えてください。 console.log('Verify result:', result); }
UI のカスタマイズ
setCustomUIConfig(param: string): Promise<string> を呼び出して、UI の色をカスタマイズします。
params：JSON 形式のデータです。UI カスタマイズのオプションについては、ネイティブ SDK のドキュメントを参照してください：
例：
async function handleSetCustonUiConfig() { const config= "{\"faceConfig\":{ \"faceBGColor\": \"#FF33FF\"}}"; const result=await IdvLibrary.setCustomUIConfig(config); console.log('handleUi:', result); }
プラットフォーム固有の構成
ID Verification SDK は、カメラやネットワークアクセスなど、ネイティブデバイスの機能に依存しています。Android および iOS に対して、必要な権限を宣言し、ビルドを構成する必要があります。これらの構成は必須です。対象プラットフォームに対して必ず確認してください。
Android
AAR ファイルの追加
react-native-idv-library/android ディレクトリ内の libs フォルダを、React Native プロジェクトの android/app ディレクトリにコピーします：
その後、React Native プロジェクトの android/app/build.gradle ファイルに、以下の構成を追加します。
// 新規追加
repositories {
flatDir {
dirs 'libs'
}
}
dependencies {
// 新規追加
implementation fileTree(dir: 'libs', include the following: ['*.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.**{*;}
# 既存の keep ルールに追加して警告を抑制してください。
# これは Android Gradle プラグインによって自動生成されます。
-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>結果 : {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',
},
});また、React Native デモ をダウンロードして、完全なコードをお試しください。
このデモコードは連携の参考用です。最新の SDK バージョンに必ず置き換えてください。