Merge branch '20220815-登录过程中用户信息错误导致登录失败的业务处理' of http://10.124.128.2:8888/eshop/fe_service_ebtp_frontend into uat-export-face-recog
This commit is contained in:
jl-zhoujl2
@ -32,7 +32,7 @@ const Index: React.FC<{}> = () => {
|
||||
const [spinning, setSping] = useState<boolean>(false);//加载遮罩
|
||||
const video = useRef();
|
||||
const whetherIE = useRef<boolean>(false);
|
||||
const mediaStreamTrack = useRef<any>();
|
||||
const mediaStreamTrack = useRef<any>();
|
||||
const { TabPane } = Tabs;
|
||||
const [submitLoading, setSubmitLoading] = useState<boolean>(false);
|
||||
const [faceLoginDisable, setFaceLoginDisable] = useState<boolean>(false);
|
||||
@ -65,7 +65,7 @@ const Index: React.FC<{}> = () => {
|
||||
await refreshTokenApi(params, header).then(res => {
|
||||
if (res?.success == true) {
|
||||
sessionStorage.setItem('Authorization', res?.data?.value);
|
||||
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
|
||||
// sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
|
||||
sessionStorage.setItem('scope', res?.data?.scope);
|
||||
history.push('/redirect');
|
||||
}
|
||||
@ -79,7 +79,7 @@ const Index: React.FC<{}> = () => {
|
||||
refreshToken(res?.data)
|
||||
} else {
|
||||
sessionStorage.setItem('Authorization', res?.data?.value);
|
||||
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
|
||||
// sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
|
||||
sessionStorage.setItem('scope', res?.data?.scope);
|
||||
history.push('/redirect');
|
||||
}
|
||||
@ -89,32 +89,32 @@ const Index: React.FC<{}> = () => {
|
||||
};
|
||||
|
||||
const onChange = (key: string) => {
|
||||
if(key == '2'){
|
||||
if (key == '2') {
|
||||
BrowserType();
|
||||
InitMedia();
|
||||
}else{
|
||||
if(allowedToFaceLogin()){
|
||||
if(whetherIE.current){
|
||||
} else {
|
||||
if (allowedToFaceLogin()) {
|
||||
if (whetherIE.current) {
|
||||
releaseCamera('faceLoginFrame');
|
||||
}else{
|
||||
} else {
|
||||
mediaStreamTrack.current?.stop();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const releaseCamera = (id:string) => {
|
||||
const releaseCamera = (id: string) => {
|
||||
const childFrameObj = document.getElementById(id);
|
||||
childFrameObj?.contentWindow?.postMessage('releaseCamera', '*');
|
||||
childFrameObj?.contentWindow?.postMessage('releaseCamera', '*');
|
||||
}
|
||||
|
||||
const hanleFaceSubmit = async (multipartFiles: any, values: any) => {
|
||||
let userName = form2.getFieldValue('userName');
|
||||
if(whetherIE.current){
|
||||
if(!multipartFiles){
|
||||
if (whetherIE.current) {
|
||||
if (!multipartFiles) {
|
||||
const childFrameObj = document.getElementById('faceLoginFrame');
|
||||
childFrameObj.contentWindow.postMessage('capture', '*');
|
||||
}else{
|
||||
childFrameObj.contentWindow.postMessage('capture', '*');
|
||||
} else {
|
||||
await ZjfakeFaceLogin({ userName, multipartFiles }).then((res) => {
|
||||
if (res?.success) {
|
||||
if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
|
||||
@ -128,41 +128,41 @@ const Index: React.FC<{}> = () => {
|
||||
}
|
||||
}
|
||||
})
|
||||
.finally(
|
||||
() => {setSubmitLoading(false);}
|
||||
);
|
||||
.finally(
|
||||
() => { setSubmitLoading(false); }
|
||||
);
|
||||
}
|
||||
}
|
||||
else{
|
||||
if(!multipartFiles){
|
||||
else {
|
||||
if (!multipartFiles) {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.setAttribute('width','300');
|
||||
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) {
|
||||
canvas.toBlob(function (result: any) {
|
||||
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');
|
||||
}
|
||||
} 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);}
|
||||
() => { setSubmitLoading(false); }
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleOk = () => { // 确定修改密码
|
||||
@ -192,67 +192,67 @@ const Index: React.FC<{}> = () => {
|
||||
}
|
||||
}
|
||||
//浏览器类型
|
||||
const BrowserType = () =>{
|
||||
//取得浏览器的userAgent字符串
|
||||
var userAgent = navigator.userAgent;
|
||||
//判断是否IE<11
|
||||
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
|
||||
//判断是否IE的Edge浏览器
|
||||
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE;
|
||||
//判断是否IE11
|
||||
var isIE11 = userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1;
|
||||
if(isIE){
|
||||
var reIE = new RegExp("MSIE(\\d+\\.\\d+);");
|
||||
reIE.test(userAgent);
|
||||
var fIEVersion = parseFloat(RegExp["$1"]);
|
||||
if(fIEVersion == 7){
|
||||
return 7;
|
||||
}else if(fIEVersion == 8){
|
||||
return 8;
|
||||
}else if(fIEVersion == 9){
|
||||
return 9;
|
||||
}else if(fIEVersion == 10){
|
||||
return 10;
|
||||
}else{
|
||||
//IE版本<=7
|
||||
return 6;
|
||||
}
|
||||
}else if(isEdge){
|
||||
return 'edge';
|
||||
}else if(isIE11){
|
||||
//IE11
|
||||
whetherIE.current = true;
|
||||
return 11;
|
||||
}else{
|
||||
//不是IE浏览器
|
||||
return -1;
|
||||
const BrowserType = () => {
|
||||
//取得浏览器的userAgent字符串
|
||||
var userAgent = navigator.userAgent;
|
||||
//判断是否IE<11
|
||||
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
|
||||
//判断是否IE的Edge浏览器
|
||||
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE;
|
||||
//判断是否IE11
|
||||
var isIE11 = userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1;
|
||||
if (isIE) {
|
||||
var reIE = new RegExp("MSIE(\\d+\\.\\d+);");
|
||||
reIE.test(userAgent);
|
||||
var fIEVersion = parseFloat(RegExp["$1"]);
|
||||
if (fIEVersion == 7) {
|
||||
return 7;
|
||||
} else if (fIEVersion == 8) {
|
||||
return 8;
|
||||
} else if (fIEVersion == 9) {
|
||||
return 9;
|
||||
} else if (fIEVersion == 10) {
|
||||
return 10;
|
||||
} else {
|
||||
//IE版本<=7
|
||||
return 6;
|
||||
}
|
||||
} else if (isEdge) {
|
||||
return 'edge';
|
||||
} else if (isIE11) {
|
||||
//IE11
|
||||
whetherIE.current = true;
|
||||
return 11;
|
||||
} else {
|
||||
//不是IE浏览器
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
//初始化video
|
||||
const InitMedia = () => {
|
||||
if(!whetherIE.current){
|
||||
InitUserMedia({video : {width: 480, height: 320}}, success, error);
|
||||
if (!whetherIE.current) {
|
||||
InitUserMedia({ video: { width: 480, height: 320 } }, success, error);
|
||||
}
|
||||
};
|
||||
//访问用户媒体设备的兼容方法
|
||||
const InitUserMedia = (constraints: any, success: any, error: any) => {
|
||||
if (navigator.mediaDevices.getUserMedia) {
|
||||
//最新的标准API
|
||||
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
|
||||
//最新的标准API
|
||||
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
|
||||
} else if (navigator.webkitGetUserMedia) {
|
||||
//webkit核心浏览器
|
||||
navigator.webkitGetUserMedia(constraints,success, error);
|
||||
//webkit核心浏览器
|
||||
navigator.webkitGetUserMedia(constraints, success, error);
|
||||
} else if (navigator.mozGetUserMedia) {
|
||||
//firfox浏览器
|
||||
navigator.mozGetUserMedia(constraints, success, error);
|
||||
//firfox浏览器
|
||||
navigator.mozGetUserMedia(constraints, success, error);
|
||||
} else if (navigator.getUserMedia) {
|
||||
//旧版API
|
||||
navigator.getUserMedia(constraints, success, error);
|
||||
//旧版API
|
||||
navigator.getUserMedia(constraints, success, error);
|
||||
}
|
||||
}
|
||||
//调用媒体设备成功回调方法
|
||||
const success = (stream: any) => {
|
||||
var result = stream.getVideoTracks().some(function(track:any) {
|
||||
var result = stream.getVideoTracks().some(function (track: any) {
|
||||
return track.enabled && track.readyState === 'live';
|
||||
});
|
||||
if (result) {
|
||||
@ -267,13 +267,13 @@ const Index: React.FC<{}> = () => {
|
||||
}
|
||||
}
|
||||
//调用媒体设备失败回调方法
|
||||
const error = (error:any) => {
|
||||
message.warn('无法获取到摄像头权限，请确认是否存在摄像头及是否授权使用摄像头');
|
||||
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
|
||||
const error = (error: any) => {
|
||||
message.warn('无法获取到摄像头权限，请确认是否存在摄像头及是否授权使用摄像头');
|
||||
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
|
||||
}
|
||||
|
||||
//base64转blob
|
||||
const base64ToBlob = (base64:string) =>{
|
||||
const base64ToBlob = (base64: string) => {
|
||||
const parts = base64.split(";base64,");
|
||||
const contentType = parts[0].split(":")[1];
|
||||
const raw = window.atob(parts[1]);
|
||||
@ -286,12 +286,12 @@ const Index: React.FC<{}> = () => {
|
||||
};
|
||||
|
||||
//RgbToBase64
|
||||
const RgbToBase64 = async (image:any) =>{
|
||||
const RgbToBase64 = async (image: any) => {
|
||||
setSubmitLoading(true);
|
||||
await rgbToBase64({image}).then(res => {
|
||||
const _blob = base64ToBlob( 'data:image/jpg;base64,' + res.data);
|
||||
await rgbToBase64({ image }).then(res => {
|
||||
const _blob = base64ToBlob('data:image/jpg;base64,' + res.data);
|
||||
hanleFaceSubmit(_blob, null);
|
||||
}).catch(e=>{
|
||||
}).catch(e => {
|
||||
setSubmitLoading(false);
|
||||
});
|
||||
}
|
||||
@ -299,11 +299,11 @@ const Index: React.FC<{}> = () => {
|
||||
//是https或者是本地
|
||||
const httpsOrLocal = () => {
|
||||
let protocol = document.location.protocol;
|
||||
if(protocol == 'https'){
|
||||
if (protocol == 'https') {
|
||||
return true;
|
||||
}else{
|
||||
} else {
|
||||
let host = window.location.hostname;
|
||||
if(host == '127.0.0.1' || host == 'localhost'){
|
||||
if (host == '127.0.0.1' || host == 'localhost') {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
@ -313,19 +313,19 @@ const Index: React.FC<{}> = () => {
|
||||
//是否允许人脸登录
|
||||
const allowedToFaceLogin = () => {
|
||||
let browseType = BrowserType()
|
||||
if((browseType == 11 || browseType == -1) && httpsOrLocal()){
|
||||
if ((browseType == 11 || browseType == -1) && httpsOrLocal()) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
cookie.remove('mall3_token');
|
||||
sessionStorage.clear();
|
||||
changeCaptcha();
|
||||
if(!allowedToFaceLogin()){
|
||||
setFaceLoginDisable(true);
|
||||
if (!allowedToFaceLogin()) {
|
||||
setFaceLoginDisable(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
@ -339,7 +339,7 @@ const Index: React.FC<{}> = () => {
|
||||
</div>
|
||||
<div className="main">
|
||||
<div className="text">
|
||||
<Tabs defaultActiveKey="1" onChange={onChange} size = {'large'}>
|
||||
<Tabs defaultActiveKey="1" onChange={onChange} size={'large'}>
|
||||
<TabPane tab="账号密码登录" key="1">
|
||||
<Form
|
||||
name="basic"
|
||||
@ -403,11 +403,11 @@ const Index: React.FC<{}> = () => {
|
||||
<Form.Item>
|
||||
<Button type="primary" className="w100" htmlType="submit">
|
||||
登 录
|
||||
</Button>
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</TabPane>
|
||||
<TabPane tab="人脸识别登录" key="2" disabled = {faceLoginDisable}>
|
||||
<TabPane tab="人脸识别登录" key="2" disabled={faceLoginDisable}>
|
||||
<Form
|
||||
name="basic2"
|
||||
className="form-box"
|
||||
@ -430,12 +430,12 @@ const Index: React.FC<{}> = () => {
|
||||
</Form.Item>
|
||||
{/* 加载摄像头 */}
|
||||
<Form.Item>
|
||||
{!whetherIE.current ? (<video ref={video} width="382" height="200"></video>):(<FrameFaceLogin faceCompareEvent = {RgbToBase64}/>)}
|
||||
{!whetherIE.current ? (<video ref={video} width="382" height="200"></video>) : (<FrameFaceLogin faceCompareEvent={RgbToBase64} />)}
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
{/* onClick={() => {hanleFaceSubmit(null, null);}} */}
|
||||
<Button type="primary" className="w100" loading = {submitLoading} htmlType="submit">
|
||||
{submitLoading?'请稍候，正在验证中...':'登 录'}
|
||||
{/* onClick={() => {hanleFaceSubmit(null, null);}} */}
|
||||
<Button type="primary" className="w100" loading={submitLoading} htmlType="submit">
|
||||
{submitLoading ? '请稍候，正在验证中...' : '登 录'}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
Reference in New Issue
Block a user