E证通-人脸核身接入uniapp(微信小程序端的)

2,284 阅读3分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作挑战活动

微信小程序中接入人脸核身的场景越来越多,但是其限制性也比较大,要求且具备相关资质的客户才能申请,具体的如下,如果公司达不到下面标准可以借助 E证通的人脸核身 来实现相关需求。

-   政务:政府机构或事业单位
-   金融:银行、保险、信托、基金、证券/期货、持牌消费金融
-   医疗:公立医疗机构、互联网医院、私立医疗机构
-   运营商:基础电信运营商、增值电信运营商
-   教育:学历教育(初等/中等/高等)、公立教育机构、私立/民办教育机构
-   出行与交通:网约车(快车/出租车/专车/其他网约车)、航空、地铁、水运、城市交通卡、城市共享交通、火车、公交、长途客运、租车
-   生活服务:生活缴费
-   旅游:酒店
-   商业服务:公证
-   社交:直播
-   快递与邮政:快递、邮政、寄件/收件

原生的微信小程序接入E证通人脸核身

原生接入完全按照官方提供的文档一步一步的来即可

Uniapp中接入E证通人脸核身

  1. 原生的人脸核身sdk包转换

    uniapp中去接入时会发现官网上下载下来的人脸核身sdk包时原生小程序开发的,无法直接引入使用,此时我们需要把该包进行转换即可,转换好的包可在这个仓库下载其中的mp_ecard_sdk文件夹,放入你的项目嗯目录下即可,[仓库地址](E证通-人脸核身: E证通人脸核身接入uniapp (gitee.com))

  2. uniapp中的路由配置

    找到page.json文件,在pages数组中追加下面的路由

        {
        "path": "pages/logs/logs",
        "style": {
                "navigationBarTitleText": "查看启动日志"
            }
        },
        {
        "path": "mp_ecard_sdk/index/index",
        "style": {
                "navigationBarTitleText": "腾讯云E证通授权"
            }
        },
        {
        "path": "mp_ecard_sdk/protocol/service/index",
        "style": {
                "navigationBarTitleText": "腾讯云E证通服务协议"
            }
        },
        {
        "path": "mp_ecard_sdk/protocol/privacy/index",
        "style": {
                "navigationBarTitleText": "腾讯隐私政策"
            }
        },
        {
        "path": "mp_ecard_sdk/protocol/userAccredit/index",
        "style": {
                "navigationBarTitleText": "用户授权协议"
            }
        },
        {
        "path": "mp_ecard_sdk/protocol/eid/index",
        "style": {
                "navigationBarTitleText": "eID数字身份小程序服务协议"
            }
        }
    
  3. 引入polyfill & Mixin

    • 仔细看原生人脸核身sdk包会发现里面用到的setData等方法,所以引入polyfill Mixin主要目的是可以保证uniapp的项目能直接使用this.setData()函数,解决转换后其他api的兼容性。里面的具体内容可根据自身需要进行删减。

    在上面仓库中下载polyfill文件夹放在开发项目的根目录中,并在项目的main.js中引入,具体如下:

    import Polyfill from './polyfill/polyfill';
    
    Polyfill.init();
    
    
    
    // 全局mixins,用于实现setData等功能';
    
    import Mixin from './polyfill/mixins';
    
    Vue.mixin(Mixin);
    
    

人脸核身初始化

// app.vue
import { initEid } from './mp_ecard_sdk/main';

  onLaunch() {
    initEid();
  },
  onShow(options) {
    const {
      referrerInfo,
      scene
    } = options;
    /* 判断是否从eID数字身份⼩程序返回 */
    const {
      appId
    } = referrerInfo;
    console.log(appId)
    if (scene === 1038 && appId === 'wx0e2cb0b052a91c92') {
      return;
    } else {
      // 执⾏接⼊⽅⼩程序原本的逻辑
    }
 },

调用人脸核身

在点击实名认证按钮所需要出发的事件如下:

import {
        startEid
} from '../../mp_ecard_sdk/main';

startSoterAuthenticationFaceID() {
        this.goSDK('3-xxxx-xxxxxxC')
},
goSDK(token) {
        startEid({
                data: {
                        token,
                },
                verifyDoneCallback(res) {
                        const {
                                token,
                                verifyDone
                        } = res;
                        console.log('收到核身完成的res:', res);
                        console.log('核身的token是:', token);
                        console.log('是否完成核身:', verifyDone);
                },
        });
},

以上就是接入的整个代码端的流程了,这个实名认证成功后需要让后端在调用他们的接口去获取实名的所有信息。

官方文档 人脸核身 接入准备 - 接入文档 - 文档中心 - 腾讯云 (tencent.com)

[E证通-人脸核身项目案例](E证通-人脸核身: E证通人脸核身接入uniapp (gitee.com))

[E证通-人脸核身项目案例]Smile-lrn/E证通-人脸核身-原生sdk (gitee.com)