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 获取文件列表(或是目录例表)
Mar 25 Python
Python调用命令行进度条的方法
May 05 Python
给Python中的MySQLdb模块添加超时功能的教程
May 05 Python
利用python微信库itchat实现微信自动回复功能
May 18 Python
windows下Virtualenvwrapper安装教程
Dec 13 Python
python web基础之加载静态文件实例
Mar 20 Python
详解Python如何生成词云的方法
Jun 01 Python
Python 限制线程的最大数量的方法(Semaphore)
Feb 22 Python
django 多对多表的创建和插入代码实现
Sep 09 Python
在keras中获取某一层上的feature map实例
Jan 24 Python
Python自动化测试笔试面试题精选
Mar 12 Python
numpy的Fancy Indexing和array比较详解
Jun 11 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
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
Prototype使用指南之string.js
2007/01/10 Javascript
JavaScript 函数调用规则
2009/09/14 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
python获得一个月有多少天的方法
2015/06/04 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
安装docker-compose的两种最简方法
2019/07/30 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
深入浅析python的第三方库pandas
2020/02/13 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
Numpy 多维数据数组的实现
2020/06/18 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
日期和时间问题
2015/01/04 面试题
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
完美主义个人的自我评价
2014/02/17 职场文书
质量承诺书范文
2014/03/27 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
转让协议书范本
2014/09/13 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript