H5-- (功能)App内嵌h5网页实现芝麻认证的接入

时间:2024-05-31 13:22:24

1、需求:由于高贵的IOS提审时不能出现支付宝相关字眼及相关SDK,所以我们app芝麻认证只有通过内嵌H5页面实现
2、分析:通过调研 “芝麻认证”官方技术文档 ,接入芝麻认证的流程如下图(图片来自官方文档):

H5-- (功能)App内嵌h5网页实现芝麻认证的接入

要想完成这个功能,需要业务办理人员、后台api人员及前端h5人员共同的合作,每一环都很重要。在此仅大部分从前端角度出发,如何根据以上流程图一步步完成这个需求。。

3、过程
接入前准备工作
准备工作不包括在以上的流程图中,但却是所有业务的基础:要在自己的app中使用支付宝开放产品的接口能力,需要业务办理人员先去蚂蚁金服开放平台,在管理中心中创建登记你的app,并提交审核,审核通过后会为您生成应用唯一标识(APPID),并且可以申请开通开放产品使用权限,通过APPID你的app才能调用开放产品的接口能力。(需要详细了解开放平台创建应用步骤请参考《开放平台应用创建指南》)

第一步:前端调取后台芝麻认证api
① 前端h5页面引导用户输入真实姓名及身份证号码,调取后台芝麻认证api

H5-- (功能)App内嵌h5网页实现芝麻认证的接入

② 后台调取SDK芝麻认证初始化接口zhima.customer.certification.initialize,生成biz_no(本次认证唯一标识)
重点1:初始化时的认证场景码(biz_code)一定不要传 “FACE_SDK”(这个只能是native调用,如果h5调用跳转认证请求URL后会报‘出错了’),我项目传的是 “FACE”

H5-- (功能)App内嵌h5网页实现芝麻认证的接入
③后台调取SDK芝麻认证开始认证接口zhima.customer.certification.certify,生成认证请求链接url
重点2:生成认证请求 URL时必须要传回调地址 return_url,回调支持在支付宝 App 打开(示例:alipays://www.taobao.com )、在浏览器打开(示例:https://www.taobao.com )、在商户 App 打开(使用商户 scheme 协议)
我项目使用的是商户App打开,定义scheme,让用户跳转支付宝认证完成后可以跳回app,用户体验更好~

第二步:前端拿到后台返回的biz_no及认证请求链接url
① 前端h5页面将后台返回的biz_no及用户输入的姓名和身份证号存入localStorage,以便后续的查询操作

localStorage.setItem('name', self.name)
localStorage.setItem('certNo', self.idCard)
localStorage.setItem('bizNo', res.data.data.bizNo)

② 跳转后台返回的认证请求链接url ,进入芝麻认证引导页

H5-- (功能)App内嵌h5网页实现芝麻认证的接入

② 勾选我已阅读并同意认证服务协议,点击开始认证按钮,唤起支付宝客户端进行刷脸认证

H5-- (功能)App内嵌h5网页实现芝麻认证的接入


第三步:跳转支付宝客户端进行刷脸认证(必须安装支付宝且处于登录状态)
①不管认证成功还是失败,均会跳转到后台配置的回调地址 return_url,重新跳转回app内,客户端重新打开认证h5页面,并在地址上挂上已经跳转到支付宝认证完毕的标记,例如:?sign=1

H5-- (功能)App内嵌h5网页实现芝麻认证的接入

② h5页面识别地址上的标记(包含sign),将localStorage中存储的biz_no及用户的姓名和身份证号当成参数传给后台,后台调取SDK芝麻认证认证查询接口zhima.customer.certification.query,并将认证结果返给前端h5,展示给用户,认证到此结束。

H5-- (功能)App内嵌h5网页实现芝麻认证的接入