add oidc login button
Dawn1Ocean
parent
2eb06bd720
commit
a0616d8fca
|
|
@ -75,7 +75,7 @@
|
|||
"@types/react-helmet": "^6.1.11",
|
||||
"@umijs/fabric": "^2.14.1",
|
||||
"@umijs/lint": "^4.1.1",
|
||||
"@umijs/max": "^4.1.1",
|
||||
"@umijs/max": "^4.1.6",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^8.56.0",
|
||||
"express": "^4.18.2",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426.46 452.85">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #fff;
|
||||
stroke-width: 0px;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path class="cls-1" d="m259.41,338.91c-8.85,6.1-16.21,13.4-21.78,22.46-2.89,4.7-6.61,6.22-11.97,5.09-1.3-.27-2.59-.64-3.83-1.09-16.61-6.03-29.61-16.35-37.96-32.13-.8-1.5-1.59-3.08-1.96-4.72-.73-3.16-.79-6.12,2.2-8.59,2.67-2.2,3.27-5.67,3.74-8.93,1.28-8.78,1.12-17.56-.25-26.32-.14-.87-.43-1.72-.71-2.56-.43-1.31-1.18-2.16-2.72-2.2-1.47-.04-2.58-.77-2.82-2.33-.2-1.33-1.2-1.07-2.02-1.14-6.43-.55-12.91-.81-19.3-1.69-15.36-2.11-28.83-8.13-39.24-20.01-6.95-7.93-11.64-17.17-15.31-26.96-4.76-12.7-7.58-25.87-9.51-39.26-.07-.48-.19-.96-.28-1.44-31.68,5.16-62.87,12.42-94.7,15.9-.16.02-.33-.12-.99-.39,1.28-.56,2.18-1.06,3.14-1.36,8.59-2.66,17.17-5.33,25.79-7.91,17.41-5.21,34.92-10.11,51.86-16.77,3.52-1.39,6.9-3.16,10.3-4.84,2.01-.99,3.43-2.55,4.06-4.78,1.95-6.88,4.19-13.69,5.83-20.64,4.32-18.23,12.59-34.55,23.41-49.7,23.69-33.16,53.15-59.91,88.81-79.7,13.65-7.57,27.99-13.42,43.53-15.83,9.15-1.42,18.31-1.72,27.33.91,14.06,4.09,21.3,13.56,21.87,28.21.53,13.59-3.6,25.85-10.39,37.37-7.81,13.24-18.12,24.38-29.47,34.61-20.95,18.9-44.38,34.32-68.77,48.32-12.47,7.15-25.23,13.79-37.9,20.6-1.27.68-1.66,1.34-1.46,2.77,1,7.28,1.87,14.58,4.67,21.47,6.54,16.12,20.23,24.93,37.63,23.99,17.32-.94,33.19-6.58,48.12-15.17,11.87-6.83,22.37-15.53,32.84-24.24,20.33-16.91,40.04-34.49,58.96-52.97.39-.38.82-.71,1.23-1.06.16.07.32.15.48.22-.87,3.67-1.56,7.4-2.63,11.01-3.74,12.55-9.69,24.09-16.83,34.99-23.6,35.97-53.35,65.7-90.23,88.1-2.6,1.58-5.3,2.98-8,4.38-2.69,1.39-5.44,2.67-8.34,4.09,1.95,3.47,3.84,6.96,7.13,9.24,9.49,6.57,15.96,15.42,20.24,26.01.16.4.39.78.65,1.29,5.91-2.05,11.79-4.01,17.61-6.13,19.39-7.07,38.83-14.04,58.12-21.38,10.59-4.02,20.41-9.53,28.84-17.31,3.14-2.9,7.31-3.77,11.43-4.21,19.72-2.11,37.61,2.67,53.4,14.73,6.24,4.76,10.88,10.75,12.6,18.67,1.03,4.71.71,9.33-.73,13.88-2.45,7.74-6.03,14.92-11.18,21.23-2.94,3.61-6.47,6.64-11.37,6.89-2.67.14-5.42-.4-8.09-.9-17.99-3.37-35.97-6.79-53.94-10.27-2.09-.41-4.14-1.2-6.11-2.04-.82-.35-1.38-1.28-2.07-1.94.73-.53,1.39-1.3,2.21-1.55,7.02-2.17,13.57-5.34,19.57-9.53,3.88-2.72,7.69-5.61,11.15-8.84,5.11-4.78,5.54-7.91,2.55-14.26-1.87-3.97-4.14-7.74-7.63-10.53-.95-.76-2.18-1.35-3.37-1.61-2.6-.57-4.56.77-4.81,3.24-.33,3.24-2,5.58-4.61,7.28-7.53,4.92-15.06,9.84-22.68,14.63-13.79,8.66-27.74,17.08-40.47,27.31-2.46,1.98-4.8,4.12-7.41,6.38,2.83,2.06,5.47,3.98,8.11,5.89,23.17,16.72,46.3,33.5,70.48,48.76,5.83,3.68,11.92,6.97,17.91,10.39,5.69,3.26,11.16,6.79,15.41,11.9,2.4,2.88,4.14,6.09,4.54,9.87.65,6.01-2.32,11.73-8.65,14.51-5.87,2.58-12.09,4.57-18.33,6.08-21.48,5.21-43.33,7.99-65.4,9.26-16.42.95-32.82.92-49.2-.48-21.89-1.87-43.57-4.87-64.35-12.49-14.55-5.34-28.05-12.57-40.42-21.95-14.7-11.14-24.47-25.58-29.86-43.18-3.51-11.48-5.95-23.17-7.91-34.99-.34-2.03-.94-4.11-1.87-5.92-1.53-2.97-4.52-3.74-7.22-1.78-2.23,1.62-4.35,3.54-6.06,5.69-8.29,10.47-15.29,21.76-20.66,34.01-2.53,5.76-3.39,11.96-4,18.12-1.66,16.83-2.96,33.7-4.64,50.53-.42,4.24-1.48,8.47-2.72,12.57-.59,1.95-2.06,3.8-3.56,5.25-2.39,2.32-5.75,2.48-8.35.4-1.89-1.51-3.87-3.3-4.93-5.4-4.25-8.42-8.47-16.88-12.1-25.57-4.05-9.69-7.56-19.6-11.1-29.49-1.67-4.67-1.99-9.56-.59-14.4.45-1.57,1-3.2,1.9-4.53,5.93-8.84,11.25-18.22,18.13-26.24,9.04-10.53,17.08-21.67,24.75-33.16.35-.52.76-1.18,1.29-1.35,1.19-.39,2.68-1.02,3.63-.6.74.33,1.31,2.16,1.14,3.19-.4,2.48-1.21,4.91-1.98,7.31-1.26,3.88-2.38,7.79-1.72,11.91.17,1.08.74,2.62,1.54,2.94.71.28,2.23-.59,2.95-1.37,3.52-3.82,6.77-7.89,10.35-11.65,3.97-4.16,7.92-8.43,12.38-12.03,8.05-6.5,16.96-6.49,25.43-.57,4.24,2.96,7.93,6.5,10.98,10.69,5.57,7.65,9.36,16.2,12.91,24.9,2.75,6.74,5.62,13.43,8.6,20.07,6.34,14.12,17.04,23.37,31.53,28.73,14.44,5.35,29.27,8.56,44.59,9.69,21.11,1.55,42.18.99,63.21-1.26,4.25-.45,8.49-1.45,12.61-2.62,3.63-1.03,4.22-2.49,2.11-5.55-5.02-7.3-10.08-14.6-15.6-21.52-9.7-12.16-20.72-23.11-31.92-33.88-.17-.23-.43-.41-.8-.72Zm-101.12-190.15c1.21-.56,1.79-.78,2.32-1.08,5.99-3.3,12.06-6.46,17.94-9.96,23.68-14.07,44.6-31.21,60.12-54.34,5.13-7.64,10.22-15.28,13.41-23.98,1.36-3.71,2.3-7.52,1.75-11.53-.57-4.14-3.1-6.43-7.29-6.54-.94-.02-1.9.04-2.84.19-6.95,1.08-12.94,4.41-18.53,8.38-16.9,12-31.72,26.23-44.34,42.67-9.16,11.93-15.93,25.14-19.48,39.83-1.25,5.21-1.99,10.54-3.06,16.36Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
|
|
@ -1,4 +1,3 @@
|
|||
import { GithubOutlined } from '@ant-design/icons';
|
||||
import { DefaultFooter } from '@ant-design/pro-components';
|
||||
import React from 'react';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,26 +1,19 @@
|
|||
import oidcLogo from '@/assets/oidc-logo.svg';
|
||||
import { PageFooter } from '@/components';
|
||||
import { login } from '@/services/ant-design-pro/api';
|
||||
import { getFakeCaptcha } from '@/services/ant-design-pro/login';
|
||||
import {
|
||||
AlipayCircleOutlined,
|
||||
LockOutlined,
|
||||
MobileOutlined,
|
||||
TaobaoCircleOutlined,
|
||||
UserOutlined,
|
||||
WeiboCircleOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import {
|
||||
LoginForm,
|
||||
ProFormCaptcha,
|
||||
ProFormCheckbox,
|
||||
ProFormText,
|
||||
} from '@ant-design/pro-components';
|
||||
import { LockOutlined, UserOutlined } from '@ant-design/icons';
|
||||
import { LoginForm, ProFormCheckbox, ProFormText } from '@ant-design/pro-components';
|
||||
import { Helmet, history, useModel } from '@umijs/max';
|
||||
import { Alert, Tabs, message } from 'antd';
|
||||
import { Alert, Button, Tabs, message } from 'antd';
|
||||
import { createStyles } from 'antd-style';
|
||||
import React, { useState } from 'react';
|
||||
import React, { CSSProperties, useState } from 'react';
|
||||
import { flushSync } from 'react-dom';
|
||||
import Settings from '../../../../config/defaultSettings';
|
||||
|
||||
const iconStyles: CSSProperties = {
|
||||
transform: 'translateY(-12%)',
|
||||
};
|
||||
|
||||
const useStyles = createStyles(({ token }) => {
|
||||
return {
|
||||
action: {
|
||||
|
|
@ -56,16 +49,6 @@ const useStyles = createStyles(({ token }) => {
|
|||
},
|
||||
};
|
||||
});
|
||||
const ActionIcons = () => {
|
||||
const { styles } = useStyles();
|
||||
return (
|
||||
<>
|
||||
<AlipayCircleOutlined key="AlipayCircleOutlined" className={styles.action} />
|
||||
<TaobaoCircleOutlined key="TaobaoCircleOutlined" className={styles.action} />
|
||||
<WeiboCircleOutlined key="WeiboCircleOutlined" className={styles.action} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
const LoginMessage: React.FC<{
|
||||
content: string;
|
||||
}> = ({ content }) => {
|
||||
|
|
@ -80,6 +63,21 @@ const LoginMessage: React.FC<{
|
|||
/>
|
||||
);
|
||||
};
|
||||
const generateLink = () => {
|
||||
const preLink =
|
||||
'https://auth.zjueva.net/connect/authorize?response_type=code&client_id=tea&redirect_uri=https://xms.zjueva.net/api/external_sign&scope=openid&state=';
|
||||
return preLink + randomString(30);
|
||||
};
|
||||
|
||||
const randomString = (length: number) => {
|
||||
const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||
const maxPos = chars.length;
|
||||
let randomStr = '';
|
||||
for (let i = 0; i < length; i++) {
|
||||
randomStr += chars.charAt(Math.floor(Math.random() * maxPos));
|
||||
}
|
||||
return randomStr;
|
||||
};
|
||||
const Login: React.FC = () => {
|
||||
const [userLoginState, setUserLoginState] = useState<API.LoginResult>({});
|
||||
const [type, setType] = useState<string>('account');
|
||||
|
|
@ -140,12 +138,11 @@ const Login: React.FC = () => {
|
|||
maxWidth: '75vw',
|
||||
}}
|
||||
logo={<img alt="logo" src="/logo.svg" />}
|
||||
title="Ant Design"
|
||||
subTitle={'Ant Design 是西湖区最具影响力的 Web 设计规范'}
|
||||
title="EVA Tea"
|
||||
subTitle={'E志者协会是东区教学楼最专业的志愿维修组织'}
|
||||
initialValues={{
|
||||
autoLogin: true,
|
||||
}}
|
||||
actions={['其他登录方式 :', <ActionIcons key="icons" />]}
|
||||
onFinish={async (values) => {
|
||||
await handleSubmit(values as API.LoginParams);
|
||||
}}
|
||||
|
|
@ -159,10 +156,6 @@ const Login: React.FC = () => {
|
|||
key: 'account',
|
||||
label: '账户密码登录',
|
||||
},
|
||||
{
|
||||
key: 'mobile',
|
||||
label: '手机号登录',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
|
|
@ -202,61 +195,6 @@ const Login: React.FC = () => {
|
|||
</>
|
||||
)}
|
||||
|
||||
{status === 'error' && loginType === 'mobile' && <LoginMessage content="验证码错误" />}
|
||||
{type === 'mobile' && (
|
||||
<>
|
||||
<ProFormText
|
||||
fieldProps={{
|
||||
size: 'large',
|
||||
prefix: <MobileOutlined />,
|
||||
}}
|
||||
name="mobile"
|
||||
placeholder={'请输入手机号！'}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '手机号是必填项！',
|
||||
},
|
||||
{
|
||||
pattern: /^1\d{10}$/,
|
||||
message: '不合法的手机号！',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormCaptcha
|
||||
fieldProps={{
|
||||
size: 'large',
|
||||
prefix: <LockOutlined />,
|
||||
}}
|
||||
captchaProps={{
|
||||
size: 'large',
|
||||
}}
|
||||
placeholder={'请输入验证码！'}
|
||||
captchaTextRender={(timing, count) => {
|
||||
if (timing) {
|
||||
return `${count} ${'秒后重新获取'}`;
|
||||
}
|
||||
return '获取验证码';
|
||||
}}
|
||||
name="captcha"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '验证码是必填项！',
|
||||
},
|
||||
]}
|
||||
onGetCaptcha={async (phone) => {
|
||||
const result = await getFakeCaptcha({
|
||||
phone,
|
||||
});
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
message.success('获取验证码成功！验证码为：1234');
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
marginBottom: 24,
|
||||
|
|
@ -265,13 +203,21 @@ const Login: React.FC = () => {
|
|||
<ProFormCheckbox noStyle name="autoLogin">
|
||||
自动登录
|
||||
</ProFormCheckbox>
|
||||
<a
|
||||
style={{
|
||||
float: 'right',
|
||||
}}
|
||||
</div>
|
||||
<div style={{ marginBottom: '2vh' }}>
|
||||
{' '}
|
||||
<Button
|
||||
type="default"
|
||||
block
|
||||
size="large"
|
||||
href={generateLink()}
|
||||
style={{ backgroundColor: '#e0af68', color: '#ffffff' }}
|
||||
>
|
||||
忘记密码 ?
|
||||
</a>
|
||||
<div>
|
||||
<img src={oidcLogo} width="23px" style={iconStyles} />
|
||||
使用 EVA 统一身份认证
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</LoginForm>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue