vue+springboot+腾讯云人脸核身
目录
业务场景
腾讯云
后台部分
前台部分
业务场景
业务场景,VUE做PC端,然后要用户输入姓名和身份证号点击生成二维码,微信扫描进行人脸识别,最后识别后,页面显示认真成功失败。
腾讯云
开始先登录自己注册的腾讯云,云产品——人脸核身
创建业务流程
这里自己根据自己需求改,根据官方文档说明,普通H5不需要绑定公众号,浮层需要公众号,如果单纯想实现输入姓名和身份证啥的认证,我这里用的普通H5。看个人需求
普通的话微信公众号名称输入的无所谓了,随便输
这个业务名称就是微信认证页面的显示你的业务名
选择权威库,既然做人脸识别了,当然用权威的了
这里会弹一大堆有的没的。。选择不校验,直接输入姓名和身份证认证即可
也就是我们前台传姓名和身份证参数,传给自己的后台,我们后台再发给腾讯
活体选动作,这个没啥说的。。
这个看自己心情,我心情好写鎏金哇卡雅酷咧也没人说啥!
然后提交审核
审核成功后,记住你的RuleId这个业务id我们对接需要这个参数
接下来,我们要弄访问秘钥,官方文档说可以不需要访问秘钥,容易有风险,我没管,我直接生成的外部访问秘钥
云产品——访问秘钥
新建秘钥启用就行,秘钥的id和密文记下来,后台需要。。
这里资源包购买
如果按我的配的微信普通H5的,注册时候选权威库的,就买基础人脸核身权威库的,1K次应该是930块钱那个
资源包一定看好再买啊,别买错了怨我,我这里给提个醒
有免费的100次可以试用
后台部分
maven依赖
<!-- 腾讯云sdk --><dependency><groupId>com.tencentcloudapi</groupId><artifactId>tencentcloud-sdk-java</artifactId><version>3.1.97</version></dependency>
后台接口
先在application加配置(看你个人)
秘钥id,秘钥密文,业务id,回调地址PC路径和手机路径(个人业务),后面内容自己配自己的
tencentcloud:face:SecretId: SecretKey: RuleId: 2RedirectUrl: RedirectWxUrl:
然后引
@Value("${tencentcloud.face.SecretId}")private String SecretId;@Value("${tencentcloud.face.SecretKey}")private String SecretKey;@Value("${tencentcloud.face.RuleId}")private String RuleId;@Value("${tencentcloud.face.RedirectUrl}")private String RedirectUrl;@Value("${tencentcloud.face.RedirectWxUrl}")private String RedirectWxUrl;
下面这个是前台传姓名和身份证号的,然后我们把前台传的信息,按照腾讯云提供的写法发送给腾讯云,我们需要的参数
必填项:
RuleId 业务id,就是我上面写的注册的时候让你记得id
idCard 身份证号
name 姓名
非必填项:
Extra: 获取验证结果时获取的,这个看你个人愿意传就传,不传就不传无所谓
RedirectUrl:用户识别之后,在微信浏览器上显示的回调页面,这个可以配自己画的页面,这里说下,虽然说是非必填,我个人认为最好自己配回调页面,要不然用户识别结束之后,如果你没配会返回人脸核身的首页,这样用户又该净事叨叨叨的了。
// 腾讯微信h5 人脸核身@RequestMapping(value = "detectAuth", method = RequestMethod.POST)@ResponseBodypublic Result detectAuth(@RequestBody String json) throws Exception {Result res = new Result();try {// 参数JSONObject jsonObject = JSONObject.parseObject(json);String token = jsonObject.getString("token");String type = jsonObject.getString("type");Map<String, Object> sign = redisCacheStorage.get(token, new HashMap<>());if (sign == null) {res.setCode(ResultCode.TOKENEXCEPTION);res.setMessage("未登陆!");return res;}// 身份证String idCard = jsonObject.getString("idCard");// 姓名String name = jsonObject.getString("name");// 企业idString uuid = sign.get(SessionKey.ENTERPRISE_ID.key()).toString();if (StringUtils.isNotBlank(uuid)) {// 腾讯云部分======start// 访问秘钥Credential cred = new Credential(SecretId, SecretKey);HttpProfile httpProfile = new HttpProfile();httpProfile.setEndpoint("faceid.tencentcloudapi.com");ClientProfile clientProfile = new ClientProfile();clientProfile.setHttpProfile(httpProfile);FaceidClient client = new FaceidClient(cred, "ap-beijing",clientProfile);DetectAuthRequest req = new DetectAuthRequest();// 业务idreq.setRuleId(RuleId);// 身份证req.setIdCard(idCard);// 姓名req.setName(name);// 这个参数 透传字段,在获取验证结果时返回req.setExtra(uuid);// 根据业务 回调地址 if("SJ".equals(type)){req.setRedirectUrl(RedirectWxUrl);}else if("PC".equals(type)){req.setRedirectUrl(RedirectUrl);}DetectAuthResponse resp = client.DetectAuth(req);// 腾讯云=========end
// String result = DetectAuthResponse.toJsonString(resp);// log.info("detectAuth接口结果:" + result);return ResultGenerator.genSuccessResult(resp);}return res;} catch (Exception e) {return ResultGenerator.genFailResult(e.getMessage());}}
上面接口我们前台传完后,会返回给前台biztoken和url
这个时候我们前台用url生成二维码,代码一会再发,用户这个时候就可以用微信扫码自动进入微信浏览器的人脸识别系统,根据步骤提示进行人脸识别(这个腾讯的系统页面不截图了,自己扫就看到了)
我们前台要把返回的biztoken再传给后台获取认证结果
这次我们需要给腾讯
biztoken 刚才返给前台的不用说了吧,再传回来就完事了
RuleId 业务id,同上面
InfoType 后台写死传1
// 腾讯微信h5 人脸核身@RequestMapping(value = "getDetectInfo", method = RequestMethod.POST)@ResponseBodypublic Result getDetectInfo(@RequestBody String json1) {JSONObject jsonObject1 = JSONObject.parseObject(json1);String token = jsonObject1.getString("token");Map<String, Object> sign = redisCacheStorage.get(token, new HashMap<>());if (sign == null) {Result res = new Result();res.setCode(ResultCode.TOKENEXCEPTION);res.setMessage("未登陆!");return res;}// bizToken,个人当前次人脸识别的token码,用来发送获取成功结果String bizToken = jsonObject1.getString("bizToken");JSONObject json = new JSONObject();json.put("code", -1);try {//访问秘钥Credential cred = new Credential(SecretId, SecretKey);HttpProfile httpProfile = new HttpProfile();httpProfile.setEndpoint("faceid.tencentcloudapi.com");ClientProfile clientProfile = new ClientProfile();clientProfile.setHttpProfile(httpProfile);FaceidClient client = new FaceidClient(cred, "ap-beijing", clientProfile);GetDetectInfoRequest req = new GetDetectInfoRequest();req.setBizToken(bizToken);req.setRuleId(RuleId);req.setInfoType("1");// 0:全部;1:文本类;2:身份证正反面;3:视频最佳截图照片;4:视频。如// 134表示拉取文本类、视频最佳截图照片、视频GetDetectInfoResponse resp = client.GetDetectInfo(req);String result = DetectAuthResponse.toJsonString(resp);
// log.info("getDetectInfo接口结果:" + result);JSONObject resultJson = JSONObject.parseObject(result);System.out.println("获取认证结果==========" + resultJson);Integer resultCode = resultJson.getJSONObject("DetectInfo").getJSONObject("Text").getInteger("ErrCode");if (resultCode != null) {if (resultCode == 0) {json.put("code", 0);json.put("msg", "成功");sign.put(SessionKey.ENTERPRISE_FACE.key(), 0);redisCacheStorage.set(token, sign);} else {json.put("code", 1);json.put("msg","失败:"+ resultJson.getJSONObject("DetectInfo").getJSONObject("Text").getString("ErrMsg"));}}} catch (Exception e) {e.printStackTrace();}return ResultGenerator.genSuccessResult(json);}
然后ResultCode就是返回结果了
前台部分
vue部分代码
我没全粘方法,因为都是我自己业务,没必要
biztoken我们要传给后台获取结果的
requestId我自己业务的
qrCode是我们把返回的url转成二维码给用户扫描进行识别用的,下面的timeout就是每5秒我们都进行一次获取认证结果,好能即时取到认证结果
this.$http.post('detectAuth', param).then((response) => {if (response.error_code === 0) {document.getElementById('qrcodeId').innerHTML = ''this.bizToken = response.data.bizTokenthis.requestId = response.data.requestIdthis.qrCodeShow = truevar qrcode = new QRCode(this.$refs.qrCodeUrl, {text: response.data.url,width: 210,height: 210,colorDark: '#000000',colorLight: '#ffffff',correctLevel: QRCode.CorrectLevel.H})this.t_show = setTimeout(function() {that.getDetectInfo(type)}, 5000)}})
获取结果
getDetectInfo(type) {const that = thisconst param = {'bizToken': this.bizToken}this.$http.post('getDetectInfo', param).then((response) => {if (response.data.code === 0) {this.$message.success('人脸识别通过!')if (type === 1) { // 法人this.qrCodeImgShow = truethis.qrCodeShow = falsethis.butShow = false} else { // 经办人this.qrCodeImgShow1 = truethis.qrCodeShow1 = falsethis.butShow1 = false}} else {this.t_info = setTimeout(function() {that.getDetectInfo(type)}, 5000)}})
}
成功了就把图片渲染上去就行
这里讲下回调页面,就是后台发给腾讯配置的路径,那个页面是自己画的,但是路径配置是在识别前生成二维码的时候发给腾讯的,也就是说那个路径只能配一个,不能动态配,有些小伙伴需求可能要腾讯认证成功和失败显示俩页面。。这时候我们做的时候可能在页面上动态获取状态,但是那个回调页面是在微信浏览器里打开的,所以获取不到项目状态机里的状态,这里提一嘴,其实biztoken会返回给回调页面的
根据打印路径自己截取BizToken然后发给后台获取结果,在动态更新页面成功失败就可以了
vue+springboot+腾讯云人脸核身相关推荐
- 微信公众号HTML5接入腾讯云人脸核身
微信公众号HTML5接入腾讯云人脸核身 概述 接入流程 原生H5对行业的要求 概述 针对微信公众号接入腾讯云,腾讯云提供了两种方案,一种是通用H5接入,另外一种是通过微信的原生H5来接入,但是一般都是 ...
- 腾讯云人脸核身和人脸识别是什么
腾讯云人脸核身和人脸识别是什么 有一些客户过来咨询的时候都是拿着腾讯云人脸识别的链接来问能不能做实名认证判断这个人的身份,但是在腾讯云中能做实名认证上传身份证的叫做人脸核身,腾讯云的人脸识别是居于腾讯 ...
- AI 腾讯云人脸核身之独立H5接入
文章目录 一.概述 二.合作方后台上送身份信息~实现流程 2.1. 前端入参 2.2. 后端固定参数 2.3. 获取 Access Token 2.4. 获取 SIGN ticket 2.5. 生成签 ...
- java腾讯云人脸核身移动浮层H5接入
腾讯云人脸核身文档 最近公司有业务需求,需要对企业微信中的小程序添加人脸识别功能,一般的人脸核身是对app中添加sdk完成的,考虑到业务需要,采用腾讯云的移动浮层H5接入,废话不多说,直接上代码. 这 ...
- AI-腾讯云人脸核身之独立H5接入
概述 AI人脸识别,使用官方API:腾讯云人脸核身之独立H5接入.接口官方返回code = 0 表示成功,其他code码值均为对应码值信息,详见错误码. 注意: 1.合作方上送身份信息的计算签名参数与 ...
- Android 快速接入腾讯云人脸核身(识别)
Android 通过 SDK 快速接入腾讯云人脸核身 我的接入代码:https://blog.csdn.net/qq_39836064/article/details/108702725,很久之前写的 ...
- 腾讯云人脸核身uniapp+后端代码
项目开发中用到了腾讯人脸验证的模块,中间也踩了一些坑,这里发帖记录一下,留待自己后续查验. 首先说后端,这里用java开发的,官方的文档地址是:人脸核身 实名核身鉴权 - API 文档 - 文档中心 ...
- 腾讯云人脸核身相关问题
如何申请腾讯云人脸核身的接入? 打开腾讯云 介绍页 ,单击页面上的[立即申请],填写具体业务需求并上传工商营业执照,提交接入申请即可. 申请使用腾讯云慧眼人脸核身有哪些限制? 申请开通人脸核身服务是没 ...
- AI技术实践 | 人脸核身在未成年人保护领域的实践应用
未成年人保护工作需要多方协同,注重未成年人健康网络习惯的培养.在技术向善的理念下,人工智能技术又该如何落到实处呢? 接下来,本文将详细讲述如何接入腾讯云慧眼·智能身份认证能力助力未成年人保护. 1.准 ...
最新文章
- 简单自学机器学习理论——正则化和偏置方差的权衡 (Part III )
- SpringBoot+AntV实现饼状图中的花瓣图
- 用R语言分析我的fitbit计步数据
- 会话技术Cookie
- 十年总结,一个JAVA人的十年人生路
- Day 14 20190129 老男孩python学习第14天 内容整理
- Jq将字符串复制粘贴到剪贴板
- 知物由学 |“网状世界”下,无处可逃的信息安全
- 电商实例、业务并发、网站并发及解决方法
- 微软vc运行库地址VC9VC11
- QQ小程序激励广告接入与使用
- 小程序底部导航栏动态生成
- 赚钱大师小程序【最新版5.9.9】商城/佣金即时提现/分销推广/话费充值/美团饿了么外卖
- Latex 图片/表格位置不正确
- IDEA报错 Cannot resolve method ‘xxx‘ in ‘xxx‘
- Element Plus 虚拟化表格组件的使用(排序、筛选、自定义单元格渲染) - 个人使用总结
- 微服务架构中服务注册与发现
- OpenGL版本查看
- 原创如何批量修改文件名称,合并ts文件片段
- 读《现代软件工程——构建之法》有感