570 lines
20 KiB
TypeScript
570 lines
20 KiB
TypeScript
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;
|
||
|