diff --git a/public/faceLoginIE/index.html b/public/faceLoginIE/index.html
index b623071..a40c46a 100644
--- a/public/faceLoginIE/index.html
+++ b/public/faceLoginIE/index.html
@@ -55,7 +55,11 @@
// });
function receiveMessageFromParent ( event ) {
- webcam.capture();
+ if(event.data == 'releaseCamera'){
+ location.reload();
+ }else if(event.data = 'capture'){
+ webcam.capture();
+ }
//$('#base64image').attr('src', 'data:image/jpg;base64,' + event.data.data);
};
diff --git a/src/pages/userformal/login/index.tsx b/src/pages/userformal/login/index.tsx
index 5fc5be3..a9158b4 100644
--- a/src/pages/userformal/login/index.tsx
+++ b/src/pages/userformal/login/index.tsx
@@ -1,5 +1,5 @@
import React, { useEffect, useState, useRef } from 'react';
-import { Form, Button, Input, Row, Col, Modal, Spin, message } from 'antd';
+import { Form, Button, Input, Row, Col, Modal, Spin, message, Tabs } from 'antd';
import { UserOutlined, LockOutlined, SafetyCertificateOutlined, VideoCameraOutlined } from '@ant-design/icons';
import './style.less';
import { changePass, rgbToBase64 } from './service';
@@ -23,15 +23,19 @@ export interface RgbParams {
const Index: React.FC<{}> = () => {
const [form] = Form.useForm();
+ const [form2] = Form.useForm();
const [imgUrl, setImgUrl] = useState('');
const [tmpToken, setTmpToken] = useState('');
const remainingTime = 3 //刷新token的剩余时间，单位小时
const [changeForm] = Form.useForm();
const [isModalVisible, setIsModalVisible] = useState(false)
const [spinning, setSping] = useState(false);//加载遮罩
- const [isFaceLogin, setIsFaceLogin] = useState(false);
const video = useRef();
const whetherIE = useRef(false);
+ const mediaStreamTrack = useRef();
+ const { TabPane } = Tabs;
+ const [submitLoading, setSubmitLoading] = useState(false);
+ const [faceLoginDisable, setFaceLoginDisable] = useState(false);
const genRandomString = (len: number) => {
const text = 'abcdefghijklmnopqrstuvwxyz0123456789';
@@ -84,8 +88,28 @@ const Index: React.FC<{}> = () => {
});
};
+ const onChange = (key: string) => {
+ if(key == '2'){
+ BrowserType();
+ InitMedia();
+ }else{
+ if(allowedToFaceLogin()){
+ if(whetherIE.current){
+ releaseCamera('faceLoginFrame');
+ }else{
+ mediaStreamTrack.current?.stop();
+ }
+ }
+ }
+ };
+
+ const releaseCamera = (id:string) => {
+ const childFrameObj = document.getElementById(id);
+ childFrameObj?.contentWindow?.postMessage('releaseCamera', '*');
+ }
+
const hanleFaceSubmit = async (multipartFiles: any, values: any) => {
- let userName = form.getFieldValue('userName');
+ let userName = form2.getFieldValue('userName');
if(whetherIE.current){
if(!multipartFiles){
const childFrameObj = document.getElementById('faceLoginFrame');
@@ -96,13 +120,17 @@ const Index: React.FC<{}> = () => {
if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
refreshToken(res?.data)
} else {
+ releaseCamera('faceLoginFrame');
sessionStorage.setItem('Authorization', res?.data?.value);
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
sessionStorage.setItem('scope', res?.data?.scope);
history.push('/redirect');
}
}
- });
+ })
+ .finally(
+ () => {setSubmitLoading(false);}
+ );
}
}
else{
@@ -116,18 +144,23 @@ const Index: React.FC<{}> = () => {
hanleFaceSubmit(result, null);
})
}else{
+ setSubmitLoading(true);
await ZjfakeFaceLogin({ userName, multipartFiles }).then((res) => {
if (res?.success) {
if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
refreshToken(res?.data)
} else {
+ mediaStreamTrack.current?.stop();
sessionStorage.setItem('Authorization', res?.data?.value);
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
sessionStorage.setItem('scope', res?.data?.scope);
history.push('/redirect');
}
}
- });
+ })
+ .finally(
+ () => {setSubmitLoading(false);}
+ );
}
}
}
@@ -158,19 +191,6 @@ const Index: React.FC<{}> = () => {
})
}
}
-
- //登录模式改变事件
- const LoginModeChangeEvent = (mode: any) => {
- switch(mode){
- case 1:
- setIsFaceLogin(true);
- InitMedia();
- break;
- case 2:
- setIsFaceLogin(false);
- break;
- }
- }
//浏览器类型
const BrowserType = () =>{
//取得浏览器的userAgent字符串
@@ -210,7 +230,6 @@ const Index: React.FC<{}> = () => {
}
//初始化video
const InitMedia = () => {
- BrowserType();
if(!whetherIE.current){
InitUserMedia({video : {width: 480, height: 320}}, success, error);
}
@@ -233,13 +252,19 @@ const Index: React.FC<{}> = () => {
}
//调用媒体设备成功回调方法
const success = (stream: any) => {
- //兼容webkit核心浏览器
- const CompatibleURL = window.URL || window.webkitURL;
- //将视频流设置为video元素的源
- console.log(stream);
- //video.src = CompatibleURL.createObjectURL(stream);
- video.current.srcObject = stream;
- video.current.play();
+ var result = stream.getVideoTracks().some(function(track:any) {
+ return track.enabled && track.readyState === 'live';
+ });
+ if (result) {
+ //兼容webkit核心浏览器
+ const CompatibleURL = window.URL || window.webkitURL;
+ //将视频流设置为video元素的源
+ console.log(stream);
+ //video.src = CompatibleURL.createObjectURL(stream);
+ video.current.srcObject = stream;
+ mediaStreamTrack.current = stream.getTracks()[0];
+ video.current.play();
+ }
}
//调用媒体设备失败回调方法
const error = (error:any) => {
@@ -262,16 +287,46 @@ const Index: React.FC<{}> = () => {
//RgbToBase64
const RgbToBase64 = async (image:any) =>{
+ setSubmitLoading(true);
await rgbToBase64({image}).then(res => {
const _blob = base64ToBlob( 'data:image/jpg;base64,' + res.data);
hanleFaceSubmit(_blob, null);
+ }).catch(e=>{
+ setSubmitLoading(false);
});
}
+
+ //是https或者是本地
+ const httpsOrLocal = () => {
+ let protocol = document.location.protocol;
+ if(protocol == 'https'){
+ return true;
+ }else{
+ let host = window.location.hostname;
+ if(host == '127.0.0.1' || host == 'localhost'){
+ return true;
+ }
+ }
+ return false;
+ }
+
+ //是否允许人脸登录
+ const allowedToFaceLogin = () => {
+ let browseType = BrowserType()
+ if((browseType == 11 || browseType == -1) && httpsOrLocal()){
+ return true;
+ }
+ return false;
+ }
+
useEffect(() => {
cookie.remove('mall3_token');
sessionStorage.clear();
changeCaptcha();
+ if(!allowedToFaceLogin()){
+ setFaceLoginDisable(true);
+ }
}, []);
return (
@@ -284,109 +339,110 @@ const Index: React.FC<{}> = () => {
-
登 录
- {!isFaceLogin ? (
-
):(
-
)}
+
+
+
+
+ }
+ placeholder="请输入验证码"
+ />
+
+
+
+ ![]()
changeCaptcha()} src={imgUrl} />
+
+
+
+ {/*
+ 记住密码
+ */}
+
+
+
+
+
+
+
+
+
- {/* 版权所有：中国联合网络通信有限公司
*/}