diff --git a/src/pages/userformal/faceLogin/FrameFaceLogin.tsx b/src/pages/userformal/faceLogin/FrameFaceLogin.tsx index f9bc54f..87b047b 100644 --- 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); } }); } diff --git a/src/pages/userformal/login/index.tsx b/src/pages/userformal/login/index.tsx index 918f5cc..1e469cc 100644 --- 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(''); @@ -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} > = () => { {/* 加载摄像头 */} - {!whetherIE.current ? ():()} + {!whetherIE.current ? ():()} - diff --git a/src/pages/userformal/login/service.ts b/src/pages/userformal/login/service.ts index 0e91b9b..113af4d 100644 --- 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 + }); } \ No newline at end of file diff --git a/src/services/login.ts b/src/services/login.ts index 8d7d9bd..54be2b1 100644 --- a/src/services/login.ts +++ b/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', {