From ee98e0c86667e4adbbcf543f61d14a057221e4ce Mon Sep 17 00:00:00 2001
From: CaIon <1808837298@qq.com>
Date: Mon, 6 Nov 2023 22:26:32 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E7=99=BB=E5=BD=95Turnstile?=
 =?UTF-8?q?=E9=AA=8C=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 router/api-router.go            |   2 +-
 web/src/components/LoginForm.js | 234 ++++++++++++++++++--------------
 2 files changed, 131 insertions(+), 105 deletions(-)

diff --git a/router/api-router.go b/router/api-router.go
index e3a25676..17758b03 100644
--- a/router/api-router.go
+++ b/router/api-router.go
@@ -30,7 +30,7 @@ func SetApiRouter(router *gin.Engine) {
 		userRoute := apiRouter.Group("/user")
 		{
 			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.GET("/logout", controller.Logout)
 			userRoute.GET("/epay/notify", controller.EpayNotify)
diff --git a/web/src/components/LoginForm.js b/web/src/components/LoginForm.js
index a3913220..328aaeb0 100644
--- a/web/src/components/LoginForm.js
+++ b/web/src/components/LoginForm.js
@@ -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 { Link, useNavigate, useSearchParams } from 'react-router-dom';
 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 Turnstile from "react-turnstile";
 
 const LoginForm = () => {
   const [inputs, setInputs] = useState({
@@ -15,6 +16,9 @@ const LoginForm = () => {
   const [submitted, setSubmitted] = useState(false);
   const { username, password } = inputs;
   const [userState, userDispatch] = useContext(UserContext);
+  const [turnstileEnabled, setTurnstileEnabled] = useState(false);
+  const [turnstileSiteKey, setTurnstileSiteKey] = useState('');
+  const [turnstileToken, setTurnstileToken] = useState('');
   let navigate = useNavigate();
   const [status, setStatus] = useState({});
   const logo = getLogo();
@@ -27,6 +31,10 @@ const LoginForm = () => {
     if (status) {
       status = JSON.parse(status);
       setStatus(status);
+      if (status.turnstile_check) {
+        setTurnstileEnabled(true);
+        setTurnstileSiteKey(status.turnstile_site_key);
+      }
     }
   }, []);
 
@@ -37,8 +45,12 @@ const LoginForm = () => {
   };
 
   const onSubmitWeChatVerificationCode = async () => {
+    if (turnstileEnabled && turnstileToken === '') {
+      showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
+      return;
+    }
     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;
     if (success) {
@@ -58,9 +70,13 @@ const LoginForm = () => {
   }
 
   async function handleSubmit(e) {
+    if (turnstileEnabled && turnstileToken === '') {
+      showInfo('请稍后几秒重试，Turnstile 正在检查用户环境！');
+      return;
+    }
     setSubmitted(true);
     if (username && password) {
-      const res = await API.post(`/api/user/login`, {
+      const res = await API.post(`/api/user/login?turnstile=${turnstileToken}`, {
         username,
         password
       });
@@ -83,110 +99,120 @@ const LoginForm = () => {
   }
 
   return (
-    <Grid textAlign='center' style={{ marginTop: '48px' }}>
-      <Grid.Column style={{ maxWidth: 450 }}>
-        <Header as='h2' color='' textAlign='center'>
-          <Image src={logo} /> 用户登录
-        </Header>
-        <Form size='large'>
-          <Segment>
-            <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
+      <Grid textAlign='center' style={{ marginTop: '48px' }}>
+        <Grid.Column style={{ maxWidth: 450 }}>
+          <Header as='h2' color='' textAlign='center'>
+            <Image src={logo} /> 用户登录
+          </Header>
+          <Form size='large'>
+            <Segment>
+              <Form.Input
                   fluid
-                  placeholder='验证码'
-                  name='wechat_verification_code'
-                  value={inputs.wechat_verification_code}
+                  icon='user'
+                  iconPosition='left'
+                  placeholder='用户名'
+                  name='username'
+                  value={username}
                   onChange={handleChange}
-                />
-                <Button
-                  color=''
+              />
+              <Form.Input
                   fluid
-                  size='large'
-                  onClick={onSubmitWeChatVerificationCode}
-                >
-                  登录
-                </Button>
-              </Form>
-            </Modal.Description>
-          </Modal.Content>
-        </Modal>
-      </Grid.Column>
-    </Grid>
+                  icon='lock'
+                  iconPosition='left'
+                  placeholder='密码'
+                  name='password'
+                  type='password'
+                  value={password}
+                  onChange={handleChange}
+              />
+              {turnstileEnabled ? (
+                  <Turnstile
+                      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>
   );
 };