@authme/identity-verification 2.8.3 → 2.8.5

package/index.cjs

@@ -32,6 +32,8 @@ require('core-js/modules/es.typed-array.fill.js');
 require('core-js/modules/es.typed-array.set.js');
 require('core-js/modules/es.typed-array.sort.js');
 require('core-js/modules/es.typed-array.to-locale-string.js');
+require('core-js/modules/es.string.pad-start.js');
+require('core-js/modules/es.regexp.constructor.js');
 require('core-js/modules/es.typed-array.uint8-array.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -109,7 +111,8 @@ const defaultLivenessConfig = {
   subtitle: null,
   uploadFullFrame: false,
   passive: false,
-  compareCustomerClientId: null
+  compareCustomerClientId: null,
+  deviceType: null
 };
 const defaultIdRecognitionConfig = {
   icon: DEFAULT_ICON_URI,
@@ -133,7 +136,8 @@ const defaultIdRecognitionConfig = {
   captureTimeout: -1,
   resultImageFormat: 'jpg',
   confirmPageEnabled: true,
-  isFraudIntroEnable: false
+  isFraudIntroEnable: false,
+  deviceType: null
 };
 
 function setCorrectViewHeight() {
@@ -27904,7 +27908,7 @@ const setStatusTextTop = params => {
   const _maskTop = maskTop !== null && maskTop !== void 0 ? maskTop : window.innerHeight / 2 - maskHeight / 2;
   const _maskBotton = _maskTop + maskHeight;
   titleTextPanel.style.top = `${_maskTop - MASK_STYLE.MASK_TITLE_MARGIN - MASK_STYLE.TITLE_TEXT_FONT_SIZE}px`;
-  statusTextPanel.style.top = `${_maskBotton + MASK_STYLE.MASK_TITLE_MARGIN}px`;
+  statusTextPanel.style.top = `${_maskBotton + MASK_STYLE.MASK_TITLE_MARGIN + 60}px`;
 };
 
 const limitFPS = fps => {
@@ -27923,7 +27927,9 @@ const limitFPS = fps => {
 };
 const sendFrame = (canvasSizeInfo, canvas, video, frameCallback, fps, bas64Format, imageType, cardType, flags, type) => source$ => {
   let received = true;
-  const ctx = canvas.getContext('2d');
+  const ctx = canvas.getContext('2d', {
+    willReadFrequently: true
+  });
   return source$.pipe(rxjs.mergeMap(() => rxjs.animationFrames().pipe(limitFPS(fps), rxjs.filter(() => received && !(flags === null || flags === void 0 ? void 0 : flags.animating)), rxjs.tap(() => received = false), rxjs.tap(() => util.clearCanvas(canvas)), rxjs.map(() => util.getImageData(canvas, ctx, video, canvasSizeInfo, bas64Format, imageType)), rxjs.mergeMap(imageData => rxjs.from(frameCallback(imageData.data, imageData.base64, cardType, type)).pipe(rxjs.catchError(e => {
     // send to fast, ignore
     if (e instanceof core.AuthmeError && e.code === core.ErrorCode.RECOGNITION_NOT_AVAILABLE) {
@@ -28232,7 +28238,6 @@ function startLiveness(config) {
     // }
     function makeSDKFlowTimeout(expiredIn) {
       return rxjs.timer(expiredIn * util.TIME_UNIT.SECOND).pipe(rxjs.switchMap(() => new rxjs.Observable(observer => {
-        console.log('makeSDKFlowTimeout observer');
         config.onDestroy();
         popupView({
           title: translateService.translate('sdk.general.error.timeout.title'),
@@ -28767,7 +28772,6 @@ const renderCameraSwitch = config => {
 };
 const renderOCRUI = config => {
   const uiThemeConfig = util.Storage.getItem('themeConfig');
-  console.log('uiThemeConfig', uiThemeConfig);
   const translateService = core.getTranslateInstance();
   const createTextPanel = () => {
     const ele = document.createElement('div');
@@ -29922,7 +29926,9 @@ const imageDataToBase64 = (data, width, height, mimeType = 'image/png') => {
   const canvas = document.createElement('canvas');
   canvas.width = width;
   canvas.height = height;
-  const ctx = canvas.getContext('2d');
+  const ctx = canvas.getContext('2d', {
+    willReadFrequently: true
+  });
   // 2. 建立 ImageData，填充像素數據
   const imgData = ctx.createImageData(width, height);
   imgData.data.set(new Uint8ClampedArray(data)); // 確保格式正確
@@ -29934,7 +29940,9 @@ const videoToBase64 = (video, sizeInfo) => __awaiter(void 0, void 0, void 0, fun
   const canvas = document.createElement('canvas');
   canvas.width = sizeInfo.canvasWidth;
   canvas.height = sizeInfo.canvasHeight;
-  const ctx = canvas.getContext('2d');
+  const ctx = canvas.getContext('2d', {
+    willReadFrequently: true
+  });
   if (!ctx) {
     throw new Error('Failed to get 2d context from canvas');
   }
@@ -30350,7 +30358,6 @@ const toast = arg => {
 };
 
 const confirmPopup = arg => {
-  console.log('confirmPopup', arg);
   const authmeContainer = document.querySelector('.authme-container');
   if (!authmeContainer) {
     console.error('confirmPopup: authmeContainer not found');
@@ -30542,6 +30549,343 @@ const fraudScanIntroPage = arg => {
   authmeContainer.appendChild(domModal);
 };
 
+const ocrResultModal = arg => {
+  let modifiedDetails = {};
+  const authmeContainer = document.querySelector('.authme-container');
+  if (!authmeContainer) {
+    console.error('modal: authmeContainer not found');
+    return;
+  }
+  const translateService = core.getTranslateInstance();
+  const uiThemeConfig = util.Storage.getItem('themeConfig');
+  function removeOcrResultModal() {
+    var _a;
+    (_a = document.querySelector('.video-container__ocrResultModal')) === null || _a === void 0 ? void 0 : _a.remove();
+  }
+  function formatTime(seconds) {
+    const m = Math.floor(seconds % 3600 / 60);
+    const s = seconds % 60;
+    return [m, s].map(unit => String(unit).padStart(2, '0')).join(':');
+  }
+  function groupInput({
+    name,
+    label,
+    value
+  }) {
+    const domGroupItem = document.createElement('div');
+    domGroupItem.classList.add('video-container__ocrResultModal-group-item');
+    domGroupItem.id = name;
+    const domLabel = document.createElement('label');
+    const domInput = document.createElement('input');
+    const domError = document.createElement('div');
+    domLabel.classList.add('video-container__ocrResultModal-label');
+    domInput.classList.add('video-container__ocrResultModal-input');
+    domError.classList.add('video-container__ocrResultModal-error');
+    domError.classList.add('hidden');
+    domLabel.innerText = `${label}`;
+    domInput.type = 'text';
+    domInput.value = value;
+    domError.innerText = `${label}格式不符`;
+    domInput.addEventListener('input', () => {
+      validateFields() ? btnConfirmStatus(false) : btnConfirmStatus(true);
+      // btnConfirmStatus(Object.values(validateMap).some((i: any) => i.validate === false));
+    });
+
+    domGroupItem.appendChild(domLabel);
+    domGroupItem.appendChild(domInput);
+    domGroupItem.appendChild(domError);
+    return domGroupItem;
+  }
+  function groupDropMenu({
+    name,
+    label,
+    value,
+    selections
+  }) {
+    const domGroupItem = document.createElement('div');
+    domGroupItem.classList.add('video-container__ocrResultModal-group-item');
+    domGroupItem.id = name;
+    const domLabel = document.createElement('label');
+    domLabel.classList.add('video-container__ocrResultModal-label');
+    domLabel.innerText = `${label}`;
+    const domDropMenu = document.createElement('div');
+    domDropMenu.classList.add('drop_menu_container');
+    const domDropMenuTitle = document.createElement('div');
+    domDropMenuTitle.classList.add('drop_menu_title');
+    domDropMenuTitle.setAttribute('data-value', value);
+    domDropMenuTitle.innerHTML = `<span class="ellipsis">${selections.find(i => i.value === value) ? selections.find(i => i.value === value).name : '請選擇'}</span>
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 7L10.07 14L17 7" stroke="#343434" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+    const domError = document.createElement('div');
+    domError.classList.add('video-container__ocrResultModal-error');
+    domError.classList.add('hidden');
+    domError.innerText = `${label}格式不符`;
+    let domDropMenuCancel = null;
+    if (window.innerWidth < 1440) {
+      // mobile
+      domDropMenuCancel = document.createElement('div');
+      domDropMenuCancel.classList.add('drop_menu_cancel');
+      domDropMenuCancel.innerText = arg.cancelText;
+    }
+    const domDropMenuulSection = document.createElement('section');
+    domDropMenuulSection.classList.add('drop_menu_ul_section');
+    const domDropMenuUlContainer = document.createElement('div');
+    domDropMenuUlContainer.classList.add('drop_menu_ul_container');
+    const domDropMenuUl = document.createElement('ul');
+    domDropMenuulSection.classList.add('hide');
+    selections.forEach(selection => {
+      const domDropMenuLi = document.createElement('li');
+      domDropMenuLi.classList.add('drop_menu_item');
+      if (selection.value === value) {
+        domDropMenuLi.classList.add('active');
+      }
+      domDropMenuLi.setAttribute('data-value', selection.value);
+      domDropMenuLi.innerHTML = `<span>${selection.name}</span>`;
+      domDropMenuUl.appendChild(domDropMenuLi);
+    });
+    domDropMenu.appendChild(domDropMenuTitle);
+    domDropMenuUlContainer.appendChild(domDropMenuUl);
+    if (domDropMenuCancel) {
+      domDropMenuUlContainer.appendChild(domDropMenuCancel);
+    }
+    domDropMenuulSection.appendChild(domDropMenuUlContainer);
+    domDropMenu.appendChild(domDropMenuulSection);
+    util.dropMenu(domDropMenu, dom => {
+      domDropMenuTitle.setAttribute('data-value', dom.getAttribute('data-value'));
+      validateFields() ? btnConfirmStatus(false) : btnConfirmStatus(true);
+    });
+    domGroupItem.appendChild(domLabel);
+    domGroupItem.appendChild(domDropMenu);
+    domGroupItem.appendChild(domError);
+    return domGroupItem;
+  }
+  function formatDate(dateString, format) {
+    // 解析日期字串為 Date 物件
+    const date = new Date(dateString);
+    const year = date.getFullYear(); // 取得年份
+    const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 取得月份並補齊兩位
+    const day = date.getDate().toString().padStart(2, '0'); // 取得日期並補齊兩位
+    // 根據傳入的 format 來替換字串
+    return format.replace('YYYY', year.toString()) // 替換 "YYYY" 為年份
+    .replace('yyyy', year.toString()) // 替換 "yyyy" 為年份
+    .replace('MM', month) // 替換 "MM" 為月份
+    .replace('dd', day) // 替換 "dd" 為日期
+    .replace('yyyy', year.toString()); // 處理 "yyyy" 格式
+  }
+
+  function isValidDateFormat(dateStr) {
+    const regex = /^\d{4}\/(0[1-9]|1[0-2])\/(0[1-9]|[12]\d|3[01])$/;
+    return regex.test(dateStr);
+  }
+  function checkModifiedData() {
+    const items = domModal.querySelectorAll('.video-container__ocrResultModal-group-item');
+    items.forEach(item => {
+      const input = item.querySelector('input');
+      if (input) {
+        const key = item.id;
+        const value = input.value;
+        let valueOrigin = arg.items.find(i => i.name === key).value;
+        const dateFormat = arg.items.find(i => i.name === key).dateFormat;
+        if (dateFormat) {
+          valueOrigin = formatDate(valueOrigin, dateFormat);
+        }
+        modifiedDetails[key] = {
+          isModified: value !== valueOrigin ? true : false,
+          value
+        };
+      } else if (item.querySelector('.drop_menu_title')) {
+        // drop menu
+        const key = item.id;
+        const value = item.querySelector('.drop_menu_title').getAttribute('data-value');
+        const valueOrigin = arg.items.find(i => i.name === key).value;
+        modifiedDetails[key] = {
+          isModified: value !== valueOrigin ? true : false,
+          value
+        };
+      }
+    });
+  }
+  function btnConfirmStatus(flag) {
+    domConfirm.disabled = flag;
+    util.uiThemeButton(domConfirm, uiThemeConfig.majorButton, flag);
+  }
+  function validateFields() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    for (const key in validateMap) {
+      const item = validateMap[key];
+      const domItem = domModal.querySelector(`#${key}`);
+      if (domItem) {
+        const input = domItem.querySelector('input');
+        if (input && item.regex) {
+          if (item.regex.test(input.value)) {
+            item.validate = true;
+            (_a = domItem.querySelector('.video-container__ocrResultModal-input')) === null || _a === void 0 ? void 0 : _a.classList.remove('error');
+            (_b = domItem.querySelector('.video-container__ocrResultModal-error')) === null || _b === void 0 ? void 0 : _b.classList.add('hidden');
+          } else {
+            item.validate = false;
+            (_c = domItem.querySelector('.video-container__ocrResultModal-input')) === null || _c === void 0 ? void 0 : _c.classList.add('error');
+            (_d = domItem.querySelector('.video-container__ocrResultModal-error')) === null || _d === void 0 ? void 0 : _d.classList.remove('hidden');
+          }
+        } else if (item.regex) {
+          // drop menu
+          const domDropMenu = domItem.querySelector('.drop_menu_title');
+          if (domDropMenu) {
+            if (domDropMenu.getAttribute('data-value') !== '') {
+              item.validate = true;
+              domDropMenu.classList.remove('error');
+              (_e = domItem.querySelector('.video-container__ocrResultModal-error')) === null || _e === void 0 ? void 0 : _e.classList.add('hidden');
+            } else {
+              item.validate = false;
+              domDropMenu.classList.add('error');
+              (_f = domItem.querySelector('.video-container__ocrResultModal-error')) === null || _f === void 0 ? void 0 : _f.classList.remove('hidden');
+            }
+          }
+        } else if (input && item.dateFormat) {
+          if (isValidDateFormat(input.value)) {
+            // if (item.dateFormat.test(input.value)) {
+            item.validate = true;
+            (_g = domItem.querySelector('.video-container__ocrResultModal-input')) === null || _g === void 0 ? void 0 : _g.classList.remove('error');
+            (_h = domItem.querySelector('.video-container__ocrResultModal-error')) === null || _h === void 0 ? void 0 : _h.classList.add('hidden');
+          } else {
+            item.validate = false;
+            (_j = domItem.querySelector('.video-container__ocrResultModal-input')) === null || _j === void 0 ? void 0 : _j.classList.add('error');
+            (_k = domItem.querySelector('.video-container__ocrResultModal-error')) === null || _k === void 0 ? void 0 : _k.classList.remove('hidden');
+          }
+        }
+      }
+    }
+    const isPass = Object.values(validateMap).every(item => item.validate === true);
+    return isPass;
+  }
+  modifiedDetails = arg.items.reduce((acc, item) => {
+    acc[item.name] = {
+      isModified: false,
+      value: item.value
+    };
+    return acc;
+  }, {});
+  let timer = Math.floor((arg.countDownTime - new Date().getTime()) / 1000);
+  const validateMap = {};
+  const domModal = document.createElement('div');
+  const domHeaderContainer = document.createElement('div');
+  const domBodyContainer = document.createElement('div');
+  const domBody = document.createElement('div');
+  const domTitle = document.createElement('div');
+  const domSubtitle = document.createElement('div');
+  const domFooterContainer = document.createElement('div');
+  const domCountDownContainer = document.createElement('div');
+  const domCountDown = document.createElement('div');
+  const domHint = document.createElement('div');
+  const domClose = document.createElement('div');
+  const domConfirm = document.createElement('button');
+  domModal.classList.add('video-container__ocrResultModal');
+  domHeaderContainer.classList.add('video-container__ocrResultModal-header-container');
+  domBodyContainer.classList.add('video-container__ocrResultModal-body-container');
+  domBody.classList.add('video-container__ocrResultModal-body');
+  domTitle.classList.add('video-container__ocrResultModal-title');
+  domSubtitle.classList.add('video-container__ocrResultModal-subtitle');
+  domFooterContainer.classList.add('video-container__ocrResultModal-footer-container');
+  domCountDownContainer.classList.add('video-container__ocrResultModal-countdown-container');
+  domCountDown.classList.add('video-container__ocrResultModal-countdown');
+  domHint.classList.add('video-container__ocrResultModal-hint');
+  domClose.classList.add('video-container__ocrResultModal-close');
+  domConfirm.classList.add('video-container__ocrResultModal-confirm');
+  btnConfirmStatus(true);
+  // uiThemeButton(domConfirm, uiThemeConfig.majorButton);
+  util.uiThemeText(domTitle, uiThemeConfig.resultTitle);
+  util.uiThemeText(domSubtitle, uiThemeConfig.resultBody);
+  domTitle.innerText = arg.title;
+  domSubtitle.innerText = arg.subtitle;
+  domHint.innerHTML = arg.hintText;
+  domCountDownContainer.innerHTML = `${arg.countDown1Text} <span class="video-container__ocrResultModal-countdown" style="color: ${uiThemeConfig.resultTime};font-size:${uiThemeConfig.fontSize}px;font-weight:${util.fontWeight[uiThemeConfig.textWeight]}"> ${formatTime(timer)} </span> ${arg.countDown2Text}`;
+  domConfirm.innerText = arg.confirmText;
+  domClose.innerHTML = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.1943 6.41714C19.6393 5.97216 19.6393 5.2507 19.1943 4.80571C18.7493 4.36073 18.0278 4.36073 17.5829 4.80571L12 10.3886L6.41714 4.80572C5.97216 4.36073 5.2507 4.36073 4.80571 4.80571C4.36073 5.2507 4.36073 5.97216 4.80571 6.41714L10.3886 12L4.80571 17.5829C4.36073 18.0278 4.36073 18.7493 4.80571 19.1943C5.2507 19.6393 5.97216 19.6393 6.41714 19.1943L12 13.6114L17.5829 19.1943C18.0278 19.6393 18.7493 19.6393 19.1943 19.1943C19.6393 18.7493 19.6393 18.0278 19.1943 17.5829L13.6114 12L19.1943 6.41714Z" fill="${uiThemeConfig.nonEkycCloseButton.contentColor}" fill-opacity="${uiThemeConfig.nonEkycCloseButton.contentOpacity}" /></svg>`;
+  const countdownInterval = setInterval(() => {
+    timer -= 1;
+    const countdownEl = domModal.querySelector('.video-container__ocrResultModal-countdown');
+    if (countdownEl) {
+      countdownEl.innerHTML = formatTime(timer);
+    }
+    if (timer <= 0) {
+      clearInterval(countdownInterval);
+    }
+  }, 1000);
+  // form start
+  arg.items.sort((a, b) => {
+    var _a, _b;
+    return ((_a = a.order) !== null && _a !== void 0 ? _a : Infinity) - ((_b = b.order) !== null && _b !== void 0 ? _b : Infinity);
+  });
+  arg.items.forEach(item => {
+    // init validateMap
+    if (item.regex) {
+      validateMap[item.name] = {
+        validate: false,
+        regex: new RegExp(item.regex.slice(1, -1))
+      };
+    } else if (item.selections) {
+      validateMap[item.name] = {
+        validate: false,
+        regex: /\S+/
+      };
+    } else if (item.dateFormat) {
+      validateMap[item.name] = {
+        validate: false,
+        dateFormat: new RegExp(item.dateFormat.slice(1, -1))
+      };
+    }
+    // init UI
+    if (!item.hidden) {
+      if (item.selections) {
+        const domDropMenu = groupDropMenu({
+          name: item.name,
+          label: item.name === 'issueReason' ? translateService.translate('sdk.ocr.verify.result.issueType') : translateService.translate(`sdk.ocr.verify.result.${item.name}`),
+          value: item.value,
+          selections: item.selections
+        });
+        domBody.appendChild(domDropMenu);
+      } else {
+        const domGroupItem = groupInput({
+          name: item.name,
+          label: item.name === 'issueReason' ? translateService.translate('sdk.ocr.verify.result.issueType') : translateService.translate(`sdk.ocr.verify.result.${item.name}`),
+          value: item.dateFormat ? formatDate(item.value, item.dateFormat) : item.value
+        });
+        domBody.appendChild(domGroupItem);
+      }
+    }
+  });
+  // form end
+  domHeaderContainer.appendChild(domTitle);
+  domHeaderContainer.appendChild(domSubtitle);
+  domModal.appendChild(domHeaderContainer);
+  domModal.appendChild(domClose);
+  domModal.appendChild(domBodyContainer);
+  // domBodyContainer.appendChild(domTitle);
+  // domBodyContainer.appendChild(domSubtitle);
+  domBodyContainer.appendChild(domBody);
+  domModal.appendChild(domFooterContainer);
+  domFooterContainer.appendChild(domCountDownContainer);
+  domFooterContainer.appendChild(domHint);
+  domFooterContainer.appendChild(domConfirm);
+  authmeContainer.appendChild(domModal);
+  validateFields() ? btnConfirmStatus(false) : btnConfirmStatus(true);
+  return new Promise(resolve => {
+    domClose.addEventListener('click', () => __awaiter(void 0, void 0, void 0, function* () {
+      if (arg.onClose) {
+        yield arg.onClose();
+      }
+      removeOcrResultModal();
+      resolve('close');
+    }));
+    domConfirm.addEventListener('click', () => __awaiter(void 0, void 0, void 0, function* () {
+      checkModifiedData();
+      if (arg.onConfirm) {
+        yield arg.onConfirm(modifiedDetails);
+      }
+      removeOcrResultModal();
+      resolve(modifiedDetails);
+    }));
+  });
+};
+
 const initEvenTrackingStatus = ocrConfig => {
   setFeature$1(ocrConfig.needAntiFraud ? core.Feature.OCRFraud : core.Feature.OCR);
 };
@@ -30552,6 +30896,7 @@ function startOCR(config) {
     const timeout$ = new rxjs.Subject();
     // let sdkFlowTimeout: NodeJS.Timeout;
     let sdkFlowTimeout = null;
+    let countDownTime = 0;
     let deviceMetas;
     // anti fraud
     let currentAntiFraudStage;
@@ -30781,7 +31126,6 @@ function startOCR(config) {
     // }
     function makeSDKFlowTimeout(expiredIn) {
       return rxjs.timer(expiredIn * util.TIME_UNIT.SECOND).pipe(rxjs.switchMap(() => new rxjs.Observable(observer => {
-        console.log('makeSDKFlowTimeout observer');
         config.onDestroy();
         popupView({
           title: translateService.translate('sdk.general.error.timeout.title'),
@@ -30935,6 +31279,7 @@ function startOCR(config) {
           buttonDisable$(cardMatchROI);
         }
         if (ocrEngineConfig.expiredIn && !sdkFlowTimeout) {
+          countDownTime = new Date().getTime() + ocrEngineConfig.expiredIn * util.TIME_UNIT.SECOND;
           sdkFlowTimeout = makeSDKFlowTimeout(ocrEngineConfig.expiredIn);
         }
       })), sendFrame(canvasSizeInfo, uiComponentOCR.image, uiComponentBasic.video, config.onAntiFraudFrame, ocrEngineConfig.fraudMaxFps, false, 'jpg', undefined), rxjs.map(x => x.result), rxjs.tap(x => {
@@ -31172,7 +31517,9 @@ function startOCR(config) {
       let ocrSendFrameAnimation = false;
       const handleOcrSendFrame = (canvasSizeInfo, canvas, video, frameCallback, fps, bas64Format, imageType, cardType, type) => source$ => {
         let received = true;
-        const ctx = canvas.getContext('2d');
+        const ctx = canvas.getContext('2d', {
+          willReadFrequently: true
+        });
         return source$.pipe(rxjs.mergeMap(() => rxjs.animationFrames().pipe(limitFPS(fps), rxjs.filter(() => received && !ocrSendFrameAnimation), rxjs.tap(() => received = false), rxjs.tap(() => util.clearCanvas(canvas)), rxjs.map(() => util.getImageData(canvas, ctx, video, canvasSizeInfo, bas64Format, imageType)), rxjs.mergeMap(imageData => rxjs.from(frameCallback(imageData.data, imageData.base64, cardType, type)).pipe(rxjs.catchError(e => {
           // send to fast, ignore
           if (e instanceof core.AuthmeError && e.code === core.ErrorCode.RECOGNITION_NOT_AVAILABLE) {
@@ -31240,6 +31587,7 @@ function startOCR(config) {
         return init(retry).pipe(rxjs.tap(() => {
           setStatusView(core.StatusView.Running);
           if (ocrEngineConfig.expiredIn && !sdkFlowTimeout) {
+            countDownTime = new Date().getTime() + ocrEngineConfig.expiredIn * util.TIME_UNIT.SECOND;
             sdkFlowTimeout = makeSDKFlowTimeout(ocrEngineConfig.expiredIn);
           }
         }), rxjs.switchMap(canvasSizeInfo => {
@@ -31430,26 +31778,66 @@ function startOCR(config) {
       }), rxjs.switchMap(() => config.onSuccess()), rxjs.tap(() => {
         setStatusEvent$1(cardClassResultMapping(config.acceptTypes[config.acceptTypes.length - 1]));
         util.stopSpinner();
-        uiComponentBasic.container.style.display = 'none';
+        // only for TWN IDCard handle ocr result page
+        if (config.cardTypes[0].includes(idRecognition.IdRecognitionCardType.IDCard) && config.cardTypes[0].includes(idRecognition.CountryCode.TWN)) ; else {
+          uiComponentBasic.container.style.display = 'none';
+        }
       }), rxjs.concatMap(result => __awaiter(this, void 0, void 0, function* () {
         setStatusView(core.StatusView.Confirm);
         let modifiedData = result2ModifiedData(result.details);
         if (config.ocrConfig.displayResultPage) {
-          modifiedData = yield renderConfirmUI({
-            cardType: config.ocrConfig.type,
-            items: {
-              columns: Object.keys(result.details).sort((a, b) => {
-                const aScore = idRecognition.getRecognitionColumnOrder(a);
-                const bScore = idRecognition.getRecognitionColumnOrder(b);
-                return aScore - bScore || a.localeCompare(b);
-              }),
-              details: result.details
-            },
-            options: {
-              headerIcon: config.ocrConfig.icon,
-              translate: key => translateService.translate(key)
+          // only for TWN IDCard
+          if (config.cardTypes[0].includes(idRecognition.IdRecognitionCardType.IDCard) && config.cardTypes[0].includes(idRecognition.CountryCode.TWN)) {
+            const keyMapping = {
+              [idRecognition.IdRecognitionCardType.IDCard]: 'idCard',
+              [idRecognition.IdRecognitionCardType.DriverLicense]: 'driverLicense',
+              [idRecognition.IdRecognitionCardType.HealthCard]: 'HealthCard',
+              [idRecognition.IdRecognitionCardType.ResidentCard]: 'residentCard',
+              [idRecognition.IdRecognitionCardType.Passport]: 'passport'
+            };
+            const res = yield ocrResultModal({
+              title: `${'請確認'}${translateService.translate(config.ocrConfig.type ? `sdk.ocr.verify.result.title.${keyMapping[config.ocrConfig.type]}` : '')}`,
+              subtitle: '若資料有錯誤，可點擊內容進行修改',
+              items: result.ocrResultFilds,
+              confirmText: translateService.translate('sdk.general.confirm'),
+              hintText: '逾時將自動轉跳至選單頁並無法保存此次紀錄',
+              countDown1Text: '請在',
+              countDown2Text: '內完成確認',
+              countDownTime,
+              cancelText: translateService.translate('sdk.general.cancel'),
+              onConfirm: result => {
+                modifiedData = result;
+              },
+              onClose: () => {
+                // console.log('onClose');
+              }
+            });
+            if (res === 'close') {
+              const cancelResultObj = {
+                isSuccess: false,
+                code: `${core.ErrorCode.USER_CANCEL}`,
+                message: new core.AuthmeError(core.ErrorCode.USER_CANCEL).message,
+                data: {}
+              };
+              return cancelResultObj;
             }
-          });
+          } else {
+            modifiedData = yield renderConfirmUI({
+              cardType: config.ocrConfig.type,
+              items: {
+                columns: Object.keys(result.details).sort((a, b) => {
+                  const aScore = idRecognition.getRecognitionColumnOrder(a);
+                  const bScore = idRecognition.getRecognitionColumnOrder(b);
+                  return aScore - bScore || a.localeCompare(b);
+                }),
+                details: result.details
+              },
+              options: {
+                headerIcon: config.ocrConfig.icon,
+                translate: key => translateService.translate(key)
+              }
+            });
+          }
         }
         flags.onConfirm = true;
         util.Storage.setItem('scanId', result.scanId);
@@ -31883,6 +32271,7 @@ function startOCR(config) {
           sdkFlowTimeout.unsubscribe();
           sdkFlowTimeout = null;
         }
+        countDownTime = 0;
         eventListenerService$1.stop();
         util.hidePopup();
         uiComponentBasic.container.remove();
@@ -32376,7 +32765,9 @@ class LivenessVerifyModule {
             const result = yield this.fasService.recognition(data);
             if (this.canvas) {
               const debugData = yield (_c = this.fasService) === null || _c === void 0 ? void 0 : _c.getDebugImageData(data);
-              const ctx = this.canvas.getContext('2d');
+              const ctx = this.canvas.getContext('2d', {
+                willReadFrequently: true
+              });
               this.canvas.width = frameWidth;
               this.canvas.height = frameHeight;
               ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -32563,7 +32954,7 @@ class LivenessModule {
       try {
         const result = yield rxjs.firstValueFrom(yield startLiveness({
           getOptionConfig: () => __awaiter(this, void 0, void 0, function* () {
-            const res = yield liveness.LivenessAPI.IdentityVerification.option();
+            const res = yield liveness.LivenessAPI.IdentityVerification.option(config.deviceType);
             const themeId = res.themeId;
             if (!themeId) {
               return {};
@@ -32623,7 +33014,9 @@ class LivenessModule {
             const result = yield this.fasService.recognition(data);
             if (this.canvas) {
               const debugData = yield (_b = this.fasService) === null || _b === void 0 ? void 0 : _b.getDebugImageData(data);
-              const ctx = this.canvas.getContext('2d');
+              const ctx = this.canvas.getContext('2d', {
+                willReadFrequently: true
+              });
               this.canvas.width = frameWidth;
               this.canvas.height = frameHeight;
               ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -33121,7 +33514,9 @@ class MRZModule {
             const mrzResult = yield this.mrzService.recognition(data);
             if (this.canvas) {
               const debugData = yield (_d = this.mrzService) === null || _d === void 0 ? void 0 : _d.getDebugImageData(data);
-              const ctx = this.canvas.getContext('2d');
+              const ctx = this.canvas.getContext('2d', {
+                willReadFrequently: true
+              });
               this.canvas.width = frameWidth;
               this.canvas.height = frameHeight;
               ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -33282,7 +33677,8 @@ class MRZModule {
             yield util.waitTime(1000);
             return {
               scanId: scanId,
-              details: latestTField !== null && latestTField !== void 0 ? latestTField : {}
+              details: latestTField !== null && latestTField !== void 0 ? latestTField : {},
+              ocrResultFilds: []
             };
           }),
           onDestroy: () => __awaiter(this, void 0, void 0, function* () {
@@ -33535,6 +33931,7 @@ class OCRModule {
       let backImage = null;
       let frontCropImage = null;
       let backCropImage = null;
+      let ocrResultFilds = [];
       const {
         getDebugLogsLength,
         modifyDeubgLog,
@@ -33624,8 +34021,7 @@ class OCRModule {
           cardTypeConfigs: cardTypeConfigs,
           ocrConfig: config,
           getOptionConfig: () => __awaiter(this, void 0, void 0, function* () {
-            const res = yield idRecognition.option();
-            console.log('themeId:', res.themeId);
+            const res = yield idRecognition.option(config.deviceType);
             const themeId = res.themeId;
             if (!themeId) {
               return {};
@@ -34056,7 +34452,9 @@ class OCRModule {
             }
             if (this.canvas) {
               const debugData = yield (_f = this.antiFraudInstance) === null || _f === void 0 ? void 0 : _f.getDebugImageData(data);
-              const ctx = this.canvas.getContext('2d');
+              const ctx = this.canvas.getContext('2d', {
+                willReadFrequently: true
+              });
               this.canvas.width = frameWidth;
               this.canvas.height = frameHeight;
               ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -34183,7 +34581,9 @@ class OCRModule {
             });
             if (this.canvas) {
               const debugData = yield _service === null || _service === void 0 ? void 0 : _service.getDebugImageData(data);
-              const ctx = this.canvas.getContext('2d');
+              const ctx = this.canvas.getContext('2d', {
+                willReadFrequently: true
+              });
               this.canvas.width = frameWidth;
               this.canvas.height = frameHeight;
               ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -34222,7 +34622,6 @@ class OCRModule {
               // downloadImage(image, `${frameIndex}-${docInfos[type as EAuthMeCardClass].docId}-${new Date().getTime().toString()}.jpg`)
               frameIndex++;
               util.backgroundRequest(() => __awaiter(this, void 0, void 0, function* () {
-                console.log('recognition', docInfos[cardType !== null && cardType !== void 0 ? cardType : ''].docId);
                 if (docInfos[eClass].docId === '') {
                   console.warn('didnt find docid, retry');
                   return false;
@@ -34381,7 +34780,7 @@ class OCRModule {
                 throw 'recognition failed';
               }
               result = unionMerge(result, resp && resp.details || {});
-              yield SendRequestWithRetry(() => __awaiter(this, void 0, void 0, function* () {
+              const res = yield SendRequestWithRetry(() => __awaiter(this, void 0, void 0, function* () {
                 const postData = {
                   scanDocumentId: docId,
                   details: resp === null || resp === void 0 ? void 0 : resp.details,
@@ -34402,7 +34801,11 @@ class OCRModule {
               //   needFraudOption ? this.fraudResult : null
               // )
               );
-
+              // ocrResultFilds = res.fields.concat(ocrResultFilds);
+              ocrResultFilds = ocrResultFilds.map(item1 => {
+                const item2 = res.fields.find(item => item.name === item1.name);
+                return item2 ? Object.assign(Object.assign({}, item1), item2) : item1;
+              }).concat(res.fields.filter(item2 => !ocrResultFilds.some(item1 => item1.name === item2.name)));
               delete docInfos[option.cardType];
               return true;
             } catch (error) {
@@ -34578,7 +34981,9 @@ class OCRModule {
             }
             if (this.canvas) {
               const debugData = yield (_j = this.antiFraudInstance) === null || _j === void 0 ? void 0 : _j.getDebugImageData(data);
-              const ctx = this.canvas.getContext('2d');
+              const ctx = this.canvas.getContext('2d', {
+                willReadFrequently: true
+              });
               this.canvas.width = frameWidth;
               this.canvas.height = frameHeight;
               ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -34725,7 +35130,8 @@ class OCRModule {
               frontImage,
               backImage,
               frontCropImage,
-              backCropImage
+              backCropImage,
+              ocrResultFilds
             };
           }),
           onDestroy: () => __awaiter(this, void 0, void 0, function* () {
@@ -34787,7 +35193,7 @@ function renderCardTypeAndCountryConfig(config) {
     currentCardTypeAndCountry = Object.assign(Object.assign({}, currentCardTypeAndCountry), {
       country
     });
-    countrySelectDropdownText.innerText = translate(`sdk.home.selectCountry.${country}`);
+    countrySelectDropdownText.innerText = translate(`sdk.general.country.${country}`);
   };
   const dropdownSwitch = switchTarget => {
     const closeDropdown = () => {
@@ -34824,7 +35230,7 @@ function renderCardTypeAndCountryConfig(config) {
         <label class="country-select-label">${translate('sdk.home.selectCountry')}</label>
         <div class="country-select-dropdown">
           <div class="country-select-dropdown-frame">
-            <div class="country-select-dropdown-text">${translate(`sdk.home.selectCountry.${config.defaultCountry}`)}</div>
+            <div class="country-select-dropdown-text">${translate(`sdk.general.country.${config.defaultCountry}`)}</div>
             <div class="country-select-dropdown-icon"></div>
           </div>
           <div class="dropdown-country-list"></div>
@@ -34855,7 +35261,7 @@ function renderCardTypeAndCountryConfig(config) {
       countryDom.classList.add('dropdown-country-list-item');
       countryDom.innerHTML = `
           <div class="dropdown-country-list-item-frame">
-            <div class="dropdown-country-list-item-text">${translate(`sdk.home.selectCountry.${country}`)}</div>
+            <div class="dropdown-country-list-item-text">${translate(`sdk.general.country.${country}`)}</div>
           </div>
           `;
       countryDom.addEventListener('click', event => {
@@ -34960,6 +35366,7 @@ class AuthmeIdentityVerification extends engine.AuthmeFunctionModule {
     super(...arguments);
     this.isAuth = false;
     this.tearDownPromise = undefined;
+    this.DEVICE_TYPE = util.DEVICE_TYPE;
   }
   // livenessVerify 可能是過時的產物，暫時不支援 LIVENESS_VERIFY module。
   preloadAsync(modules) {
@@ -35242,8 +35649,8 @@ class AuthmeIdentityVerification extends engine.AuthmeFunctionModule {
 }
 
 var name = "authme/sdk";
-var version$1 = "2.8.3";
-var date = "2025-03-05T06:16:55+0000";
+var version$1 = "2.8.5";
+var date = "2025-03-17T05:56:00+0000";
 var packageInfo = {
 	name: name,
 	version: version$1,