更新记录

1.5.6（2026-08-23）

更新文档

1.5.5（2026-08-20）

md文档修改

1.5.4（2026-08-14）

文档修改

平台兼容性

uni-app x(4.75)

其他

sunrains-idcard-ocr

开发文档

在使用插件过程中遇到问题 请进群交流

服务端配套支持 1:网络请求解密，验签，返回结果加密；2:身份证ocr识别 3:人脸注册，识别，人证比对 4:活体检测 5:人脸核身 6:车牌号识别

/**
 * 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>

        <view class="btnout" @click="openOcr">
            <image class="btnimg" src="/static/身份证识别.png" mode="aspectFit"></image>
            <view class="openbtn">
                <text class="text">拍照自动识别身份证</text>
            </view>
        </view>
        <scroll-view class="form-section" scroll-y="true">
            <view class="form-item">
                <text class="form-label">姓名</text>
                <input class="form-input" v-model="userInfo.name" placeholder="请输入姓名" />
            </view>
            <view class="form-item">
                <text class="form-label">性别</text>
                <input class="form-input" v-model="userInfo.gender" placeholder="请输入性别" />
            </view>
            <view class="form-item">
                <text class="form-label">民族</text>
                <input class="form-input" v-model="userInfo.nation" placeholder="请输入民族" />
            </view>
            <view class="form-item">
                <text class="form-label">出生</text>
                <input class="form-input" v-model="userInfo.birthday" placeholder="yyyy-MM-DD" />
            </view>
            <view class="form-item">
                <text class="form-label">住址</text>
                <input class="form-input" v-model="userInfo.address" placeholder="请输入住址" />
            </view>
            <view class="form-item">
                <text class="form-label">公民身份证号码</text>
                <input class="form-input" v-model="userInfo.idNumber" placeholder="请输入身份证号" maxlength="18" />
            </view>
            <view class="form-item">
                <text class="form-label">签发机关</text>
                <input class="form-input" v-model="userInfo.authority" placeholder="请输入签发机关" />
            </view>
            <view class="form-item">
                <text class="form-label">有效期限</text>
                <input class="form-input" v-model="userInfo.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'
    import { serverPrefix } from '@/baseconf'
    let priKey = "4a4a1d48fc284fe2fc43970641880554aed2f69fdfbea63257ea417af4e65802"
    let pubKey = "0460e86263ec52b38a3da24c7a605055d14f8aa5c7855e4f4e19819f4f8a5b72181afd7aa4ab19255eb871eaedaba30fa18cd5c71693d3d76b030a04969bd1edfe"
    const OCRURL = serverPrefix + "/idcard/ocr/recognize"
    let header = {} as UTSJSONObject
    const ocrConfig = {
        priKey: priKey,
        pubKey: pubKey,
        ocrUrl: OCRURL,
        header: header,
        reqFlag: "signwithenSM2-Sm4Encrypt",
        successCode: 0

    }

    type UserInfoModel = {
        name : string,
        gender : string,
        nation : string,
        birthday : string,
        address : string,
        idNumber : string,
        authority : string,
        validPeriod : string
    }

    const userInfo = reactive<UserInfoModel>({
        name: "",
        gender: "",
        nation: "",
        birthday: "",
        address: "",
        idNumber: "",
        authority: "",
        validPeriod: ""
    })

    function openOcr() {
        uni.$emit('sunrains-idcard-ocr-open')
    }

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

    }

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

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

<style scoped lang="scss">
    .recommend-page {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 20px;
        background: rgba(253, 253, 253, 0.6);
    }

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

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

    .btnout {
        border-radius: 5px;
        border: 1px solid darkgrey;
        background: #ffffff;
        box-shadow: 0 0 1px 1px grey;
        padding: 0 5px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        .btnimg {
            width: 80px;
            height: 80px;
        }

        .openbtn {
            border: 1px solid blue;
            border-radius: 20px;
            width: 200px;
            height: 40px;

            .text {
                margin: auto;
                font-size: 16px;
                text-align: center;
                color: blue;
            }
        }
    }

    .form-section {
        margin-top: 10px;
        border: 1px solid darkgrey;
        flex: 1;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 5px;
        box-shadow: 0 0 1px 1px grey;
    }

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