feat: support feishu login now

web/default/src/App.js

@@ -24,6 +24,7 @@ import EditRedemption from './pages/Redemption/EditRedemption';
 import TopUp from './pages/TopUp';
 import Log from './pages/Log';
 import Chat from './pages/Chat';
+import LarkOAuth from './components/LarkOAuth';
 
 const Home = lazy(() => import('./pages/Home'));
 const About = lazy(() => import('./pages/About'));
@@ -239,6 +240,14 @@ function App() {
           </Suspense>
         }
       />
+      <Route
+        path='/oauth/lark'
+        element={
+          <Suspense fallback={<Loading></Loading>}>
+            <LarkOAuth />
+          </Suspense>
+        }
+      />
       <Route
         path='/setting'
         element={

web/default/src/components/LarkOAuth.js

@@ -0,0 +1,58 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { Dimmer, Loader, Segment } from 'semantic-ui-react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { API, showError, showSuccess } from '../helpers';
+import { UserContext } from '../context/User';
+
+const LarkOAuth = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const [userState, userDispatch] = useContext(UserContext);
+  const [prompt, setPrompt] = useState('处理中...');
+  const [processing, setProcessing] = useState(true);
+
+  let navigate = useNavigate();
+
+  const sendCode = async (code, state, count) => {
+    const res = await API.get(`/api/oauth/lark?code=${code}&state=${state}`);
+    const { success, message, data } = res.data;
+    if (success) {
+      if (message === 'bind') {
+        showSuccess('绑定成功！');
+        navigate('/setting');
+      } else {
+        userDispatch({ type: 'login', payload: data });
+        localStorage.setItem('user', JSON.stringify(data));
+        showSuccess('登录成功！');
+        navigate('/');
+      }
+    } else {
+      showError(message);
+      if (count === 0) {
+        setPrompt(`操作失败，重定向至登录界面中...`);
+        navigate('/setting'); // in case this is failed to bind lark
+        return;
+      }
+      count++;
+      setPrompt(`出现错误，第 ${count} 次重试中...`);
+      await new Promise((resolve) => setTimeout(resolve, count * 2000));
+      await sendCode(code, state, count);
+    }
+  };
+
+  useEffect(() => {
+    let code = searchParams.get('code');
+    let state = searchParams.get('state');
+    sendCode(code, state, 0).then();
+  }, []);
+
+  return (
+    <Segment style={{ minHeight: '300px' }}>
+      <Dimmer active inverted>
+        <Loader size='large'>{prompt}</Loader>
+      </Dimmer>
+    </Segment>
+  );
+};
+
+export default LarkOAuth;

web/default/src/components/LoginForm.js

@@ -3,7 +3,8 @@ import { Button, Divider, Form, Grid, Header, Image, Message, Modal, Segment } f
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 import { UserContext } from '../context/User';
 import { API, getLogo, showError, showSuccess, showWarning } from '../helpers';
-import { onGitHubOAuthClicked } from './utils';
+import { onGitHubOAuthClicked, onLarkOAuthClicked } from './utils';
+import larkIcon from '../images/lark.svg';
 
 const LoginForm = () => {
   const [inputs, setInputs] = useState({
@@ -124,7 +125,7 @@ const LoginForm = () => {
             点击注册
           </Link>
         </Message>
-        {status.github_oauth || status.wechat_login ? (
+        {status.github_oauth || status.wechat_login || status.lark_client_id ? (
           <>
             <Divider horizontal>Or</Divider>
             {status.github_oauth ? (
@@ -137,6 +138,18 @@ const LoginForm = () => {
             ) : (
               <></>
             )}
+            {status.lark_client_id ? (
+              <Button
+                // circular
+                color=''
+                onClick={() => onLarkOAuthClicked(status.lark_client_id)}
+                style={{ padding: 0, width: 36, height: 36 }}
+              >
+                <img src={larkIcon} width={36} height={36} />
+              </Button>
+            ) : (
+              <></>
+            )}
             {status.wechat_login ? (
               <Button
                 circular

web/default/src/components/PersonalSetting.js

@@ -4,7 +4,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import { API, copy, showError, showInfo, showNotice, showSuccess } from '../helpers';
 import Turnstile from 'react-turnstile';
 import { UserContext } from '../context/User';
-import { onGitHubOAuthClicked } from './utils';
+import { onGitHubOAuthClicked, onLarkOAuthClicked } from './utils';
 
 const PersonalSetting = () => {
   const [userState, userDispatch] = useContext(UserContext);
@@ -247,6 +247,11 @@ const PersonalSetting = () => {
           <Button onClick={()=>{onGitHubOAuthClicked(status.github_client_id)}}>绑定 GitHub 账号</Button>
         )
       }
+      {
+        status.lark_client_id && (
+          <Button onClick={()=>{onLarkOAuthClicked(status.lark_client_id)}}>绑定飞书账号</Button>
+        )
+      }
       <Button
         onClick={() => {
           setShowEmailBindModal(true);

web/default/src/components/SystemSetting.js

@@ -10,6 +10,8 @@ const SystemSetting = () => {
     GitHubOAuthEnabled: '',
     GitHubClientId: '',
     GitHubClientSecret: '',
+    LarkClientId: '',
+    LarkClientSecret: '',
     Notice: '',
     SMTPServer: '',
     SMTPPort: '',
@@ -109,6 +111,8 @@ const SystemSetting = () => {
       name === 'ServerAddress' ||
       name === 'GitHubClientId' ||
       name === 'GitHubClientSecret' ||
+      name === 'LarkClientId' ||
+      name === 'LarkClientSecret' ||
       name === 'WeChatServerAddress' ||
       name === 'WeChatServerToken' ||
       name === 'WeChatAccountQRCodeImageURL' ||
@@ -212,6 +216,18 @@ const SystemSetting = () => {
     }
   };
 
+   const submitLarkOAuth = async () => {
+    if (originInputs['LarkClientId'] !== inputs.LarkClientId) {
+      await updateOption('LarkClientId', inputs.LarkClientId);
+    }
+    if (
+      originInputs['LarkClientSecret'] !== inputs.LarkClientSecret &&
+      inputs.LarkClientSecret !== ''
+    ) {
+      await updateOption('LarkClientSecret', inputs.LarkClientSecret);
+    }
+  };
+
   const submitTurnstile = async () => {
     if (originInputs['TurnstileSiteKey'] !== inputs.TurnstileSiteKey) {
       await updateOption('TurnstileSiteKey', inputs.TurnstileSiteKey);
@@ -469,6 +485,44 @@ const SystemSetting = () => {
             保存 GitHub OAuth 设置
           </Form.Button>
           <Divider />
+          <Header as='h3'>
+            配置飞书授权登录
+            <Header.Subheader>
+              用以支持通过飞书进行登录注册，
+              <a href='https://open.feishu.cn/app' target='_blank'>
+                点击此处
+              </a>
+              管理你的飞书应用
+            </Header.Subheader>
+          </Header>
+          <Message>
+            主页链接填 <code>{inputs.ServerAddress}</code>
+            ，重定向 URL 填{' '}
+            <code>{`${inputs.ServerAddress}/oauth/lark`}</code>
+          </Message>
+          <Form.Group widths={3}>
+            <Form.Input
+              label='App ID'
+              name='LarkClientId'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.LarkClientId}
+              placeholder='输入 App ID'
+            />
+            <Form.Input
+              label='App Secret'
+              name='LarkClientSecret'
+              onChange={handleInputChange}
+              type='password'
+              autoComplete='new-password'
+              value={inputs.LarkClientSecret}
+              placeholder='敏感信息不会发送到前端显示'
+            />
+          </Form.Group>
+          <Form.Button onClick={submitLarkOAuth}>
+            保存飞书 OAuth 设置
+          </Form.Button>
+          <Divider />
           <Header as='h3'>
             配置 WeChat Server
             <Header.Subheader>

web/default/src/components/utils.js

@@ -17,4 +17,13 @@ export async function onGitHubOAuthClicked(github_client_id) {
   window.open(
     `https://github.com/login/oauth/authorize?client_id=${github_client_id}&state=${state}&scope=user:email`
   );
+}
+
+export async function onLarkOAuthClicked(lark_client_id) {
+  const state = await getOAuthState();
+  if (!state) return;
+  let redirect_uri = `${window.location.origin}/oauth/lark`;
+  window.open(
+    `https://open.feishu.cn/open-apis/authen/v1/index?redirect_uri=${redirect_uri}&app_id=${lark_client_id}&state=${state}`
+  );
 }