ID_OCR_Redirect integration - ID Verification - Alibaba Cloud ドキュメントセンター

ID Verification - KYC は、ご利用のブラウザまたは WebView でドキュメントの光学文字認識 (OCR) と偽造防止検出を実装するために使用できる Web SDK を提供します。KYC は Know Your Customer の略です。このトピックでは、モバイル H5 ページを介して ID Verification - KYC の ID_OCR ソリューションに接続する方法について説明します。

前提条件

最小オペレーティングシステムバージョン： Android 5 以降および iOS 11 以降。
サポートされているブラウザ：
- iOS： Safari。iOS 14.3 以降、Chrome、Firefox、Microsoft Edge、および WKWebView のサポートが追加されました。
- Android： Chrome 60 以降および Firefox 58 以降を推奨します。サポートされているブラウザはデバイスによって異なります。
必要な権限：ネットワークとカメラ。メディアコレクションには HTTPS デプロイメントが必要です。
縦向きモード：横向きモードでは、ページのインタラクションに問題が発生する可能性があります。ページに表示されるプロンプトに従って、ユーザーが認証に縦向きモードを使用するように案内することを推奨します。
互換性：ブラウザの互換性の断片化の問題により、プロセス設計において、ユーザーが認証に推奨ブラウザを使用するように案内することを推奨します。
このソリューションをモバイルアプリに統合する場合、埋め込みブラウザが原因で互換性の問題が発生する可能性があります。互換性の問題を軽減するか、ネイティブ SDK を統合するには、「アプリ内統合のための H5 モバイル SDK 互換性構成」をご参照ください。

重要

統合プロセス中に、TransactionUrl パラメーターの値の変更などの操作を実行しないでください。統合プロセス中に TransactionUrl に対して何らかの操作を実行すると、認証例外が発生します。
安全で効果的な認証を確保するため、認証 URL は 1 回しか使用できません。URL を再利用すると、エラーが発生します。

OCR の開始

コードに次の JavaScript ファイルをインポートし、getMetaInfo() 関数を呼び出して MetaInfo を取得します。

<script type="text/javascript" src="https://hkwebcdn.yuncloudauth.com/cdn/jsvm_all.js" ></script>

説明

ID Verification - KYC の認証操作を呼び出すときは、戻り値を MetaInfo パラメーターに渡す必要があります。

独自のビジネスサーバー API を呼び出して初期化し、TransactionUrl を取得し、このリンクをブラウザに読み込んで認証します。

サンプルコード

<!DOCTYPE HTML>
<html lang="ja">
  <head>
    <title>タイトル</title>
        <!--   JavaScript ファイルを追加し、getMetaInfo 関数をグローバルにインジェクトします。   -->
        <!--   JavaScript ファイルを追加し、getMetaInfo 関数をグローバルにインジェクトします。   -->
    <script type="text/javascript" src="https://hkwebcdn.yuncloudauth.com/cdn/jsvm_all.js" ></script>
  </head>
  <body>
  <div></div>
    <script>
      // Initialize 操作を呼び出すときにメタ情報を渡します。
      var MetaInfo = window.getMetaInfo();

      // Initialize 操作を呼び出して TransactionUrl パラメーターを取得します。
      var TransactionUrl = ''; // 値は Initialize 操作によって返されます。

      // TransactionUrl パラメーターで指定された URL にアクセスして認証を開始します。
      window.location.href = TransactionUrl;
    </script>
  </body>
</html>

クライアント側のカスタム構成

TransactionUrl でパラメーターを渡すことにより、ID Verification Web SDK 統合のクライアント側の特徴をカスタマイズできます。

& を使用してパラメーターを TransactionUrl に追加し、構成を適用できます。以下に例を示します：

TransactionUrl：

https://xxxx.com?clientcfg=xxx&callbackurl=xxx&paramSign=xxx&guideFlow=ekyc

initTimeout の追加：

https://xxxx.com?clientcfg=xxx&callbackurl=xxx&paramSign=xxx&guideFlow=ekyc&initTimeout=30

サポートされている特徴を次の表に示します：

パラメーター名	タイプ	必須	説明	例
initTimeout	String	いいえ	クライアント側の認証初期化のタイムアウト期間 (秒単位)。これは、ページの読み込みが開始されてから顔または OCR ページが表示されるまでの時間です。	30
clientLivenessTimeout	String	いいえ	1 回の顔の生体検知のタイムアウト期間 (秒単位)。	30
clientLivenessRetryCount	String	いいえ	顔の生体検知のリトライ回数。	5
ocrTimeout	String	いいえ	1 回の OCR 検出のタイムアウト期間 (秒単位)。	20
ocrRetryCount	String	いいえ	OCR のリトライ回数。	10
isPcOcrCameraCaptureSupported	String	いいえ	OCR のカメラキャプチャを有効にするかどうかを指定します。有効な値： 0：無効 (デフォルト) 1：有効説明このパラメーターは PC 統合シナリオに適用されます。	0
region	String	いいえ	モバイルクライアントで Alibaba Cloud API が呼び出されるリージョン。次の表に、region の値とリージョン間のマッピングを示します： `{ "HK": "香港", "US": "米国東部", "US-CA": "米国西部", "SG": "シンガポール", "MY": "マレーシア", "ID": "インドネシア", "PH": "フィリピン", "DE": "ドイツ", "SA": "サウジアラビア" }` 説明このパラメーターを渡して、Alibaba Cloud API を呼び出すためのサービスリージョンを指定します。このパラメーターを指定しない場合、デフォルトで最寄りのリージョンにアクセスします。	HK

応答の解析

サーバー側のリクエスト初期化中に ReturnUrl パラメーターが渡されると、それはマーチャント定義パラメーターとして機能します。認証が完了すると、認証結果がパラメーターとして ReturnUrl に追加され、マーチャントに返されます。応答の解析結果は、受信ルーティングモードによって異なります。

ルーティングモード	ReturnUrl の例	認証後の ReturnUrl の例
一般的な Web ページ	https://aliyundoc.com	https://aliyundoc.com/？response=%7B%22resultCode%22%3A%22%22%2C%22resultMessage%22%3A%22%22%2C%22ocrResult%22%3A%7B%22code%22%3A%22%22%2C%22reason%22%3A%22%22%2C%22extInfo%22%3A%7B%22certifyId%22%3A%22%22%7D%7D%2C%22faceResult%22%3A%7B%22code%22%3A%22%22%2C%22subCode%22%3A%22%22%2C%22reason%22%3A%22%22%2C%22extInfo%22%3A%7B%22certifyId%22%3A%22%22%7D%7D%7D
一般的な Web ページ	https://aliyundoc.com/index.html	https://aliyundoc.com/index.html?response=%7B%22resultCode%22%3A%22%22%2C%22resultMessage%22%3A%22%22%2C%22ocrResult%22%3A%7B%22code%22%3A%22%22%2C%22reason%22%3A%22%22%2C%22extInfo%22%3A%7B%22certifyId%22%3A%22%22%7D%7D%2C%22faceResult%22%3A%7B%22code%22%3A%22%22%2C%22subCode%22%3A%22%22%2C%22reason%22%3A%22%22%2C%22extInfo%22%3A%7B%22certifyId%22%3A%22%22%7D%7D%7D
ページアンカー (#) のない履歴ルーティング	https://aliyundoc.com/xxx/	https://aliyundoc.com/xxx?response=%7B%22resultCode%22%3A%22%22%2C%22resultMessage%22%3A%22%22%2C%22ocrResult%22%3A%7B%22code%22%3A%22%22%2C%22reason%22%3A%22%22%2C%22extInfo%22%3A%7B%22certifyId%22%3A%22%22%7D%7D%2C%22faceResult%22%3A%7B%22code%22%3A%22%22%2C%22subCode%22%3A%22%22%2C%22reason%22%3A%22%22%2C%22extInfo%22%3A%7B%22certifyId%22%3A%22%22%7D%7D%7D
ページアンカー (#) のある履歴ルーティング	https://aliyundoc.com/xxx/#xxx	https://aliyundoc.com/xxx?response=%257B%2522resultCode%2522%253A%2522%2522%252C%2522resultMessage%2522%253A%2522%2522%252C%2522ocrResult%2522%253A%257B%2522code%2522%253A%2522%2522%252C%2522reason%2522%253A%2522%2522%252C%2522extInfo%2522%253A%257B%2522certifyId%2522%253A%2522%2522%257D%257D%252C%2522faceResult%2522%253A%257B%2522code%2522%253A%2522%2522%252C%2522subCode%2522%253A%2522%2522%252C%2522reason%2522%253A%2522%2522%252C%2522extInfo%2522%253A%257B%2522certifyId%2522%253A%2522%2522%257D%257D%257D#xxx
ハッシュルーティング	https://aliyundoc.com/#/aaa/bbb	https://aliyundoc.com/?response=%257B%2522resultCode%2522%253A%2522%2522%252C%2522resultMessage%2522%253A%2522%2522%252C%2522ocrResult%2522%253A%257B%2522code%2522%253A%2522%2522%252C%2522reason%2522%253A%2522%2522%252C%2522extInfo%2522%253A%257B%2522certifyId%2522%253A%2522%2522%257D%257D%252C%2522faceResult%2522%253A%257B%2522code%2522%253A%2522%2522%252C%2522subCode%2522%253A%2522%2522%252C%2522reason%2522%253A%2522%2522%252C%2522extInfo%2522%253A%257B%2522certifyId%2522%253A%2522%2522%257D%257D%257D/#/aaa/bbb

応答を解析するためのサンプルコード

一般的な Web ページ

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>タイトル</title>
    </head>
    <body>
        <script>
            // window.location.href を構成します：
            // window.location.href = https://aliyundoc.com
            // または
            // window.location.href = https://aliyundoc.com/index.html

            // URL オブジェクトを初期化します
            var url = new URL(window.location.href);
            // 応答を解析します
            var response = JSON.parse(url.searchParams.get('response'));
            // response = {
            //     resultCode: '',
            //     extInfo: {certifyId: ''}
            // }
        </script>
    </body>
</html>

ページアンカー (#) のない履歴ルーティング

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>タイトル</title>
    </head>
    <body>
        <script>
            // window.location.href を構成します：
            // window.location.href = https://aliyundoc.com/xxx

            // URL オブジェクトを初期化します 
            var url = new URL(window.location.href);
            // 応答を解析します
            var response = JSON.parse(url.searchParams.get('response'));            
            // response = {
            //     resultCode: '',
            //     extInfo: {certifyId: ''}
            // }
        </script>
    </body>
</html>

ページアンカー (#) のある履歴ルーティング

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>タイトル</title>
    </head>
    <body>
        <script>
            // window.location.href を構成します：
            // window.location.href = https://aliyundoc.com/xxx/#xxx

            // URL オブジェクトを初期化します
            var url = new URL(window.location.href);
            // 応答を解析します
            var response = JSON.parse(
                decodeURIComponent(url.searchParams.get('response'))
            );
            // response = {
            //     resultCode: '',
            //     extInfo: {certifyId: ''}
            // }
        </script>
    </body>
</html>

ハッシュルーティング

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>タイトル</title>
    </head>
    <body>
        <script>
            // window.location.href を構成します：
            // window.location.href = https://aliyundoc.com/#/aaa/bbb

            // URL オブジェクトを初期化します
            var url = new URL(window.location.href);
            // 応答を解析します
            var response = JSON.parse(
                decodeURIComponent(url.searchParams.get('response'))
            );
            // response = {
            //     resultCode: '',
            //     extInfo: {certifyId: ''}
            // }
        </script>
    </body>
</html>

クライアント側の結果コード

結果コード	課金対象	説明
1000	はい	ユーザーは顔認証プロセスを完了し、推奨される認証結果は合格です。この結果は参照用です。CheckResult 操作を呼び出して、最終的な認証結果を取得し、さらに処理することができます。
1001	はい	ユーザーは顔認証プロセスを完了しましたが、推奨される認証結果は不合格です。この結果は参照用です。CheckResult 操作を呼び出して、最終的な認証結果を取得し、さらに処理することができます。
1002	いいえ	システムエラーが発生しました。
1003	いいえ	SDK の初期化に失敗しました。クライアント時刻が有効かどうかを確認してください。
1004	いいえ	カメラエラーが発生しました。エラーを修正するには、次の操作を実行します：認証前にアプリにカメラ権限があるかどうかを確認します。アプリにカメラ権限があるにもかかわらず、権限なしエラーが続く場合は、アプリのキャッシュをクリアして再試行してください。
1005	いいえ	ネットワークエラーが発生しました。
1006	いいえ	顧客が予期せず終了しました。
1007	いいえ	トランザクション ID が無効です。
1009	いいえ	クライアントのタイムスタンプが無効です。
1011	いいえ	指定されたドキュメントタイプが、送信されたドキュメントと一致しません。
1012	いいえ	ドキュメント検証後に重要な情報が欠落しているか、フォーマット検証に失敗しました。
1013	いいえ	画質が要件を満たしていません。
1014	いいえ	エラー数が上限を超えました。