django--調用百度AI接口實現人臉註冊登陸

面部識別----考勤打卡、註冊登陸、面部支付等等...感受很高大上，又很方便，下面用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)})

 

 

 

結束！