微信、支付宝调用刷脸（解决ios调用失败的坑）

许多小伙伴们再调用微信刷脸功能的时候会遇到一些“坑”，下面我就给大家讲解一下。

1.首先我们需要下载微信的sdk

npm install weixin-js-sdk --save

2.引入微信sdk

import wx from 'weixin-js-sdk';

3.因为涉及到微信和支付宝兼容

 //取得浏览器的userAgent字符串
let userAgent = window.navigator.userAgent.toLowerCase();

if(userAgent.indexOf("micromessenger") > -1){
    //微信环境
}

if(userAgent.indexOf("alipayclient") > -1){
    //支付宝环境
}

下面直接给大家上代码 一、微信端

let data = {
    userName: this.username, //用户姓名
    userCardNo: this.usercardno //用户身份z号
}
//调用微信初始化接口
facewxauth(data).then(res => {
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //安卓终端
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    
    if(res.data.code == 200){
        let data1 = res.data.data
        
        //调用微信jssdk接口
        //注意！这一步非常重要
        //判断 如果是安卓端就获取你当前页面地址
        //如果是ios端，这个地址可以写死，写你调用刷脸时此时页面的路径
        //比如你的刷脸在index页面点击调用，这个地址就写index页面的地址
        //在homepage页面调用的刷脸，这个地址就写homepage页面的地址
        //因为ios端不会随着你页面变化而改变地址，可以说ios端的微信非常懒
        let data = {
            url: isAndroid?window.location.href:'例如：https://aaaaaa/index'
        }
        wxSdk(data).then(res => {
            let data = res.data.data
            wx.config({
                beta: true, //必填，开启内测接口调用，注入 wx.invoke 和 wx.on 方法
                debug: false, //选填，开启调试模式，默认为 false 不开启
                appId: data.appid, //调用微信sdk获取的appid
                timestamp: data.timeStamp, //调用微信sdk获取的timeStamp
                nonceStr: data.nonceStr, //调用微信sdk获取的nonceStr
                signature: data.signature,
                jsApiList: ['requestWxFacePictureVerify']
            });
            
            wx.ready(function () {
                wx.invoke('requestWxFacePictureVerify', {
                    "appId": data.appid, //调用微信sdk获取的appid
                    "request_verify_pre_info": data1.userIdKey ? 
                                               "{\"user_id_key\":\"" + data1.userIdKey + 
                                               "\"}"
                                               : "{}",
                                               //大家看清楚这是一个三元判断
                                               //调用微信初始化接口获取的 userIdKey 
                    "check_alive_type": "1"
                }, function(res) {
                     if(res.err_code == 0){
                        //调用核身回调接口
                        facewxback({ verifyResult: res.verify_result}).then(res => {
                            if(res.data.code == 200){
                                //此时就可以做人脸认证成功后的 *** 作了
                                //但如果是要跳转页面必须得用
                                //并且跳入刷脸页面的前一个页面也需要用
                                //window.location.href跳转

                                window.location.href = ''

                            }else{
                                //错误提示
                            }
                        })
                     }else{
                        //错误提示
                        if (res.err_code) {
                           res.err_msg += " err_code: " + res.err_code;
                        }
                        //可以做一个d框提示 res.err_msg
                     }
                })
            })
        })
    }else{
        //错误提示    
    }
})

二、支付宝端

//支付宝端相对来说就没有什么bug了

//调用支付宝初始化接口

let data = {
    userName: this.username, //用户姓名
    userCardNo: this.usercardno //用户身份z号
}
facezfbauth(data).then(res => {
    if(res.data.code == 200){
        let data = res.data.data
        AlipayJSBridge . call ( 'startBizService' , {
            name :  'open-certify' ,
            param :  JSON . stringify ({
                certifyId: data.certifyId,
                url: data.certifyUrl
            }),
        },
        function( verifyResult ){
            //认证结果回调触发, 以下处理逻辑为示例代码，开发者可根据自身业务特性来自行处理
            if(verifyResult.resultStatus   ===   '9000'){
                //验证成功，接入方在此处处理后续的业务逻辑
                //调用支付宝回调接口
                //初始化接口获取的certifyId
                facezfbback({certifyId: data.certifyId}).then(res => {
                    if(res.data.code == 200){
                        //验证成功后执行你的 *** 作
                        //如跳转页面，和微信端一样
                        window.location.href = ''
                        return
                    }else{
                        //错误提示
                    }
                })
            }
            //用户主动取消认证
            if(verifyResult.resultStatus === '6001'){
                //可做轻提示('已取消认证')
            }
        }
    }
})

希望能给大家提供帮助！！！！！！