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杀死一个线程的方法
Sep 06 Python
Python实现ssh批量登录并执行命令
Oct 25 Python
使用Python对Csv文件操作实例代码
May 12 Python
Python MySQL数据库连接池组件pymysqlpool详解
Jul 07 Python
python逆序打印各位数字的方法
Jun 25 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
Aug 01 Python
python实现汉诺塔算法
Mar 01 Python
对Python实现简单的API接口实例讲解
Dec 10 Python
python七夕浪漫表白源码
Apr 05 Python
Django框架 信号调度原理解析
Sep 04 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
Mar 30 Python
Python性能分析工具py-spy原理用法解析
Jul 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
PHP伪造referer实例代码
2008/09/20 PHP
php 安全过滤函数代码
2011/05/07 PHP
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
layui实现数据分页功能
2019/07/27 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
优秀毕业生推荐信
2013/11/02 职场文书
仓库管理专业个人自我评价范文
2013/11/11 职场文书
长城导游词
2015/01/30 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android
linux目录管理方法介绍
2022/06/01 Servers
Golang gRPC HTTP协议转换示例
2022/06/16 Golang