支付宝生活号h5网页--蚂蚁认证

前言

前段时间生活号要求加功能，需要实现社会保障卡的挂失和解挂功能，同是为了保障用户信息的安全，需要使用到人脸对比，确保当前正在使用的支付宝的用户是本人使用。原本打算让用户在手机图片库选择人头像照片或者拍摄一张人头像照片上传服务器，然后通过对比持有的照片库判断是否是本人。但是这种做法不足的是当其他人捡到你的手机后，如若你的手机上存在人头像照片，其他人可通过在手机相册中选照片，上传服务器对比成功后就如同本人在使用一样，所以这种做法不安全。后来想到了使用支付宝的芝麻认证，但是芝麻认证要开始收费了，所以项目上决定使用蚂蚁认证，蚂蚁认证就是支付宝身份认证。一开始我听到蚂蚁认证也是一脸懵逼，百度也搜索不到蚂蚁认证相关的东西，后来问人才知道蚂蚁认证就是支付宝身份认证，这里贴上支付宝身份认证对接文档。https://docs.open.alipay.com/20181012100420932508/quickstart/

开发点

首先这里说一下，我这里只讲涉及到前端的，因为前端是我负责的，关于后端的我也没看过后端的代码，对于一些事项也不是很清楚。

1、获取认证url

认证的url是通过后台统一封装获取的，这里我们需要做的是把认证后的回跳地址传递给后台，就是蚂蚁认证完成后，需要跳转到那个页面的地址，还要把用户的姓名和身份证号码传递给后台。这里说一下就是支付宝网页授权默认是获取不到用户的姓名和身份证号码，需要去申请才能获取。然后后台会返回一个认证的url地址和认证订单标识符certifyId，认证订单标识符certifyId要在在前端保存起来，用于蚂蚁认证完成后查询蚂蚁认证的结果。这里认证订单标识符certifyId我建议存在localstorage中，不要存放在sessionStorage中，至于为什么我后面会讲到。

2、跳转到认证的url地址

当后台返回给我们一个认证url时，我们需要跳转到该url。这里我们不能直接使用window.location.href直接跳转,因为可能会出现不能打开的情况，要使用支付宝给我们提供的jsapi中的pushWindow打开一个新的窗口。代码如下

AlipayJSBridge.call('pushWindow', {
  url: 'https://m.taobao.com/',
  param: {
    readTitle: true,
    showOptionMenu: false
  }
});

具体的参数可以查看支付宝生活号开放平台文档https://myjsapi.alipay.com/jsapi/context/push-window.html
这样就可以唤起蚂蚁认证进行认证了

3、认证结束

认证结束后，支付宝会进行清栈操作，就是退出所有的应用窗口，重新打开我们在获取认证url时传递给后台的回跳地址，这个时候所有的session状态也会被清空掉，所以认证订单标识符certifyId不要存在sessionStorage中。这里我要说的是如果你需要在回跳会前端地址的时候，恢复一些状态，比如用户的登录信息等等，你需要在跳转认证url前把数据保存在localStorage中。然后在传递给后台的回跳地址url中拼接一些参数，用来区别是第一次点击进来前端页面还是通过蚂蚁认证回跳回来的。如果是蚂蚁认证回跳回来的就需要从localstorage中读取数据，恢复到原来的状态。

4、查询认证结果

当回跳回来前端页面的时候，我们就可以使用认证订单标识符certifyId来调用后台封装好接口查询认证结果了。通过判断认证成功或者失败来进行某些操作

注意点

我这里的流程可能会跟支付宝身份认证的流程有点区别。区别从第二步开始。文档上面的流程代码如下

function ready(callback) {
  // 如果jsbridge已经注入则直接调用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果没有注入则监听注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}

// startBizService 接口仅在支付宝 10.0.15 及以上支持
// 需要接入者自行做下版本兼容处理 ！！
function startAPVerify(options, callback) {
  AlipayJSBridge.call('startBizService', {
    name: 'open-certify',
    param: JSON.stringify(options),
  }, callback);
}

/**
 * 唤起认证流程
 * 参数: certifyId、url 需要通过支付宝 openapi 开放平台网关接口获取
 * 详细说明可查看文档下方的参数说明
 **/
ready(() => {
  // 需要确保在 AlipayJSBridge ready 之后才调用
  startAPVerify({ certifyId, url }, verifyResult => {
    // 认证结果回调触发, 以下处理逻辑为示例代码，开发者可根据自身业务特性来自行处理
    if (verifyResult.resultStatus === '9000') {
      // 验证成功，接入方在此处处理后续的业务逻辑
      // ...
      return;
    }
    
    // 用户主动取消认证
    if (verifyResult.resultStatus === '6001') {
      // 可做下 toast 弱提示
      return;
    }
    
    const errorCode = verifyResult.result && verifyResult.result.errorCode;
    // 其他结果状态码判断和处理 ...
  });
});

文档上面的流程需要支付宝版本号大于10.0.15的，所以可能会导致很多用户不能使用蚂蚁认证。而且查询认证结果是在前端进行的，不经过后台的，如果后台需要保存认证结果就需要发送请求通知后台认证成功。这样就会导致前端的流程变得复杂起来。

总结

总的来讲流程大概如下：1、把回跳地址，当前支付宝登录用户的身份证号码和姓名传递给后台，获取认证的url；2、使用jsapi中的pushwindow方式打开一个新窗口，打开新窗口前如果需要保存某些状态则需要把数据保存在localstorage中；3、认证过程是用户操作的，已经脱离了我们控制的范围了；4、认证结束，认证结束后会根据回跳地址跳转到前端页面；5、恢复某些状态，当你需要恢复某些状态的时候，在一进来页面的时候就需要读取localstorage中的数据，恢复状态；6、查询认证结果，把认证订单标识符certifyId传递给后台查询蚂蚁认证的结果，然后进行相应的操作。