专家人脸集成后台方法

2022-09-02 16:10:56 +08:00
parent 378eeda6d4
commit b64dce6ce4
4 changed files with 96 additions and 83 deletions
--- a/src/pages/userformal/faceLogin/FrameFaceLogin.tsx
+++ b/src/pages/userformal/faceLogin/FrameFaceLogin.tsx
@ -16,7 +16,7 @@ export default class FrameFaceLogin extends React.Component {
    window.addEventListener("message", (e) => {
      const { image} = e.data || {}; //传递的数据
      if (image) {
-        this.props.faceCompareEvent(image);
+        this.props.faceCompareEvent(image, null);
      }
    });
  }
--- a/src/pages/userformal/login/index.tsx
+++ b/src/pages/userformal/login/index.tsx
@ -2,19 +2,25 @@ import React, { useEffect, useState, useRef } from 'react';
 import { Form, Button, Input, Row, Col, Modal, Spin, message } from 'antd';
 import { UserOutlined, LockOutlined, SafetyCertificateOutlined, VideoCameraOutlined } from '@ant-design/icons';
 import './style.less';
-import { changePass } from './service';
+import { changePass, rgbToBase64 } from './service';
 import logo from '@/images/login/logoPic.png';
-import { refreshTokenApi, ZjfakeAccountLogin } from '@/services/login';
+import { refreshTokenApi, ZjfakeAccountLogin, ZjfakeFaceLogin } from '@/services/login';
 import { history } from 'umi';
 import cookie from 'react-cookies';
 import moment from 'moment';
 import FrameFaceLogin from '../faceLogin/FrameFaceLogin';
+import { fromPairs } from 'lodash';

 const layout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 13 },
 };

+export interface RgbParams {
+  type: string;
+  image: string;
+}
+
 const Index: React.FC<{}> = () => {
  const [form] = Form.useForm();
  const [imgUrl, setImgUrl] = useState<any>('');
@ -78,6 +84,54 @@ const Index: React.FC<{}> = () => {
    });
  };

+  const hanleFaceSubmit = async (multipartFiles: any, values: any) => {
+    let userName = form.getFieldValue('userName');
+    if(whetherIE.current){
+      if(!multipartFiles){
+        const childFrameObj = document.getElementById('faceLoginFrame');
+        childFrameObj.contentWindow.postMessage('capture', '*');  
+      }else{
+        await ZjfakeFaceLogin({ userName, multipartFiles }).then((res) => {
+          if (res?.success) {
+            if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
+              refreshToken(res?.data)
+            } else {
+              sessionStorage.setItem('Authorization', res?.data?.value);
+              sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
+              sessionStorage.setItem('scope', res?.data?.scope);
+              history.push('/redirect');
+            }
+          }
+        });
+      }
+    }
+    else{
+      if(!multipartFiles){
+        const canvas = document.createElement('canvas');
+        canvas.setAttribute('width','300');
+        canvas.setAttribute('height', '200');
+        const context = canvas.getContext('2d');
+        context.drawImage(video.current, 0, 0, 300, 200);
+        canvas.toBlob(function (result:any) {
+          hanleFaceSubmit(result, null);
+        })
+      }else{
+          await ZjfakeFaceLogin({ userName, multipartFiles }).then((res) => {
+            if (res?.success) {
+              if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
+                refreshToken(res?.data)
+              } else {
+                sessionStorage.setItem('Authorization', res?.data?.value);
+                sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
+                sessionStorage.setItem('scope', res?.data?.scope);
+                history.push('/redirect');
+              }
+            }
+          });
+        }
+      }
+  }
+
  const handleOk = () => { // 确定修改密码
    if (changeForm.getFieldValue("newPassword") !== changeForm.getFieldValue("newPassword1")) {
      message.warn('两次密码输入不一致，请重新输入')
@ -192,6 +246,7 @@ const Index: React.FC<{}> = () => {
      message.warn('无法获取到摄像头权限，请确认是否存在摄像头及是否授权使用摄像头');
      console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
  }
+
  //base64转blob
  const base64ToBlob = (base64:string) =>{
    const parts = base64.split(";base64,");
@ -204,84 +259,16 @@ const Index: React.FC<{}> = () => {
    }
    return new Blob([uInt8Array], { type: contentType });
  };
-  //人脸比对
-  const Recog=(image:any) =>{
-    if(!whetherIE.current){
-        setSping(true);
-        const canvas = document.createElement('canvas');
-        canvas.setAttribute('width','300');
-        canvas.setAttribute('height', '200');
-        const context = canvas.getContext('2d');
-        context.drawImage(video.current, 0, 0, 300, 200);
-        canvas.toBlob(function (result:any) {
-          var formData = new FormData();
-          formData.append('multipartFiles', result, 'upload_face.jpeg');
-          const url = 'http://127.0.0.1:8081/outer/v1/ebtp/face/faceCompare';
-          window.fetch(url,{
-              method:'post',
-              mode:'cors',
-              body : formData
-          }).then(res => res.json()).then(res => {
-              if (null != res) {
-                  setSping(false);
-                  var _data = eval("(" + res['data'] + ")");
-                  var _similarity = _data['UNI_BSS_BODY']['FACE_COMPARE_RSP']['SIMILARITY'];
-                  message.success('人脸比对成功:相似度' + _similarity);
-                  //关闭摄像头
-                  //video.current.srcObject.getTracks()[0].stop();
-              } else {
-                  setSping(false);
-                  message.error('人脸比对失败');
-              }
-          }).catch(e =>{
-              console.log(e);
-          }).finally(() => {
-              setSping(false);
-          });
-      });
-    }else{
-        setSping(true);
-        const url = 'http://127.0.0.1:8081/outer/v1/ebtp/face/rgbArray2Base64';
-        window.fetch(url,{
-            method:'post',
-            body : JSON.stringify({//post请求参数
-            type: 'pixel', 
-            rgb: image
-            })
-        }).then(res => res.json()).then(res => {
-            //base64图片进行人脸比对
-            var formData = new FormData();
-            formData.append('multipartFiles', base64ToBlob( 'data:image/jpg;base64,' + res.data), 'upload_face.jpeg');
-            const url2 = 'http://127.0.0.1:8081/outer/v1/ebtp/face/faceCompare';
-            window.fetch(url2,{
-                method:'post',
-                mode:'cors',
-                body : formData
-            }).then(res => res.json()).then(res => {
-                if (null != res) {
-                    setSping(false);
-                    var _data = eval("(" + res['data'] + ")");
-                    var _similarity = _data['UNI_BSS_BODY']['FACE_COMPARE_RSP']['SIMILARITY'];
-                    message.success('人脸比对成功:相似度' + _similarity);
-                    //关闭摄像头
-                    //video.current.srcObject.getTracks()[0].stop();
-                } else {
-                    setSping(false);
-                    message.error('人脸比对失败');
-                }
-            }).catch(e =>{
-                console.log(e);
-            }).finally(() => {
-                setSping(false);
-            });
-        }) 
-    }
-  }

-  //发送拍照请求
-  const SendRequestToCapture = () => {
-    const childFrameObj = document.getElementById('faceLoginFrame');
-    childFrameObj.contentWindow.postMessage('capture', '*');
+  //RgbToBase64
+  const RgbToBase64 = async (image:any) =>{
+    const _body = JSON.stringify({//post请求参数
+      type: 'pixel', 
+      rgb: image
+    });
+    await rgbToBase64({_body}).then(res => res.json()).then(res => {
+      hanleFaceSubmit(base64ToBlob( 'data:image/jpg;base64,' + res.data), null);
+    });
  }
  
  useEffect(() => {
@ -373,7 +360,7 @@ const Index: React.FC<{}> = () => {
              className="form-box"
              initialValues={{ remember: true }}
              form={form}
-              //onFinish={handleSubmit}
+              onFinish={hanleFaceSubmit.bind(this, null)}
            // onFinishFailed={onFinishFailed}
            >
              <Form.Item
@ -391,10 +378,11 @@ const Index: React.FC<{}> = () => {
              </Form.Item>
              {/* 加载摄像头 */}
              <Form.Item>
-                  {!whetherIE.current ? (<video ref={video} width="382" height="200"></video>):(<FrameFaceLogin faceCompareEvent = {Recog}/>)}
+                  {!whetherIE.current ? (<video ref={video} width="382" height="200"></video>):(<FrameFaceLogin faceCompareEvent = {hanleFaceSubmit}/>)}
              </Form.Item>
              <Form.Item>
-                <Button type="primary" className="w100" htmlType="submit" onClick={()=> {!whetherIE.current ? Recog('') : SendRequestToCapture()}}>
+              {/* onClick={() => {hanleFaceSubmit(null, null);}} */}
+                <Button type="primary" className="w100" htmlType="submit">
                  登 录
                </Button>
              </Form.Item>
--- a/src/pages/userformal/login/service.ts
+++ b/src/pages/userformal/login/service.ts
@ -8,4 +8,11 @@ export async function changePass(params: any) {
    method: 'post',
    params
  });
+}
+
+export async function rgbToBase64(params: any) {
+  return request('/api/core-service-ebtp-userinfo/outer/v1/ebtp/face/rgbArray2Base64', {
+    method: 'post',
+    params
+  });
 }