澳门新葡萄京官网注册 3

微信小程序实现人脸识别登陆的示例代码_javascript技巧_脚本之家

帝国CMS因允许多用户组注册,所以在注册页面会有一个选择注册用户组的界面,即使网站只用了一个用户组也会出现。

众所周知App用户在产品使用过程中每一步都可能流失,走不到最后。那么怎么增加转化率减少流失率是每个运营人都在探索的问题,利用漏斗模型,可以帮助运营清楚知道用户为何在那一步离开,怎么才能做得更好。

前言

如果想去掉这个页面,直接进入注册页面,那么可按以下办法修改

什么是漏斗?

这是一篇关于一个原创微信小程序开发过程的原创文章。涉及到的核心技术是微信小程序开发方法和百度云人脸识别接口。小程序的主体是一个用于个人密码存储的密码管理器,在登陆注册阶段,需要调用百度云人脸识别接口以及百度云在线人脸库的管理接口。本文主要涉及登陆注册模块的实现,而且不需要PHP后台代码,完全在线调用接口实现,希望后来的你能有所收获!

打开 e/class/user.php 文件

漏斗帮您分析用户使用过程中每一步的转化率与流失率,例如用户在互联网金额注册时,有如下几步

步骤

查找:

1)进入注册页面

步骤 涉及接口 拍摄或者相册选择 并 上传比对样本照片到 人脸库
人脸库管理接口 拍摄照片并上传,云服务器在线比对
人脸库照片与上传图片的相似度 人脸识别接口 获取返回结果 人脸识别接口

$changeregisterurl=ChangeRegister.php

2)输入用户名密码

开发过程

替换为:

3)输入手机号发送验证码

1.拍摄人脸图片上传至人脸库—注册

$changeregisterurl=

4)短信验证码通过绑定手机号

准备工作:需要在百度云注册,并创建人脸识别的应用。

5)身份证号实名认证

百度云:

您可以将上述流程创建一个漏斗模型,即可以分析每一步的转化率与留存率,从而调整注册流程,比如说第四步流失率多大,可能为短信运营商不稳定。

注册完成后,进入管理控制台->产品服务->人工智能->人脸识别->创建应用->填写必要信息->立即创建

澳门新葡萄京官网注册,功能介绍

至此,我们已经创建好了人脸识别的应用。接下来,进入应用列表,找到我们才新建的应用,查看人脸库,我们需要创建用户组

澳门新葡萄京官网注册 1

至此,我们已经完成了在云上的所有必要操作。下面,我们在小程序中,拍照上传即可。

1)设置漏斗步骤

拍照上传

可添加事件,每个事件可设置不同的属性筛选条件,最多添加10个步骤,如下图则添加了一个购买商品漏斗流程

需要在pages中新建一个目录,用来承载我们的登陆注册模块。就假定为
camera{camera.js camera.wxml camera.wxss camera.json}

澳门新葡萄京官网注册 2

主要文件自然是 *.wxml 和 *.js 了。

2)设置转化周期

camera.wxml

默认选择转化周期为1天,即第一步骤事件发生24小时内要完成所有的事件步骤,才算完成转化

 授权请升级微信版本 拍照  注册须知 

转化周期也可以自由设置,最多30天

我所谓的授权是,我需要获取用户微信的昵称来充当我人脸库照片的用户id,你可以不需要

您也可以设置为转化周期为一次访问session内,即单次访问期间要完成漏斗转化

调用wxAPI takePhoto() 拍照并获取src -> wx.request() 访问百度云
用先前创建的应用的API Key & Screct Key 获取 access_token
->wx.request() 访问百度云 上传 所拍照片详情可参考小程序API文档 以及
百度云API文档

澳门新葡萄京官网注册 3

// camera.jsconst app = getApp()Page({ data: { canIUse: wx.canIUse('button.open-type.getUserInfo'), nickName : "", src : "",//图片的链接 token: "", base64: "", msg:"" }, //拍照 takePhoto() { var that = this; //拍照 const ctx = wx.createCameraContext() ctx.takePhoto({ quality: 'high', success:  => { this.setData({ src: res.tempImagePath//获取图片 }) //图片base64编码 wx.getFileSystemManager().readFile({ filePath: this.data.src, //选择图片返回的相对路径 encoding: 'base64', //编码格式 success: res => { //成功的回调 this.setData } }) }//拍照成功结束 })//调用相机结束 //acess_token获取,qs:需要多次尝试 wx.request({ url: 'https://aip.baidubce.com/oauth/2.0/token', //是真实的接口地址 data: { grant_type: 'client_credentials', client_id: '**********************',//用你创建的应用的API Key client_secret: '************************'//用你创建的应用的Secret Key }, header: { 'Content-Type': 'application/json' // 默认值 }, success { that.setData({ token: res.data.access_token//获取到token }) } }) //上传人脸进行注册-----test wx.request({ url: 'https://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add?access_token=' + this.data.token, method: 'POST', data: { image: this.data.base64, image_type: 'BASE64', group_id: '********',//自己建的用户组id user_id: this.data.nickName//这里获取用户昵称 }, header: { 'Content-Type': 'application/json' // 默认值 }, success { that.setData({ msg: res.data.error_msg }) console.log //做成功判断 if (that.data.msg == 'SUCCESS') {//微信js字符串请使用单引号 wx.showToast({ title: '注册成功', icon: 'success', duration: 2000 }) wx.switchTab } } }), //失败尝试 wx.showToast({ title: '请重试', icon: 'loading', duration: 500 }) }, error { console.log },//获取用户信息 bindGetUserInfo: function{ this.setData({ nickName: e.detail.userInfo.nickName }) wx.showToast({ title: '授权成功', icon: 'success', duration: 1000 }) },//先授权登陆,再拍照注册 btnreg:function(){ wx.showModal({ title: '注册须知', content: '先授权登陆,再拍照注册哦!网络可能故障,如果不成功,请再试一下!', }) }})

3)选择用户

这里要多试几次,我以为可能由于网络的问题,会调用失败,
但其实是wx.request()是并发的,所以获取access_token和上传请求会冲突(可能没有获取到access_token就上传,会发生错误)。

选择用户,可以选择任意一个已创建的用户群组,单独对该用户群组的用户进行事件分析

将上传人脸的request放在access_token获取请求的success函数中,这样一来,就可以保证获取到access_token才进行上传操作。

选择用户组后,依旧可以选择用户属性筛选,对该群用户进行简单的筛选

另外,要开启微信小程序 IDE 的 不校验合法域名的选项(设置->项目设置
-> 勾选 不校验……)

分组:可见用户自动根据条件分为多个子用户组,如图,按“性别”进行分组,则可将用户自动分组为性别等于“男”、“女”的子用户组进行对比

2.拍照上传在线人脸识别—登陆

分组只能针对于枚举类的属性进行分组,我们会分析您上传的属性值,若不同的属性值个数小于100且为字符类型,系统会自动认定该属性为枚举类属性

找到指定用户组中与上传照片最相似的人脸并返回,比对结果。

举例:互联网金融App

我们仍然需要再建立一个页面来承载我们的登陆相关操作。就假定为
camera2{camera2.js camera2.wxml camera2.wxss camera2.json}

针对新用户投资可能有以下行为

camera2.wxml

注册页面→实名认证→浏览产品页→生成订单→支付订单→完成交易

拍照预览

如果以上哪个步骤转化率低,出现的问题可能是:UI问题、产品描述、交互体验等,或者出现bug。可根据具体情况分析,找到问题从而进行优化。

camera2.js 与注册大同小异,区别是图片上传的接口不同(这次是

人脸搜素),获取access_token、拍照、照片base64编码都相同。

以上是Mob统计分析漏斗模型的功能,能更好帮助运营找到问题所在,做精细化运营。最后强调Mob统计分析免费,为开发者服务。

// camera.jsPage({ data: { base64: "", token: "", msg: null }, //拍照并编码 takePhoto() { //拍照 const ctx = wx.createCameraContext() ctx.takePhoto({ quality: 'high', success:  => { this.setData({ src: res.tempImagePath }) } }) var that = this; //图片base64编码 wx.getFileSystemManager().readFile({ filePath: this.data.src, //选择图片返回的相对路径 encoding: 'base64', //编码格式 success: res => { //成功的回调 that.setData } }) //acess_token获取 wx.request({ url: 'https://aip.baidubce.com/oauth/2.0/token', //真实的接口地址 data: { grant_type: 'client_credentials', client_id: '**************************', client_secret: '*******************************'//用自己的 }, header: { 'Content-Type': 'application/json' // 默认值 }, success { that.setData({ token: res.data.access_token//获取到token }) } }) //上传人脸进行 比对 wx.request({ url: 'https://aip.baidubce.com/rest/2.0/face/v3/search?access_token=' + that.data.token, method: 'POST', data: { image: this.data.base64, image_type: 'BASE64', group_id_list: '********'//自己建的用户组id }, header: { 'Content-Type': 'application/json' // 默认值 }, success { that.setData({ msg: res.data.result.user_list[0].score }) if{ wx.showToast({ title: '验证通过', icon: 'success', duration: 1000 }) //验证通过,跳转至UI页面 wx.switchTab } } }); wx.showToast({ title: '请重试', icon: 'loading', duration: 500 }) }, error { console.log

至此,我们的登陆也搞定了。

注意:上述的 登陆注册 是一个某个小程序的一个模块。关系如下

所以,需要在index页面中设置按钮,来跳转到注册以及登陆页面,然后注册登陆成功后,再跳转至其他功能页面。

这次小程序实战,对我自己也是一个不小的挑战,对比各个云接口、看接口文档、查资料,耗费了大概十来天。但是,我相信大有裨益。另外,对我参考的博客和回答的诸位表示感谢。我们一起前进!

参考资料

百度云接口文档.v3版

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

发表评论

电子邮件地址不会被公开。 必填项已用*标注