ID_OCR_リダイレクトページ接続 - 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以降は、Google Chrome、Mozilla Firefox、Microsoft Edge、および Apple WKWebViewをサポートしています。
- Android: Chrome 60以降および Firefox 58以降を推奨します。サポートされているブラウザはデバイスによって異なります。
必要な権限: ネットワークとカメラ。メディアコレクションには HTTPS デプロイメントが必要です。
縦モード: 横モードでは、ページの操作に問題が発生する可能性があります。ページに表示される指示に従って、ユーザーに検証に縦モードを使用するように促すことをお勧めします。
互換性: ブラウザの互換性の断片化の問題があるため、プロセス設計で検証に推奨されるブラウザを使用するようにユーザーに促すことをお勧めします。
このソリューションをモバイルアプリに統合する場合、埋め込みブラウザが原因で互換性の問題が発生する可能性があります。互換性の問題を軽減するか、Native SDKを統合するには、アプリ内統合のための H5 モバイル SDK 互換性構成を参照できます。

重要

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

ドキュメント ID_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="en">
  <head>
    <title>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>
      // 初期化操作を呼び出すときにメタ情報を渡します。
      var MetaInfo = window.getMetaInfo();

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

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

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

ID Verification Web SDKは、TransactionUrlでパラメータを渡すことにより、クライアント側のカスタム機能をサポートしています。

& 文字を使用して 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	いいえ	単一の顔の生体検知のタイムアウト期間 (秒単位)。	30
clientLivenessRetryCount	String	いいえ	顔の生体検知の再試行回数。	5
ocrTimeout	String	いいえ	単一の OCR 検出のタイムアウト期間 (秒単位)。	20
ocrRetryCount	String	いいえ	OCR の再試行回数。	10
region	String	いいえ	モバイルクライアントがAlibaba Cloudに API リクエストを送信するリージョン。次のコードは、region 値とリージョンの間のマッピングを示しています。 `{ "HK": "Hong Kong", "US": "US East", "US-CA": "US West", "SG": "Singapore", "MY": "Malaysia", "ID": "Indonesia", "PH": "Philippines", "DE": "Germany", "SA": "Saudi Arabia" }` 説明このパラメータを渡して、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="en">
    <head>
        <meta charset="utf-8">
        <title>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: '',
            //     resultMessage: '',
            //     ocrResult: {code: '',reason: '', extInfo: {certifyId: ''}},
            //     faceResult: {code: '',subCode: '',reason: '', extInfo: {certifyId: ''}}
            // }
        </script>
    </body>
</html>

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

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>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: '',
            //     resultMessage: '',
            //     ocrResult: {code: '',reason: '', extInfo: {certifyId: ''}},
            //     faceResult: {code: '',subCode: '',reason: '', extInfo: {certifyId: ''}}
            // }
        </script>
    </body>
</html>

ページアンカー (#) を含む履歴ルーティング

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>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: '',
            //     resultMessage: '',
            //     ocrResult: {code: '',reason: '', extInfo: {certifyId: ''}},
            //     faceResult: {code: '',subCode: '',reason: '', extInfo: {certifyId: ''}}
            // }
        </script>
    </body>
</html>

ハッシュルーティング

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>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: '',
            //     resultMessage: '',
            //     ocrResult: {code: '',reason: '', extInfo: {certifyId: ''}},
            //     faceResult: {code: '',subCode: '',reason: '', extInfo: {certifyId: ''}}
            // }
        </script>
    </body>
</html>

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

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