更新记录

1.2.1（2026-07-10）

上传超时时间由8秒改为20秒

1.2.0（2026-07-10）

身份证OCR识别非文件参数支持 签名 加密 返回加密数据自动解密 ，java服务器端OCR离线版代码已上传gitee，具体详见文档

1.1.0（2026-05-12）

参数及返回类型调整

平台兼容性

uni-app x(4.75)

其他

sunrains-idcard-ocr

开发文档

本插件依赖 （sunrains-request插件 sunrains-smutil插件（付费）对非文件路径参数加密，签名，自动解密返回的加密数据）或可自行开发

服务端为java （证件识别完全本地运行，不访问第三方）

服务端（Java）详见 sunrains-java

/**
 * sm4Encrypt signwithenSM2-Sm4Encrypt 请求体SM4加密 请求头key SM2加密SM4的 key iv 和 secretType
 * sign signwithenSM2-Sm4Encrypt 请求头签名
 * void 不签名 请求头key SM2加密SM4的 key iv 和 secretType
 */
 reqFlag:"sign" | "sm4Encrypt" | "signwithenSM2-Sm4Encrypt" | "void";

示例页面

<template>
    <view class="recommend-page">
        <text class="page-title">身份证OCR识别</text>
        <button class="open-btn" @click="openOcr" >证件上传</button>

        <scroll-view class="form-section" scroll-y="true">
            <view class="form-item">
                <text class="form-label">姓名</text>
                <input class="form-input" v-model="name" placeholder="请输入姓名" />
            </view>
            <view class="form-item">
                <text class="form-label">性别</text>
                <input class="form-input" v-model="gender" placeholder="请输入性别" />
            </view>
            <view class="form-item">
                <text class="form-label">民族</text>
                <input class="form-input" v-model="nation" placeholder="请输入民族" />
            </view>
            <view class="form-item">
                <text class="form-label">出生</text>
                <input class="form-input" v-model="birthday" placeholder="yyyy-MM-DD" />
            </view>
            <view class="form-item">
                <text class="form-label">住址</text>
                <input class="form-input" v-model="address" placeholder="请输入住址" />
            </view>
            <view class="form-item">
                <text class="form-label">公民身份号码</text>
                <input class="form-input" v-model="idNumber" placeholder="请输入身份证号" maxlength="18" />
            </view>
            <view class="form-item">
                <text class="form-label">签发机关</text>
                <input class="form-input" v-model="authority" placeholder="请输入签发机关" />
            </view>
            <view class="form-item">
                <text class="form-label">有效期限</text>
                <input class="form-input" v-model="validPeriod" placeholder="yyyy.MM.DD-yyyy.MM.DD" />
            </view>
            <button class="submit-btn" @click="handleSubmit">提交信息</button>
        </scroll-view>

        <idCardOcr @success="handleOcrSuccess" :="ocrConfig"/>
    </view>
</template>

<script setup lang="uts">
    import { ref } from 'vue'
    import idCardOcr from "@/uni_modules/sunrains-idcard-ocr/utssdk/id-card-ocr.uvue"
    import { IdcardOcrModel } from '@/uni_modules/sunrains-idcard-ocr/utssdk/interface.uts'

    let priKey = "4a4a1d48fc284fe2fc43970641880554aed2f69fdfbea63257ea417af4e65802"
    let pubKey = "0460e86263ec52b38a3da24c7a605055d14f8aa5c7855e4f4e19819f4f8a5b72181afd7aa4ab19255eb871eaedaba30fa18cd5c71693d3d76b030a04969bd1edfe"
    const OCRURL = "http://192.168.1.9:8081/idcard/ocr/recognize"
    let header = {} as UTSJSONObject
    const ocrConfig = {
        priKey: priKey,
        pubKey: pubKey,
        ocrUrl: OCRURL,
        header: header,
        reqFlag: "signwithenSM2-Sm4Encrypt",
        successCode: 0

    }

    const name = ref<string>('')
    const gender = ref<string>('')
    const nation = ref<string>('')
    const birthday = ref<string>('')
    const address = ref<string>('')
    const idNumber = ref<string>('')
    const authority = ref<string>('')
    const validPeriod = ref<string>('')

    const cardInfo = reactive<IdcardOcrModel>({})

    function openOcr() {
        uni.$emit('open')
    }

    function handleOcrSuccess(data : IdcardOcrModel) {
        // console.log('OCR识别成功:', data)

        name.value = data.name ?? ''
        gender.value = data.gender ?? ''
        nation.value = data.ethnicity ?? ''
        birthday.value = data.birthday ?? ''
        idNumber.value = data.idNumber ?? ''
        address.value = data.address ?? ''
        authority.value = data.issuingAuthority ?? ''
        if (data.validFrom != null && data.validTo != null) {
            validPeriod.value = data.validFrom + '-' + data.validTo
        }

    }

    function handleSubmit() {
        if (name.value.length == 0) {
            uni.showToast({ title: '请输入姓名', icon: 'none' })
            return
        }
        if (idNumber.value.length != 18) {
            uni.showToast({ title: '请输入正确的身份证号', icon: 'none' })
            return
        }

        console.log('提交表单数据:', {
            name: name.value,
            gender: gender.value,
            nation: nation.value,
            birthday: birthday.value,
            address: address.value,
            idNumber: idNumber.value,
            authority: authority.value,
            validPeriod: validPeriod.value
        })

        uni.showToast({ title: '提交成功', icon: 'success' })
    }
</script>

<style scoped>
    .recommend-page {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 20px;
    }

    .page-title {
        font-size: 18px;
        color: #333;
        margin-bottom: 10px;
    }

    .page-desc {
        font-size: 14px;
        color: #666;
        margin-bottom: 20px;
    }

    .open-btn {
        margin-bottom: 20px;
        padding: 12px 30px;
        background: #007aff;
        color: #fff;
        border-radius: 8px;
        font-size: 16px;
    }

    .form-section {
        flex: 1;
        padding: 10px;
    }

    .form-item {
        margin-bottom: 15px;
    }

    .form-label {
        font-size: 14px;
        color: #666;
        margin-bottom: 8px;
    }

    .form-input {
        width: 100%;
        height: 40px;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 0 12px;
        font-size: 14px;
        background-color: #fafafa;
    }

    .submit-btn {
        margin-top: 20px;
        padding: 14px 0;
        background: #28a745;
        color: #fff;
        border-radius: 8px;
        font-size: 16px;
    }
</style>