支持登录Turnstile验证
This commit is contained in:
CaIon
parent
dcdf3ccc9f
commit
ee98e0c866
@ -30,7 +30,7 @@ func SetApiRouter(router *gin.Engine) {
|
|||||||
userRoute := apiRouter.Group("/user")
|
userRoute := apiRouter.Group("/user")
|
||||||
{
|
{
|
||||||
userRoute.POST("/register", middleware.CriticalRateLimit(), middleware.TurnstileCheck(), controller.Register)
|
userRoute.POST("/register", middleware.CriticalRateLimit(), middleware.TurnstileCheck(), controller.Register)
|
||||||
userRoute.POST("/login", middleware.CriticalRateLimit(), controller.Login)
|
userRoute.POST("/login", middleware.CriticalRateLimit(), middleware.TurnstileCheck(), controller.Login)
|
||||||
//userRoute.POST("/tokenlog", middleware.CriticalRateLimit(), controller.TokenLog)
|
//userRoute.POST("/tokenlog", middleware.CriticalRateLimit(), controller.TokenLog)
|
||||||
userRoute.GET("/logout", controller.Logout)
|
userRoute.GET("/logout", controller.Logout)
|
||||||
userRoute.GET("/epay/notify", controller.EpayNotify)
|
userRoute.GET("/epay/notify", controller.EpayNotify)
|
||||||
|
|||||||
@ -2,8 +2,9 @@ import React, { useContext, useEffect, useState } from 'react';
|
|||||||
import { Button, Divider, Form, Grid, Header, Image, Message, Modal, Segment } from 'semantic-ui-react';
|
import { Button, Divider, Form, Grid, Header, Image, Message, Modal, Segment } from 'semantic-ui-react';
|
||||||
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
|
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
|
||||||
import { UserContext } from '../context/User';
|
import { UserContext } from '../context/User';
|
||||||
import { API, getLogo, showError, showSuccess, showWarning } from '../helpers';
|
import {API, getLogo, showError, showInfo, showSuccess, showWarning} from '../helpers';
|
||||||
import { onGitHubOAuthClicked } from './utils';
|
import { onGitHubOAuthClicked } from './utils';
|
||||||
|
import Turnstile from "react-turnstile";
|
||||||
|
|
||||||
const LoginForm = () => {
|
const LoginForm = () => {
|
||||||
const [inputs, setInputs] = useState({
|
const [inputs, setInputs] = useState({
|
||||||
@ -15,6 +16,9 @@ const LoginForm = () => {
|
|||||||
const [submitted, setSubmitted] = useState(false);
|
const [submitted, setSubmitted] = useState(false);
|
||||||
const { username, password } = inputs;
|
const { username, password } = inputs;
|
||||||
const [userState, userDispatch] = useContext(UserContext);
|
const [userState, userDispatch] = useContext(UserContext);
|
||||||
|
const [turnstileEnabled, setTurnstileEnabled] = useState(false);
|
||||||
|
const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
|
||||||
|
const [turnstileToken, setTurnstileToken] = useState('');
|
||||||
let navigate = useNavigate();
|
let navigate = useNavigate();
|
||||||
const [status, setStatus] = useState({});
|
const [status, setStatus] = useState({});
|
||||||
const logo = getLogo();
|
const logo = getLogo();
|
||||||
@ -27,6 +31,10 @@ const LoginForm = () => {
|
|||||||
if (status) {
|
if (status) {
|
||||||
status = JSON.parse(status);
|
status = JSON.parse(status);
|
||||||
setStatus(status);
|
setStatus(status);
|
||||||
|
if (status.turnstile_check) {
|
||||||
|
setTurnstileEnabled(true);
|
||||||
|
setTurnstileSiteKey(status.turnstile_site_key);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
@ -37,8 +45,12 @@ const LoginForm = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const onSubmitWeChatVerificationCode = async () => {
|
const onSubmitWeChatVerificationCode = async () => {
|
||||||
|
if (turnstileEnabled && turnstileToken === '') {
|
||||||
|
showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
|
||||||
|
return;
|
||||||
|
}
|
||||||
const res = await API.get(
|
const res = await API.get(
|
||||||
`/api/oauth/wechat?code=${inputs.wechat_verification_code}`
|
`/api/oauth/wechat?code=${inputs.wechat_verification_code}`
|
||||||
);
|
);
|
||||||
const { success, message, data } = res.data;
|
const { success, message, data } = res.data;
|
||||||
if (success) {
|
if (success) {
|
||||||
@ -58,9 +70,13 @@ const LoginForm = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function handleSubmit(e) {
|
async function handleSubmit(e) {
|
||||||
|
if (turnstileEnabled && turnstileToken === '') {
|
||||||
|
showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
|
||||||
|
return;
|
||||||
|
}
|
||||||
setSubmitted(true);
|
setSubmitted(true);
|
||||||
if (username && password) {
|
if (username && password) {
|
||||||
const res = await API.post(`/api/user/login`, {
|
const res = await API.post(`/api/user/login?turnstile=${turnstileToken}`, {
|
||||||
username,
|
username,
|
||||||
password
|
password
|
||||||
});
|
});
|
||||||
@ -83,110 +99,120 @@ const LoginForm = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Grid textAlign='center' style={{ marginTop: '48px' }}>
|
<Grid textAlign='center' style={{ marginTop: '48px' }}>
|
||||||
<Grid.Column style={{ maxWidth: 450 }}>
|
<Grid.Column style={{ maxWidth: 450 }}>
|
||||||
<Header as='h2' color='' textAlign='center'>
|
<Header as='h2' color='' textAlign='center'>
|
||||||
<Image src={logo} /> 用户登录
|
<Image src={logo} /> 用户登录
|
||||||
</Header>
|
</Header>
|
||||||
<Form size='large'>
|
<Form size='large'>
|
||||||
<Segment>
|
<Segment>
|
||||||
<Form.Input
|
<Form.Input
|
||||||
fluid
|
|
||||||
icon='user'
|
|
||||||
iconPosition='left'
|
|
||||||
placeholder='用户名'
|
|
||||||
name='username'
|
|
||||||
value={username}
|
|
||||||
onChange={handleChange}
|
|
||||||
/>
|
|
||||||
<Form.Input
|
|
||||||
fluid
|
|
||||||
icon='lock'
|
|
||||||
iconPosition='left'
|
|
||||||
placeholder='密码'
|
|
||||||
name='password'
|
|
||||||
type='password'
|
|
||||||
value={password}
|
|
||||||
onChange={handleChange}
|
|
||||||
/>
|
|
||||||
<Button color='green' fluid size='large' onClick={handleSubmit}>
|
|
||||||
登录
|
|
||||||
</Button>
|
|
||||||
</Segment>
|
|
||||||
</Form>
|
|
||||||
<Message>
|
|
||||||
忘记密码？
|
|
||||||
<Link to='/reset' className='btn btn-link'>
|
|
||||||
点击重置
|
|
||||||
</Link>
|
|
||||||
； 没有账户？
|
|
||||||
<Link to='/register' className='btn btn-link'>
|
|
||||||
点击注册
|
|
||||||
</Link>
|
|
||||||
</Message>
|
|
||||||
{status.github_oauth || status.wechat_login ? (
|
|
||||||
<>
|
|
||||||
<Divider horizontal>Or</Divider>
|
|
||||||
{status.github_oauth ? (
|
|
||||||
<Button
|
|
||||||
circular
|
|
||||||
color='black'
|
|
||||||
icon='github'
|
|
||||||
onClick={() => onGitHubOAuthClicked(status.github_client_id)}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
{status.wechat_login ? (
|
|
||||||
<Button
|
|
||||||
circular
|
|
||||||
color='green'
|
|
||||||
icon='wechat'
|
|
||||||
onClick={onWeChatLoginClicked}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<></>
|
|
||||||
)}
|
|
||||||
<Modal
|
|
||||||
onClose={() => setShowWeChatLoginModal(false)}
|
|
||||||
onOpen={() => setShowWeChatLoginModal(true)}
|
|
||||||
open={showWeChatLoginModal}
|
|
||||||
size={'mini'}
|
|
||||||
>
|
|
||||||
<Modal.Content>
|
|
||||||
<Modal.Description>
|
|
||||||
<Image src={status.wechat_qrcode} fluid />
|
|
||||||
<div style={{ textAlign: 'center' }}>
|
|
||||||
<p>
|
|
||||||
微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Form size='large'>
|
|
||||||
<Form.Input
|
|
||||||
fluid
|
fluid
|
||||||
placeholder='验证码'
|
icon='user'
|
||||||
name='wechat_verification_code'
|
iconPosition='left'
|
||||||
value={inputs.wechat_verification_code}
|
placeholder='用户名'
|
||||||
|
name='username'
|
||||||
|
value={username}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Form.Input
|
||||||
color=''
|
|
||||||
fluid
|
fluid
|
||||||
size='large'
|
icon='lock'
|
||||||
onClick={onSubmitWeChatVerificationCode}
|
iconPosition='left'
|
||||||
>
|
placeholder='密码'
|
||||||
登录
|
name='password'
|
||||||
</Button>
|
type='password'
|
||||||
</Form>
|
value={password}
|
||||||
</Modal.Description>
|
onChange={handleChange}
|
||||||
</Modal.Content>
|
/>
|
||||||
</Modal>
|
{turnstileEnabled ? (
|
||||||
</Grid.Column>
|
<Turnstile
|
||||||
</Grid>
|
sitekey={turnstileSiteKey}
|
||||||
|
onVerify={(token) => {
|
||||||
|
setTurnstileToken(token);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
<Button color='green' fluid size='large' onClick={handleSubmit}>
|
||||||
|
登录
|
||||||
|
</Button>
|
||||||
|
</Segment>
|
||||||
|
</Form>
|
||||||
|
<Message>
|
||||||
|
忘记密码？
|
||||||
|
<Link to='/reset' className='btn btn-link'>
|
||||||
|
点击重置
|
||||||
|
</Link>
|
||||||
|
； 没有账户？
|
||||||
|
<Link to='/register' className='btn btn-link'>
|
||||||
|
点击注册
|
||||||
|
</Link>
|
||||||
|
</Message>
|
||||||
|
{status.github_oauth || status.wechat_login ? (
|
||||||
|
<>
|
||||||
|
<Divider horizontal>Or</Divider>
|
||||||
|
{status.github_oauth ? (
|
||||||
|
<Button
|
||||||
|
circular
|
||||||
|
color='black'
|
||||||
|
icon='github'
|
||||||
|
onClick={() => onGitHubOAuthClicked(status.github_client_id)}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
{status.wechat_login ? (
|
||||||
|
<Button
|
||||||
|
circular
|
||||||
|
color='green'
|
||||||
|
icon='wechat'
|
||||||
|
onClick={onWeChatLoginClicked}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
|
)}
|
||||||
|
<Modal
|
||||||
|
onClose={() => setShowWeChatLoginModal(false)}
|
||||||
|
onOpen={() => setShowWeChatLoginModal(true)}
|
||||||
|
open={showWeChatLoginModal}
|
||||||
|
size={'mini'}
|
||||||
|
>
|
||||||
|
<Modal.Content>
|
||||||
|
<Modal.Description>
|
||||||
|
<Image src={status.wechat_qrcode} fluid />
|
||||||
|
<div style={{ textAlign: 'center' }}>
|
||||||
|
<p>
|
||||||
|
微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Form size='large'>
|
||||||
|
<Form.Input
|
||||||
|
fluid
|
||||||
|
placeholder='验证码'
|
||||||
|
name='wechat_verification_code'
|
||||||
|
value={inputs.wechat_verification_code}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
color=''
|
||||||
|
fluid
|
||||||
|
size='large'
|
||||||
|
onClick={onSubmitWeChatVerificationCode}
|
||||||
|
>
|
||||||
|
登录
|
||||||
|
</Button>
|
||||||
|
</Form>
|
||||||
|
</Modal.Description>
|
||||||
|
</Modal.Content>
|
||||||
|
</Modal>
|
||||||
|
</Grid.Column>
|
||||||
|
</Grid>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user