Financial Intelligence Engine:Real ID のセルフィーガイダンスページのカスタマイズ

背景

RealId フローにはセルフィーガイダンスページがあり、お客様はこのページをカスタマイズする必要がある場合があります。このドキュメントでは、この目標を達成する方法を示します。

注: この記事は、ネイティブユーザー向けにセルフィーガイダンスページをカスタマイズするためのものです。 websdk セルフィガイダンスページのカスタマイズについては、「開発」->「モバイル Web(H5) モード統合」->「H5 統合」->「顔ガイド URL のカスタマイズ」をご参照ください。

概要

RealId 内で Web ページをカスタマイズするために必要な基本的な手順を以下に示します。

手順

1. Web ページを開発する

1.1 ZolozRealIdCore ライブラリを取得する

こちらから js ファイルをダウンロードします。次に、ファイルをプロジェクトに配置します。

1.2 ZolozRealIdCore をインポートする

import ZolozRealIdCore from './zoloz-realid-core';
const zolozRealIDCore = new ZolozRealIDCore(langPack);

1.3 言語パックを設定する

langPack は、ポップオーバーアラート内のコピーライティングをカスタマイズするために使用され、オプションです。全部で 9 つのキーがあり、それぞれシステムエラーアラート、ネットワークエラーアラート、リトライ最大アラートを表しています。デフォルトのコピーライティングは次のとおりです。

//デフォルト値
const langPack = {      
    system_error_title:"システムエラー",
    system_error_msg: '後でもう一度お試しください',
    system_error_got_it: '了解',
    network_error_title: 'インターネットに接続されていません',
    network_error_msg: 'インターネット接続を確認して、もう一度お試しください',
    network_error_got_it: '了解',
    fe_retry_max_title: '',
    fe_retry_max_msg:'申し訳ありませんが、認証試行に何度も失敗しました。後でもう一度お試しください。',
    fe_retry_max_got_it:'了解'
};

1.4 ページを終了する

たとえば、次のページに移動したり、戻ったりするなど、ページを終了する必要がある場合は、このメソッドを呼び出してページを終了する必要があります。

let response = await zolozRealIDCore.end(type,params);
//await zolozRealIDCore.end('next');

type パラメーターと params パラメーターはサーバー側で定義されます。

Type: 'next' | 'back' | 'error' | 'fail' | 'skip' | 'cancel'; 通常は「next」と「back」のみが必要です。

「next」の例:

const buttonClick = () => {
  // パラメーターが必要な場合は、追加してください
  const params = {};
    core.end('next',params);
}

「back」の例:

document.addEventListener('back', e => {
  // デフォルトの戻るイベントを回避し、コアにフローを制御させてください。
  e.preventDefault();
  core.end('back');
}, false);

1.5 ロギングを設定する

import {ekycLog} from './zoloz-realid-core';
ekycLog(seed,message);
//ekycLog('clickBack',{'onPage':'infoFill'});

これはリモートログに使用されます。 BI と一致する必要があります。

1.6 サンプルコード:

サンプル プロジェクト:

App.vue のコード:

<template>
    <div id="app">
        <div @click='takeSelfie'>
            次のページ
        </div>
    </div>
</template>

<script>
    import ZolozRealIdCore, {ekycLog} from '@/utils/zolozRealIdCore';

    export default {
        name: 'app',
        data() {
            return {
                enableNext: true,
                zolozRealIdCore: new ZolozRealIdCore({}),
            };
        },
        mounted() {
            ekycLog('faceGuidePageAppear', {});
            document.addEventListener('back', e => {
              e.preventDefault();
              ekycLog('clickButton', {
                'onPage': 'face_guide',
                'clickItem': 'back'
              });
              this.zolozRealIdCore.end('back');
            }, false);
        },
        methods: {
            async takeSelfie() {
              // 保護コード
              if(this.enableNext) {
                ekycLog('faceGuidePageProceed');
                this.enableNext = false;
                await this.zolozRealIdCore.end('next');
                this.enableNext = true;
              }
            }
        }
    }
</script>

<style>
</style

注

1. exports is not defined または *is not a constructorという問題が発生した場合は、ZolozRealIdCore が commonjs モジュールであることが原因であるため、babel.config.js を変更してください。

module.exports = {
  presets: [
    [
      '@vue/app',
      {
        modules:'commonjs'
      }
    ]
  ]
}

2. このカスタマイズされたページは iframe でホストされているため、お客様がこのページで複雑な関数を実装しようとすると、CORS 問題または権限問題が発生する可能性が非常に高くなります。純粋な 静的 ページの方がはるかに推奨されます。

2. Web ページをデプロイする

お客様は Web ページをどこにでもデプロイできます。パブリックネットワークからアクセスできることを確認してください。

3. Web ページを設定する

RealId を初期化するとき (サーバー側で)、URL をパラメーターとして渡します。URL は HTTPS である必要があることに注意してください。

{
    "bizId": "...",
    "userId": "...",
    "docType": "...",
    "pageConfig":{"urlFaceGuide":"https://カスタマイズされた Web ページへの URL.html"},
    "metaInfo": "..."
}

4. デフォルトのセルフィーガイダンスページを使用する (オプション)

RealId を初期化するとき (サーバー側で)、お客様は pageConfig に URL を渡すことにより、英語 (en)、簡体字中国語 (zh-CN)、繁体字中国語 (zh-HK) の 3 つの言語をサポートするデフォルトの Web ページを使用することもできます。

{
    "bizId": "...",
    "userId": "...",
    "docType": "...",
    "pageConfig":{"urlFaceGuide":"https://sg-production-cdn.zoloz.com/page/realid-lite-fe/faceGuide.html?locale=en"},
    "metaInfo": "..."
}

詳細については、RealId API をご参照ください。