Files
fe_service_ebtp_frontend/src/pages/userformal/login/index.tsx

570 lines
20 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React, { useEffect, useState, useRef } from 'react';
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';
import logo from '@/images/login/logoPic.png';
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 [form2] = Form.useForm();
const [imgUrl, setImgUrl] = useState<any>('');
const [tmpToken, setTmpToken] = useState<any>('');
const remainingTime = 3 //刷新token的剩余时间单位小时
const [changeForm] = Form.useForm();
const [isModalVisible, setIsModalVisible] = useState<boolean>(false)
const [spinning, setSping] = useState<boolean>(false);//加载遮罩
const video = useRef();
const whetherIE = useRef<boolean>(false);
const mediaStreamTrack = useRef<any>();
const { TabPane } = Tabs;
const [submitLoading, setSubmitLoading] = useState<boolean>(false);
const [faceLoginDisable, setFaceLoginDisable] = useState<boolean>(false);
const genRandomString = (len: number) => {
const text = 'abcdefghijklmnopqrstuvwxyz0123456789';
const rdmIndex = (text: string | any[]) => (Math.random() * text.length) | 0;
let rdmString = '';
for (; rdmString.length < len; rdmString += text.charAt(rdmIndex(text)));
return rdmString;
};
const changeCaptcha = () => {
let tmpToken = genRandomString(16);
let url = '/api/auth/captcha?token=' + tmpToken;
setTmpToken(tmpToken);
setImgUrl(url);
};
//登录刷新Token方法
const refreshToken = async (data: any) => {
const params = {
grant_type: "refresh_token",
refresh_token: data?.refreshToken?.value,
client_id: REACT_APP_CLIENT_KEY,
client_secret: REACT_APP_CLIENT_SECRET,
}
const header = {
clientId: REACT_APP_CLIENT_KEY,
}
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('scope', res?.data?.scope);
history.push('/redirect');
}
})
}
const handleSubmit = async (values: any) => {
await ZjfakeAccountLogin({ ...values, tmpToken }).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');
}
}
changeCaptcha();
});
};
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 = form2.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 {
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{
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{
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);}
);
}
}
}
const handleOk = () => { // 确定修改密码
if (changeForm.getFieldValue("newPassword") !== changeForm.getFieldValue("newPassword1")) {
message.warn('两次密码输入不一致,请重新输入')
} else {
changeForm.validateFields().then(res => {
setSping(true);
const date = {
identityCard: changeForm.getFieldValue("identityCard"),
oldPassword: changeForm.getFieldValue("oldPassword"),
newPassword: changeForm.getFieldValue("newPassword"),
};
changePass({ ...date }).then(res => {
if (res.success) {
setSping(false);
setIsModalVisible(false)
message.success('修改密码成功');
changeForm.resetFields()
} else {
setSping(false);
}
}).finally(() => {
setSping(false);
});;
})
}
}
//浏览器类型
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);
}
};
//访问用户媒体设备的兼容方法
const InitUserMedia = (constraints: any, success: any, error: any) => {
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints,success, error);
} else if (navigator.mozGetUserMedia) {
//firfox浏览器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//旧版API
navigator.getUserMedia(constraints, success, error);
}
}
//调用媒体设备成功回调方法
const success = (stream: any) => {
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) => {
message.warn('无法获取到摄像头权限,请确认是否存在摄像头及是否授权使用摄像头');
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
}
//base64转blob
const base64ToBlob = (base64:string) =>{
const parts = base64.split(";base64,");
const contentType = parts[0].split(":")[1];
const raw = window.atob(parts[1]);
const rawLength = raw.length;
const uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; i += 1) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
};
//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 (
<Spin spinning={spinning}>
<div className="login-box">
<div className="top">
<img src={logo} />
<h3> | </h3>
<Button className="change" danger style={{ borderColor: '#b30000', color: '#b30000' }} onClick={() => (setIsModalVisible(true), changeForm.resetFields())}></Button>
</div>
<div className="main">
<div className="text">
<Tabs defaultActiveKey="1" onChange={onChange} size = {'large'}>
<TabPane tab="账号密码登录" key="1">
<Form
name="basic"
className="form-box"
initialValues={{ remember: true }}
form={form}
onFinish={handleSubmit}
// onFinishFailed={onFinishFailed}
>
<Form.Item
label=""
name="userName"
rules={[{ required: true, message: '请输入用户名!' }]}
>
<Input
prefix={
<UserOutlined style={{ fontSize: '18px' }} className="site-form-item-icon" />
}
placeholder="请输入用户名"
/>
</Form.Item>
<Form.Item
label=""
name="password"
rules={[{ required: true, message: '请输入密码!' }]}
>
<Input.Password
prefix={
<LockOutlined style={{ fontSize: '18px' }} className="site-form-item-icon" />
}
placeholder="请输入密码"
/>
</Form.Item>
<Row>
<Col span={14}>
<Form.Item
label=""
name="captcha"
rules={[{ required: true, message: '请输入验证码!' }]}
>
<Input
prefix={
<SafetyCertificateOutlined
style={{ fontSize: '18px' }}
className="site-form-item-icon"
/>
}
placeholder="请输入验证码"
/>
</Form.Item>
</Col>
<Col span={10}>
<img className="verification" onClick={() => changeCaptcha()} src={imgUrl} />
</Col>
</Row>
{/* <Form.Item className="remember" name="remember" valuePropName="checked">
<Checkbox>记住密码</Checkbox>
</Form.Item> */}
<Form.Item>
<Button type="primary" className="w100" htmlType="submit">
</Button>
</Form.Item>
</Form>
</TabPane>
<TabPane tab="人脸识别登录" key="2" disabled = {faceLoginDisable}>
<Form
name="basic2"
className="form-box"
initialValues={{ remember: true }}
form={form2}
onFinish={hanleFaceSubmit.bind(this, null)}
// onFinishFailed={onFinishFailed}
>
<Form.Item
label=""
name="userName"
rules={[{ required: true, message: '请输入用户名!' }]}
>
<Input
prefix={
<UserOutlined style={{ fontSize: '18px' }} className="site-form-item-icon" />
}
placeholder="请输入用户名"
/>
</Form.Item>
{/* 加载摄像头 */}
<Form.Item>
{!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?'请稍候,正在验证中...':'登 录'}
</Button>
</Form.Item>
</Form>
</TabPane>
</Tabs>
</div>
</div>
<Modal
title="修改密码"
visible={isModalVisible}
onCancel={() => setIsModalVisible(false)}
footer={[
<Button onClick={() => handleOk()} loading={spinning}> </Button>,
<Button onClick={() => setIsModalVisible(false)}> </Button>
]}
width={600}
>
<Spin spinning={spinning}>
<Form
{...layout}
name="basic"
form={changeForm}
>
<Form.Item
label="身份证(用户名)"
name="identityCard"
rules={[
{
required: true,
message: '请输入身份证(用户名)',
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="原密码"
name="oldPassword"
rules={[
{
required: true,
message: '请输入原始密码',
},
]}
>
<Input.Password />
</Form.Item>
<Form.Item
label="新密码"
name="newPassword"
rules={[
{
required: true,
validator: (rule, value, callback) => {
const oNumber = new RegExp(/\d/);
const oLetter = new RegExp(/[a-zA-Z]/);
const oSpecial = '.~!@#$%^&*()_+=-{}|:<>?,./[]-;\\"';
if (!value) {
callback('请输入新密码');
return;
}
if (value.length < 6) {
callback('密码不能小于六位至少含字母、数字、特殊字符其中的2种');
return;
}
try {
[...value].forEach(val => {
if (
!(
oNumber.test(val) ||
oLetter.test(val) ||
oSpecial.indexOf(val) >= 0
)
) {
throw new Error();
}
});
} catch (e) {
callback('密码不能小于六位至少含字母、数字、特殊字符其中的2种');
}
const contain: boolean[] = [];
[...value].forEach(val => {
if (oNumber.test(val)) {
contain[0] = true;
}
if (oLetter.test(val)) {
contain[1] = true;
}
if (oSpecial.indexOf(val) >= 0) {
contain[2] = true;
}
});
if (contain.filter(item => item === true).length < 2) {
callback('密码不能小于六位至少含字母、数字、特殊字符其中的2种');
return;
}
callback();
}
}
]}
// rules={[
// {
// required: true,
// message: '请输入新密码',
// },
// ]}
>
<Input.Password />
</Form.Item>
<Form.Item
label="新密码确认"
name="newPassword1"
rules={[
{
required: true,
message: '请再次输入新密码',
},
]}
>
<Input.Password />
</Form.Item>
</Form>
</Spin>
</Modal>
</div>
</Spin>
);
};
export default Index;