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


Posted in Python onApril 23, 2020

面部识别----考勤打卡、注册登录、面部支付等等...感觉很高大上,又很方便,下面用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贴上来

# 导入百度AI
from django.apps import AppConfig
from aip import AipFace
import 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)})

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

Python 相关文章推荐
Python中实现远程调用(RPC、RMI)简单例子
Apr 28 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
Jun 07 Python
Python使用struct处理二进制的实例详解
Sep 11 Python
Python实现matplotlib显示中文的方法详解
Feb 06 Python
python列表生成式与列表生成器的使用
Feb 23 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
Jun 07 Python
对pandas中时间窗函数rolling的使用详解
Nov 28 Python
Python3.5多进程原理与用法实例分析
Apr 05 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
Jun 24 Python
python基于K-means聚类算法的图像分割
Oct 30 Python
python默认参数调用方法解析
Feb 09 Python
python 使用递归实现打印一个数字的每一位示例
Feb 27 Python
Anaconda和ipython环境适配的实现
Apr 22 #Python
Django框架获取form表单数据方式总结
Apr 22 #Python
Anaconda的安装及其环境变量的配置详解
Apr 22 #Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
Apr 22 #Python
Django实现图片上传功能步骤解析
Apr 22 #Python
Django框架配置mysql数据库实现过程
Apr 22 #Python
jupyter notebook 实现matplotlib图动态刷新
Apr 22 #Python
You might like
javascript的函数
2007/01/31 Javascript
js常用代码段收集
2011/10/28 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
汽车维修专业个人求职信范文
2014/01/01 职场文书
初一英语教学反思
2014/01/11 职场文书
课例研修方案
2014/05/31 职场文书
企业口号大全
2014/06/12 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
材料员岗位职责范本
2015/04/11 职场文书
七年级作文之冬景
2019/11/07 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang