专家人脸集成后台方法

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);
       }
     });
   }

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请求参数
+
+  //RgbToBase64
+  const RgbToBase64 = async (image:any) =>{
+    const _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', '*');
+    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>

src/pages/userformal/login/service.ts

@@ -9,3 +9,10 @@ export async function changePass(params: any) {
     params
   });
 }
+
+export async function rgbToBase64(params: any) {
+  return request('/api/core-service-ebtp-userinfo/outer/v1/ebtp/face/rgbArray2Base64', {
+    method: 'post',
+    params
+  });
+}

src/services/login.ts

@@ -8,6 +8,11 @@ export interface LoginParamsType {
   tmpToken: string;
 }
 
+export interface FaceLoginParamsType {
+  userName: string;
+  multipartFiles: Blob;
+}
+
 
 const sm2 = require('sm-crypto').sm2;
 const encrypt = getEncrypt();
@@ -54,6 +59,19 @@ export async function ZjfakeAccountLogin(params: LoginParamsType) {
   });
 }
 
+// 专家人脸登录
+export async function ZjfakeFaceLogin(params: FaceLoginParamsType){
+  var formData = new FormData();
+  formData.append('idNo', params.userName);
+  formData.append('multipartFiles', params.multipartFiles, 'upload_face.jpeg');
+  return request('/api/core-service-ebtp-userinfo/outer/v1/ebtp/face/faceCompare', {
+    method: 'POST',
+    requestType: 'form',
+    mode:'cors',
+    body:formData
+  });
+}
+
 // 天宫云门户
 export async function CloudfakeAccountLogin(params: LoginParamsType) {
   // return request('/api/mall-auth/login', {