eKYC_リダイレクト統合 - ID Verification - Alibaba Cloud ドキュメントセンター

ID Verification は、ブラウザまたは埋め込み WebView で eKYC リモート本人確認機能を実装するための Web SDK を提供します。このトピックでは、PC またはモバイルデバイスの H5 ページを使用して ID Verification と統合する方法について説明します。

前提条件

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

重要

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

eKYC の開始

コードに次の 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>

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

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
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
ページアンカー (#) のない History ルーティング	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
ページアンカー (#) のある History ルーティング	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>

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

<!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>

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

<!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	いいえ	エラーの数が上限を超えました。