Django调用百度AI接口实现人脸注册登录代码实例

时间:2021-05-22

面部识别----考勤打卡、注册登录、面部支付等等...感觉很高大上,又很方便,下面用python中的框架--django完成一个注册登录的功能,调用百度AI的接口,面部识别在网上也有好多教程,可以自己建模,训练模型,但是这都需要大量的数据去提高模型的准确度,我们直接用了百度AI的接口,十分的快捷、高效、准确,下来码一下代码啦!!

首先需要在百度AI官网注册一个应用,免费,并提供强大的人脸库。

  1.注册表单

<div class="tab-content"> <div class="tab-content-inner active" data-content="signup"> <!-- <form action="{% url 'regist' %}" method="POST"> --> <div class="row form-group"> <div class="col-md-12"> <input type="text" class="form-control" id="username" placeholder="用户名"> </div> </div> <div class="row form-group"> <div class="col-md-12"> <input type="text" class="form-control" id="mobile" placeholder="手机号"> </div> </div> <div class="row form-group"> <div class="col-md-12"> <input type="password" class="form-control" id="password" placeholder="密码"> </div> </div> <div class="row form-group"> <div class="col-md-12"> <!-- <input type="text" class="form-control" id="mobile_code" placeholder="验证码"> <input type="button" value=" 获取验证码" id="zphone"> --> </div> </div> <div class="row form-group"> <div class="col-md-12"> <label for="password2"><font color='green'>新用户点击注册会有面部特征收集哦!</font></label> </div> </div> <div class="row form-group"> <div class="col-md-12"> <input type="submit" class="btn btn-primary" value="注册" id="regist"> </div> </div> <!-- </form> --> </div>

  2.注册时调用摄像头,ajax封装给后端的数据

<!-- jQuery --> <script src="../static/assets/js/jquery.min.js"></script> <!-- jQuery Easing --> <script src="../static/assets/js/jquery.easing.1.3.js"></script> <!-- Bootstrap --> <script src="../static/assets/js/bootstrap.min.js"></script> <!-- Waypoints --> <script src="../static/assets/js/jquery.waypoints.min.js"></script> <!-- Carousel --> <script src="../static/assets/js/owl.carousel.min.js"></script> <!-- countTo --> <script src="../static/assets/js/jquery.countTo.js"></script> <!-- Magnific Popup --> <script src="../static/assets/js/jquery.magnific-popup.min.js"></script> <script src="../static/assets/js/magnific-popup-options.js"></script> <!-- Main --> <script src="../static/assets/js/main.js"></script><script> !(function () { // 老的浏览器可能根本没有实现 mediaDevices,所以我们可以先设置一个空的对象 if (navigator.mediaDevices === undefined) { navigator.mediaDevices = {}; } if (navigator.mediaDevices.getUserMedia === undefined) { navigator.mediaDevices.getUserMedia = function (constraints) { // 首先,如果有getUserMedia的话,就获得它 var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口 if (!getUserMedia) { return Promise.reject(new Error('getUserMedia is not implemented in this browser')); } // 否则,为老的navigator.getUserMedia方法包裹一个Promise return new Promise(function (resolve, reject) { getUserMedia.call(navigator, constraints, resolve, reject); }); } } const constraints = { video: true, audio: false }; videoPlaying = false; v = document.getElementById('v'); promise = navigator.mediaDevices.getUserMedia(constraints); promise.then(stream => { // 旧的浏览器可能没有srcObject if ("srcObject" in v) { v.srcObject = stream; } else { // 防止再新的浏览器里使用它,应为它已经不再支持了 v.src = window.URL.createObjectURL(stream); } v.onloadedmetadata = function (e) { v.play(); videoPlaying = true; }; }).catch(err => { console.error(err.name + ": " + err.message); }) document.getElementById('regist').addEventListener('click', function () { if (videoPlaying) { mycanvas = document.getElementById('canvas'); mycanvas.width = v.videoWidth; mycanvas.height = v.videoHeight; mycanvas.getContext('2d').drawImage(v, 0, 0); // 图片数据转换成数组 data = mycanvas.toDataURL('image/webp'); document.getElementById('photo').setAttribute('src', data); // ajax提交数据到后台 $.ajax({ type:"POST", url:'http://127.0.0.1:8000/regist/', data:{username:$("#username").val(),mobile:$('#mobile').val(),password:$('#password').val(),mobile_code:$('#mobile_code').val(),imagecontent:data}, dataType:"json", success:function(data){ alert(data.result) $('#resText').text(data['result']); if(data.code == 200){ window.location.href='http://127.0.0.1:8000/home/' }else{ alert(data.result); } } }) } }, false);

  3.将已经注册的应用中的各种id和key贴上来

# 导入百度AIfrom django.apps import AppConfigfrom aip import AipFaceimport json# django内置事务from django.db import transaction# 导入状态码from jyapp.ErrorCode import * # 官网给出的状态码,通过pandas读出保存到# 百度AI基本信息class AppConfig(AppConfig): name = '' APP_ID = '' API_KEY = '' SECRECT_KEY = '' client = AipFace(APP_ID,API_KEY,SECRECT_KEY) client.setConnectionTimeoutInMillis(1000*5) client.setSocketTimeoutInMillis(1000*5)

  4.注册接口,按照接口文档传入必须的参数,手机验证码功能已在本文中注释掉,需要时自行百度。

# 注册class Regist(View): def get(self,request): return render(request,'moban_index.html') def post(self,request): # 获取前端数据 imagecontent = request.POST.get('imagecontent') username = request.POST.get('username') mobile = request.POST.get('mobile') password = request.POST.get('password') # mobile_code = request.POST.get('mobile_code') # print(imagecontent,username,mobile,password,mobile_code) # mobile_code_right = request.session.get('message_code') if not all([imagecontent,username,mobile,password]): return JsonResponse({'result':'注册信息不能为空'}) # if mobile_code != mobile_code_right: # return JsonResponse({'result':'请输入正确的验证码'}) else: # 验证该用户是否存在 user = models.User.objects.filter(mobile=mobile) if user: return JsonResponse({'result':'该用户已存在,请直接登录'}) else: try: # 引入事务 with transaction.atomic(): # 分割字符串 base_data = imagecontent.split(',')[1] # base64解码 base64_decode = base64.b64decode(base_data) # 图片写入本地 with open('static/image/'+mobile+'.jpeg', 'wb') as f: f.write(base64_decode) # 添加到mysql数据库 models.User.objects.create( imagecontent = 'static/image/'+mobile+'.jpeg', # 可以根据需求是否保存注册照片到数据库,也可以通过百度AI人脸库查看 username = username, mobile = mobile, password = password, ) imageType = 'BASE64' groupId = 'usergroup' # 自定义 userId = mobile # 加入可选参数 options = {} options['user_info'] = username options['quality_control'] = 'NORMAL' options['liveness_control'] = 'LOW' result = AppConfig.client.addUser(base_data,imageType,groupId,userId,options) print(result) error_code = result['error_code'] if isinstance(error_code,int) and error_code == 0: request.session['mobile'] = mobile return JsonResponse({'code':200,'result':'注册成功'}) # return JsonResponse({'result':'注册成功'}) else: error = ErrorCode().getErrorInfo(error_code) return JsonResponse({'result':'{}'.format(error)}) except: return JsonResponse({'result':'注册失败'})

  5.登录.html

<div class="tab-content-inner" data-content="login"> <!-- <form action="{% url 'login' %}" method="POST"> --> <div class="row form-group"> <div class="col-md-12"> <input type="text" class="form-control" id="mobile1" placeholder="请输入手机号"> </div> </div> <div class="row form-group"> <div class="col-md-12"> <input type="password" class="form-control" id="password1" placeholder="请输入密码"> </div> </div> <div class="row form-group"> <div class="col-md-12"> <input type="submit" class="btn btn-primary" value="密码登陆" id="login"> <input type="submit" class="btn btn-primary" value="人脸登陆" id="login_face"> </div> </div> <!-- </form> --> </div>

  6.ajax封装登录信息

document.getElementById('login_face').addEventListener('click', function () { if (videoPlaying) { mycanvas = document.getElementById('canvas'); mycanvas.width = v.videoWidth; mycanvas.height = v.videoHeight; mycanvas.getContext('2d').drawImage(v, 0, 0); data = mycanvas.toDataURL('image/webp'); document.getElementById('photo').setAttribute('src', data); $.ajax({ type:"POST", url:'http://127.0.0.1:8000/login_face/', data:{mobile:$('#mobile1').val(),imagecontent:data}, dataType:"json", success:function(data){ $('#resText').text(data['result']); document.getElementById('photo').setAttribute('src','static/'+data['point72src']); console.log(data['point72src']) if(data.code == 200){ alert(data.result) window.location.href='http://127.0.0.1:8000/idcard/' }else{ alert(data.result); } } }) } }, false);

  7.人脸快速登录

class Login_face(View): def get(self,request): return render(request,'moban_index.html') def post(self,request): imagecontent = request.POST.get('imagecontent') mobile = request.POST.get('mobile') if not all([imagecontent,mobile]): return JsonResponse({'code':100,'result':'登录信息不能为空'}) else: user = models.User.objects.filter(mobile=mobile) if not user: return JsonResponse({'code':113,'result':'用户不存在'}) else: base_data = imagecontent.split(',')[1] imageType = 'BASE64' groupIdList = 'usergroup' # 加入可选参数 options = {} options['max_user_num'] = 1 options['quality_control'] = 'NORMAL' options['liveness_control'] = 'LOW' # options['user_id'] = mobile result = AppConfig.client.search(base_data,imageType,groupIdList,options) print(result) error_code = result['error_code'] try: user_id = result['result']['user_list'][0]['user_id'] score = result['result']['user_list'][0]['score'] if isinstance(error_code,int) and error_code == 0 and user_id == mobile and score >= 90: request.session['mobile'] = mobile return JsonResponse({'code':200,'result':'快速登录成功'}) else: error = ErrorCode().getErrorInfo(error_code) return JsonResponse({'result':'{}'.format(error)}) except: error = ErrorCode().getErrorInfo(error_code) return JsonResponse({'result':'{}'.format(error)})

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章