uniapp接入阿里云实人认证

1,325 阅读1分钟

H5接入

1、生成html代码

image.png

2、引入阿里云js文件

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>
            <%= htmlWebpackPlugin.options.title %>
        </title>
        <!-- Open Graph data -->
        <!-- <meta property="og:title" content="Title Here" /> -->
        <!-- <meta property="og:url" content="http://www.example.com/" /> -->
        <!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
        <!-- <meta property="og:description" content="Description Here" /> -->
        <script>
            var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
                CSS.supports('top: constant(a)'))
            document.write(
                '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
                (coverSupport ? ', viewport-fit=cover' : '') + '" />')
        </script>
        
        <!-- 阿里云人脸认证 -->
        <script type="text/javascript"
            src="https://cn-shanghai-aliyun-cloudauth.oss-cn-shanghai.aliyuncs.com/web_sdk_js/jsvm_all.js"></script>

        <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
    </head>
    <body>
        <noscript>
            <strong>Please enable JavaScript to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
</html>

3、发起刷脸认证

initFace() {
    // 在调用实人认证服务端发起认证请求时需要传入该MetaInfo值
    var MetaInfo = window.getMetaInfo();
    // 获取跳转URL和CertifyId
    this.$api.sendRequest({
        url: 'xxx',
        data: {
            cert_name: 'xxx',  // 填写真实姓名
            cert_no: 'xxxxxx',  // 填写真实身份证号
            return_url: window.location.href,  // 回调地址
            neta_info: JSON.stringify(MetaInfo) // 环境参数
        },
        success: res => {
            if (200 == res.code && res.data.CertifyUrl) {
                uni.setStorageSync('certify_id', res.data.CertifyId)
                // 接下来您进行调用您自己的业务接口或调用实人认证服务端初始化接口获取CertifyUrl
                var CertifyUrl = res.data.CertifyUrl; // 此处值应为调用实人认证服务端初始化接口返回的CertifyUrl
                // 接下来直接跳转CertifyUrl即可开始刷脸认证
                window.location.href = CertifyUrl;
            }
        }
    });
}

4、认证完成后会自动调回填写的回调地址并携带返回结果

export default {
    onLoad(option) {
        const rsp = JSON.parse(decodeURIComponent(option.response)) || {}
        const certify_id = uni.getStorageSync('certify_id')
        if ('Z5050' === rsp.subCode && certify_id) {
            uni.$showMsg('认证成功')
            // 更新实名状态
            this.$api.sendRequest({
                url: 'xxx',
                data: {
                    verify_result: rsp.subCode,
                    certify_id: uni.getStorageSync('certify_id')
                },
                success: res => {
                    if (200 == res.code) {
                        uni.removeStorageSync('certify_id')
                    }
                    this.resetRoute('')
                },
                fail: () => {
                   this.resetRoute('')
                }
            });
        } else if ('Z5054' === rsp.subCode) {
            uni.$showMsg('摄像头无权限或无法获取摄像头数据')
            this.resetRoute('')
        } else if ('Z5056' === rsp.subCode) {
            uni.$showMsg('重试次数过多')
            this.resetRoute('')
        } else if ('Z5059' === rsp.subCode) {
            uni.$showMsg('视频中无有效人脸')
            this.resetRoute('')
        } else if ('Z5128' === rsp.subCode) {
            uni.$showMsg('验证不是同一个人')
            this.resetRoute('')
        }
    },
    methods:{
        resetRoute(params) {
            // #ifdef H5
            // 路由重置
            let oldUrl = window.location
            let url = oldUrl.origin + oldUrl.pathname + (params || '')
            window.history.replaceState(null, '', url);
            // #endif
        }
    }
}

image.png

H5接入:help.aliyun.com/zh/id-verif…

APP uni-app接入

1、下载金融级实人认证UniApp SDK,解压到项目中的nativePlugins目录下。

image.png

2、导入本地插件。

1) 在manifest.json文件下,单击App原生插件配置

2) 在App原生插件配置区域,单击选择本地插件

3)在本地插件选择对话框,选择需要打包生效的插件

image.png

image.png

3、配置基座包。

1)制作自定义调试基座。在manifest.json文件,选择运行 > 运行到手机或模拟器 > 制作自定义调试基座

image.png

2)设置自定义调试基座。在manifest.json文件,选择运行 > 运行到手机或模拟器,单击运行到Android App基座运行到iOS App基座,勾选使用自定义基座运行

4、调用金融级实人认证服务。

1)获取metaInfo数据。

您在调用金融级实人认证服务端初始化接口**InitFaceVerify**时需要传入该值,用于获取后续认证的certifyId。

2) 开始认证。调用**verify**认证接口,传入certifyId进行认证。

参数说明如下表所示。

image.png

5、代码如下

initAppFace() {
    // 加载金融级实人认证插件
    const aliyunVerify = uni.requireNativePlugin('AP-FaceDetectModule');
    // 调用getMetaInfo获取MetaInfo数据
    var metaInfo = aliyunVerify.getMetaInfo();
    let p = uni.getSystemInfoSync().platform;
    if (p === "ios") {
        metaInfo = JSON.stringify(metaInfo);
    }
    // 获取CertifyId
    this.$api.sendRequest({
        url: 'xxx',
        data: {
            neta_info: metaInfo
        },
        success: res => {
            if (200 == res.code) {
                // 开始认证
                aliyunVerify.verify({
                        "certifyId": res.data.CertifyId, // 填写从服务端获取的certifyId
                    },
                    function(response) {
                        if (1000 == response.code) {
                            uni.$showMsg('认证成功')
                            // 更新实名状态
                            that.$api.sendRequest({
                                url: 'xxx',
                                data: {
                                    verify_result: response.code,
                                    certify_id: res.data.CertifyId
                                }
                            });
                        } else if (1001 == response.code) {
                            uni.$showMsg('系统错误')
                        } else if (1003 == response.code) {
                            uni.$showMsg('验证中断')
                        } else if (2003 == response.code) {
                            uni.$showMsg('客户端设备时间错误')
                        } else if (2006 == response.code) {
                            uni.$showMsg('刷脸失败')
                        }
                    }
                );
            }
        }
    });
}

image.png

APP接入:help.aliyun.com/zh/id-verif…