前言
回顧2020年，最有意思的事情就是用微信小程序?qū)崿F(xiàn)了人臉識(shí)別認(rèn)證功能，期間也遇到一些問題。希望通過本文讓大家了解在微信小程序中如何實(shí)現(xiàn)人臉識(shí)別認(rèn)證功能以及如何解決遇到的問題。

一、開發(fā)準(zhǔn)備
1、前提條件
目前微信小程序人臉識(shí)別接口（微信開放社區(qū)對(duì)其定義為 “微信人臉核身接口能力”）只對(duì)特定的主體及類目的小程序開放，詳見 微信人臉核身接口能力
筆者使用的微信小程序主體類目為醫(yī)療，因此能申請(qǐng)?jiān)摍?quán)限。

2、步驟及流程
根據(jù) 微信人臉核身接口能力文檔介紹，申請(qǐng)接口權(quán)限的步驟及流程如下：

由于筆者使用的微信小程序已經(jīng)接入了微信電子健康卡開放平臺(tái)，故不用發(fā)送郵件申請(qǐng)，可以直接在開放平臺(tái)的“小程序人臉識(shí)別申請(qǐng)”菜單中申請(qǐng)開通接口權(quán)限，如下圖所示：

審核通過后，使用微信小程序賬號(hào)登錄微信公眾平臺(tái)，在“開發(fā)管理”—“接口設(shè)置”中添加人臉識(shí)別身份驗(yàn)證接口類目，如下圖所示：

二、開始開發(fā)

1、小程序客戶端
由于筆者希望在小程序的web-view組件的H5頁面中調(diào)用小程序頁面的人臉識(shí)別功能，故單獨(dú)新建了一個(gè)頁面wxfacialverify，在js的onLoad方法中接收H5傳過來的參數(shù)，然后調(diào)用人臉識(shí)別接口。wxfacialverify.js代碼如下：

Page({
  data: {
    faceCheckData:{},
  },
  onLoad: function (options) {
    var that = this;
    //頁面加載調(diào)取人臉識(shí)別接口（原則上應(yīng)該對(duì)options的攜帶的參數(shù)進(jìn)行校驗(yàn)）
    that.facialRecognitionVerify(options);
  },
facialRecognitionVerify: function (faceCheckData) {
    wx.startFacialRecognitionVerify({
      name: faceCheckData.name,//姓名
      idCardNumber: faceCheckData.idCardNumber, //身份證號(hào)
      //人臉識(shí)別成功回調(diào)通知
      success (res) {
        var verifyResult = res.verifyResult;
        wx.request({
				  url: '/faceCheck/faceCheck.htm?action=faceIdentifyCheck', 
				  data: {'name':faceCheckData.name,'idCardNumber':faceCheckData.idCardNumber,
				  'verifyResult ':verifyResult
				   },
				  header: {
				    'content-type': 'application/json' 
				  },
				  success (res) {
				    console.log(res.data)
				  }
				})
      },
      //人臉識(shí)別失敗的回調(diào)通知
      'fail': function (res) {
          wx.showModal({
            title: '提示',
            showCancel: false,
            content: "人臉識(shí)別失??！" + res.errCode+","+res.errMsg,
            success: function (res) {
              if (res.confirm) {
                wx.navigateBack();
              }
            }
          });
      }
    });
  },
  })

2、后臺(tái)服務(wù)端

根據(jù)小程序傳來的微信人臉識(shí)別認(rèn)證結(jié)果參數(shù)進(jìn)行校驗(yàn)并做相應(yīng)的業(yè)務(wù)處理，關(guān)鍵java代碼如下：

/**
   * 人臉識(shí)別后臺(tái)校驗(yàn)
   *
   * @param request
   * @param map
   * @return
   */
  @RequestMapping(method = RequestMethod.POST, params = "action=faceIdentifyCheck")
  public String faceIdentifyCheck(HttpServletRequest request, ModelMap map) {
	Map<String, Object> inOutMap = new HashMap<String, Object>();  
    try {  
      String name = request.getParameter("name");
      String idCardNumber = request.getParameter("idCardNumber");
      String verifyResult = request.getParameter("verifyResult");
	    String wechatCode=request.getParameter("wechatCode");
      if (StringUtils.isBlank(name)) {
          map.put("errormsg", "name不能為空！");
          return "pub/error.vm";
        }
      if (StringUtils.isBlank(idCardNumber)) {
          map.put("errormsg", "idCardNumber不能為空！");
          return "pub/error.vm";
        }
      if ( StringUtils.isBlank(verifyResult) ) {
        map.put("errormsg", "verifyResult不能為空！");
        return "pub/error.vm";
      }
      String token = (String) cacheManager.get(Constants.ACCESS_TOKEN); //緩存中的token
      if(!StringUtils.isBlank(token))
      {
    	  JSONObject resultObjectCheck=faceIdentifyCheck(verifyResult,token);
          if(resultObjectCheck.optInt("errcode",-1)==0&&resultObjectCheck.optInt("identify_ret",-1)==0)
          {
        	  ...... //此處代碼省略，進(jìn)行業(yè)務(wù)處理
        	map.put("errormsg", "人臉識(shí)別校驗(yàn)成功。");
            return "pub/success.vm";
          }else {
        	map.put("errormsg", "人臉識(shí)別校驗(yàn)失敗");
            return "pub/error.vm";
          }   
      }
	  map.put("errormsg", "token已失效！");
      return "pub/error.vm";
    } catch (Exception e) {
      logger.error("faceIdentifyCheck出現(xiàn)錯(cuò)誤", e);
      map.put("errormsg", "出現(xiàn)其他錯(cuò)誤");
      return "pub/error.vm";
    }
  }
  private JSONObject  faceIdentifyCheck(String verifyResult,String token)
  {
	  JSONObject header=new JSONObject();
	  header.put("Content-Type", "application/json;encoding=utf-8");
	  JSONObject body=new JSONObject();
	  body.put("verify_result", verifyResult);
	  String retStr = HttpUtils.httpsRequestStr(WeixinConfig.faceIdentifyUrl+"?access_token="+token, 
    		  "POST", header,body.toString());
      logger.info("微信小程序faceIdentify返回：{}", retStr);
      JSONObject resultObjectCheck=JSONObject.fromObject(retStr);
      return resultObjectCheck;
  }

三、測(cè)試運(yùn)行
筆者在微信開發(fā)者工具上使用“預(yù)覽”、“真機(jī)調(diào)試”功能測(cè)試微信小程序的人臉識(shí)別接口均正常，如下圖所示

四、遇到的問題

上線兩天后，有工作人員反映用戶在蘋果手機(jī)上使用人臉識(shí)別功能的時(shí)候報(bào)錯(cuò) startFacialRecognitionVerify:fail webview not ready，如下圖所示：

最開始我們以為只是某個(gè)型號(hào)的蘋果手機(jī)有這個(gè)問題，結(jié)果使用同事的蘋果手機(jī)（iPhone 6s plus）測(cè)試發(fā)現(xiàn)也出現(xiàn)了同樣的錯(cuò)誤，不過多試幾次之后卻能打開人臉識(shí)別界面。
在微信開放社區(qū)搜到同樣的錯(cuò)誤，但沒有解決的方法。后來又向騰訊技術(shù)人員反饋，得到的回復(fù)是其他小程序調(diào)用沒問題，他們懷疑是我們調(diào)用的方式有問題。

四、解決方法

仔細(xì)檢查了一下代碼想了一下，覺得在頁面的onLoad方法中直接調(diào)用人臉識(shí)別接口最有可能導(dǎo)致這個(gè)問題，因?yàn)楹芸赡躻ebview還沒加載完。于是，在onLoad方法中只賦值，在頁面單獨(dú)加個(gè)按鈕，點(diǎn)擊時(shí)觸發(fā)人臉識(shí)別接口。修改后的代碼如下：

wxml代碼如下：
<view class="usertitle">
  <div class='titleText'>人臉識(shí)別認(rèn)證</div>
  </view>
  <form bindsubmit="facialRecognitionVerify">
  <view class='btnToFaceCheck'>
    <button class='btnToFaceCheck'  formType="submit" >
      <text>點(diǎn)擊此處開始人臉識(shí)別認(rèn)證</text>
    </button>
  </view>
</form>

 js代碼如下：

  onLoad: function (options) {
    var that = this;
    //頁面加載調(diào)取人臉識(shí)別接口（原則上應(yīng)該對(duì)options的攜帶的參數(shù)進(jìn)行校驗(yàn)）
    //that.facialRecognitionVerify(options);
    that.setData({faceCheckData:options});
  },
 facialRecognitionVerify: function () {
    wx.startFacialRecognitionVerify({
      name: this.data.faceCheckData.name,//姓名
      idCardNumber: this.data.faceCheckData.idCardNumber, //身份證號(hào)
      ......//后面的代碼與之前的類似，故省略
    });
  },
  ......//后面的代碼與之前的類似，故省略

運(yùn)行測(cè)試后發(fā)現(xiàn)在蘋果手機(jī)上已能正常調(diào)用微信人臉識(shí)別接口了。

五、總結(jié)

首先，測(cè)試過程中建議使用多種機(jī)型測(cè)試，筆者之前一直使用安卓手機(jī)測(cè)試，一切正常，但是換成蘋果手機(jī)就出現(xiàn)問題了；其次，在排查問題時(shí)要多思考，多嘗試；最后，微信小程序很多接口只支持使用按鈕觸發(fā)，因此如果在onLoad方法中調(diào)用接口出現(xiàn)問題可以嘗試使用按鈕觸發(fā)。