跳到主要内容

实现

startOcr 函数会打开原生的证件采集流程，将图像发送至 QI Tech 的 OCR API，并返回已处理图像的密钥。

Mobile Token​

我们使用 Mobile Token 让您的应用以已认证的方式访问我们的 API。它通常已经通过邮件发送给您。如果您尚未收到您的 token，请发送邮件至 suporte.caas@qitech.com.br。

注意

每个环境（SANDBOX 和 PRODUCTION）需要不同的 Mobile Token。

函数签名​

const result = await startOcr(
  environment,   // CAAS_ENVIRONMENT
  mobile_token,  // string
  document,      // CAAS_DOCUMENT_TYPE
  options        // OcrOptions（可选）
);

自定义项是可选的，通过 options 对象传入，详见 OcrOptions 对象。

最小示例​

import { CAAS_ENVIRONMENT, CAAS_DOCUMENT_TYPE, startOcr } from '@qitech/react-native-caas';

const response = await startOcr(
  CAAS_ENVIRONMENT.SANDBOX,
  '<YOUR_MOBILE_TOKEN_SENT_BY_QITECH>',
  CAAS_DOCUMENT_TYPE.CNH
);

const { DocumentRecognitionResponse } = JSON.parse(response);
console.log(DocumentRecognitionResponse);
注意

startOcr 的 Promise 解析出的是 JSON 字符串，而不是对象。必须对返回值调用 JSON.parse()。参见获取返回结果。

完整示例​

import * as React from 'react';
import { View, Button } from 'react-native';
import {
  CAAS_ENVIRONMENT,
  CAAS_DOCUMENT_TYPE,
  CAAS_FONT_FAMILY,
  CAAS_LOG_LEVEL,
  startOcr,
} from '@qitech/react-native-caas';

const config = {
  ocrMobileToken: '<YOUR_MOBILE_TOKEN_SENT_BY_QITECH>',
  environment: CAAS_ENVIRONMENT.SANDBOX,
  sessionId: '<SESSION_ID>',
  fontColor: '#5dcfe3',
  backgroundColor: '#f5f3f0',
  fontFamily: CAAS_FONT_FAMILY.VERDANA,
  showIntroductionScreens: true,
  showSuccessScreen: true,
  logLevel: CAAS_LOG_LEVEL.DEBUG,
};

export default function App() {
  const [documentType] = React.useState<CAAS_DOCUMENT_TYPE>(CAAS_DOCUMENT_TYPE.CNH);

  const startDocumentOcr = () => {
    startOcr(config.environment, config.ocrMobileToken, documentType, {
      session_id: config.sessionId,
      font_color: config.fontColor,
      background_color: config.backgroundColor,
      font_family: config.fontFamily,
      show_introduction_screens: config.showIntroductionScreens,
      show_success_screen: config.showSuccessScreen,
      onboarding_text_configuration: {
        onboarding_title: 'Dicas Importantes',
        onboarding_first_label: 'Vá para um local iluminado',
        onboarding_second_label: 'Retire o documento do plástico',
        onboarding_third_label: 'Garanta que o documento está corretamente enquadrado',
      },
      log_level: config.logLevel,
    })
      .then((response) => {
        const { DocumentRecognitionResponse } = JSON.parse(response as string);

        if (DocumentRecognitionResponse.length === 1) {
          const { ocr_key, document_type } = DocumentRecognitionResponse[0];
          console.log('Ocr key: ' + ocr_key + ' document type: ' + document_type);
        } else if (DocumentRecognitionResponse.length === 2) {
          // 正反面流程返回两个密钥，每张照片各一个
          const { ocr_front_key } = DocumentRecognitionResponse[0];
          const { ocr_back_key } = DocumentRecognitionResponse[1];
          console.log('Ocr front key: ' + ocr_front_key + ' / Ocr back key: ' + ocr_back_key);
        }
      })
      .catch((error) => {
        console.log('Error executing Ocr. Error: ' + error);
      });
  };

  return (
    <View>
      <Button title="Start OCR" onPress={startDocumentOcr} />
    </View>
  );
}

按证件类型划分的采集流程​

document 参数决定用户需要完成的采集次数，以及返回结果包含的条目数量。

证件类型采集次数返回结果
CAAS_DOCUMENT_TYPE.CNH_FULL1（展开的 CNH）1 个条目，含 ocr_key
CAAS_DOCUMENT_TYPE.CNH_DIGITAL1（电子 CNH 的 PDF）1 个条目，含 ocr_key
CAAS_DOCUMENT_TYPE.ADDRESS1（居住证明）1 个条目，含 ocr_key
CAAS_DOCUMENT_TYPE.RG_CIN_DIGITAL1（电子 RG/CIN 的 PDF）1 个条目，含 ocr_key
CAAS_DOCUMENT_TYPE.CNH2（正面和背面）2 个条目：ocr_front_key 和 ocr_back_key
CAAS_DOCUMENT_TYPE.RG2（正面和背面）2 个条目：ocr_front_key 和 ocr_back_key
CAAS_DOCUMENT_TYPE.RNE2（正面和背面）2 个条目：ocr_front_key 和 ocr_back_key
CAAS_DOCUMENT_TYPE.CRNM2（正面和背面）2 个条目：ocr_front_key 和 ocr_back_key

示例应用​

模块仓库的 examples 目录下包含两个可直接运行的应用：

  • QITechReactNativeExample — 纯 React Native
  • QITechExpoExample — Expo

在两者中，App.tsx 演示了使用 @qitech/react-native-caas 的完整用法（人脸识别 + OCR + 设备扫描），App_ds.tsx 演示了仅使用 @qitech/react-native-device-scan 的设备扫描。请将示例中的 token 和 API Key 替换为您的凭证。如果您尚未收到凭证，请联系 suporte.caas@qitech.com.br。