Merge pull request #1706 from StageDog/feat/discord_oauth

feat: 关联 discord 账号
2026-03-30 04:03:18 +00:00 · 2025-11-23 18:54:55 +08:00
parent 0952973887 5f27edcd19
commit 07aff1fe02
18 changed files with 462 additions and 1 deletions
--- a/web/src/App.jsx
+++ b/web/src/App.jsx
@@ -192,6 +192,14 @@ function App() {
            </Suspense>
          }
        />
+        <Route
+          path='/oauth/discord'
+          element={
+            <Suspense fallback={<Loading></Loading>} key={location.pathname}>
+              <OAuth2Callback type='discord'></OAuth2Callback>
+            </Suspense>
+          }
+        />
        <Route
          path='/oauth/oidc'
          element={
--- a/web/src/components/auth/LoginForm.jsx
+++ b/web/src/components/auth/LoginForm.jsx
@@ -30,6 +30,7 @@ import {
  getSystemName,
  setUserData,
  onGitHubOAuthClicked,
+  onDiscordOAuthClicked,
  onOIDCClicked,
  onLinuxDOOAuthClicked,
  prepareCredentialRequestOptions,
@@ -53,6 +54,7 @@ import WeChatIcon from '../common/logo/WeChatIcon';
 import LinuxDoIcon from '../common/logo/LinuxDoIcon';
 import TwoFAVerification from './TwoFAVerification';
 import { useTranslation } from 'react-i18next';
+import { SiDiscord }from 'react-icons/si';

 const LoginForm = () => {
  let navigate = useNavigate();
@@ -73,6 +75,7 @@ const LoginForm = () => {
  const [showEmailLogin, setShowEmailLogin] = useState(false);
  const [wechatLoading, setWechatLoading] = useState(false);
  const [githubLoading, setGithubLoading] = useState(false);
+  const [discordLoading, setDiscordLoading] = useState(false);
  const [oidcLoading, setOidcLoading] = useState(false);
  const [linuxdoLoading, setLinuxdoLoading] = useState(false);
  const [emailLoginLoading, setEmailLoginLoading] = useState(false);
@@ -298,6 +301,21 @@ const LoginForm = () => {
    }
  };

+  // 包装的Discord登录点击处理
+  const handleDiscordClick = () => {
+    if ((hasUserAgreement || hasPrivacyPolicy) && !agreedToTerms) {
+      showInfo(t('请先阅读并同意用户协议和隐私政策'));
+      return;
+    }
+    setDiscordLoading(true);
+    try {
+      onDiscordOAuthClicked(status.discord_client_id);
+    } finally {
+      // 由于重定向，这里不会执行到，但为了完整性添加
+      setTimeout(() => setDiscordLoading(false), 3000);
+    }
+  };
+
  // 包装的OIDC登录点击处理
  const handleOIDCClick = () => {
    if ((hasUserAgreement || hasPrivacyPolicy) && !agreedToTerms) {
@@ -472,6 +490,19 @@ const LoginForm = () => {
                  </Button>
                )}

+                {status.discord_oauth && (
+                  <Button
+                    theme='outline'
+                    className='w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors'
+                    type='tertiary'
+                    icon={<SiDiscord style={{ color: '#5865F2', width: '20px', height: '20px' }} />}
+                    onClick={handleDiscordClick}
+                    loading={discordLoading}
+                  >
+                    <span className='ml-3'>{t('使用 Discord 继续')}</span>
+                  </Button>
+                )}
+
                {status.oidc_enabled && (
                  <Button
                    theme='outline'
@@ -714,6 +745,7 @@ const LoginForm = () => {
              </Form>

              {(status.github_oauth ||
+                status.discord_oauth ||
                status.oidc_enabled ||
                status.wechat_login ||
                status.linuxdo_oauth ||
@@ -849,6 +881,7 @@ const LoginForm = () => {
        {showEmailLogin ||
        !(
          status.github_oauth ||
+          status.discord_oauth ||
          status.oidc_enabled ||
          status.wechat_login ||
          status.linuxdo_oauth ||
--- a/web/src/components/auth/RegisterForm.jsx
+++ b/web/src/components/auth/RegisterForm.jsx
@@ -28,6 +28,7 @@ import {
  updateAPI,
  getSystemName,
  setUserData,
+  onDiscordOAuthClicked,
 } from '../../helpers';
 import Turnstile from 'react-turnstile';
 import { Button, Card, Checkbox, Divider, Form, Icon, Modal } from '@douyinfe/semi-ui';
@@ -51,6 +52,7 @@ import WeChatIcon from '../common/logo/WeChatIcon';
 import TelegramLoginButton from 'react-telegram-login/src';
 import { UserContext } from '../../context/User';
 import { useTranslation } from 'react-i18next';
+import { SiDiscord } from 'react-icons/si';

 const RegisterForm = () => {
  let navigate = useNavigate();
@@ -72,6 +74,7 @@ const RegisterForm = () => {
  const [showEmailRegister, setShowEmailRegister] = useState(false);
  const [wechatLoading, setWechatLoading] = useState(false);
  const [githubLoading, setGithubLoading] = useState(false);
+  const [discordLoading, setDiscordLoading] = useState(false);
  const [oidcLoading, setOidcLoading] = useState(false);
  const [linuxdoLoading, setLinuxdoLoading] = useState(false);
  const [emailRegisterLoading, setEmailRegisterLoading] = useState(false);
@@ -264,6 +267,15 @@ const RegisterForm = () => {
    }
  };

+  const handleDiscordClick = () => {
+    setDiscordLoading(true);
+    try {
+      onDiscordOAuthClicked(status.discord_client_id);
+    } finally {
+      setTimeout(() => setDiscordLoading(false), 3000);
+    }
+  };
+
  const handleOIDCClick = () => {
    setOidcLoading(true);
    try {
@@ -377,6 +389,19 @@ const RegisterForm = () => {
                  </Button>
                )}

+                {status.discord_oauth && (
+                  <Button
+                    theme='outline'
+                    className='w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors'
+                    type='tertiary'
+                    icon={<SiDiscord style={{ color: '#5865F2', width: '20px', height: '20px' }} />}
+                    onClick={handleDiscordClick}
+                    loading={discordLoading}
+                  >
+                    <span className='ml-3'>{t('使用 Discord 继续')}</span>
+                  </Button>
+                )}
+
                {status.oidc_enabled && (
                  <Button
                    theme='outline'
@@ -591,6 +616,7 @@ const RegisterForm = () => {
              </Form>

              {(status.github_oauth ||
+                status.discord_oauth ||
                status.oidc_enabled ||
                status.wechat_login ||
                status.linuxdo_oauth ||
@@ -686,6 +712,7 @@ const RegisterForm = () => {
        {showEmailRegister ||
        !(
          status.github_oauth ||
+          status.discord_oauth ||
          status.oidc_enabled ||
          status.wechat_login ||
          status.linuxdo_oauth ||
--- a/web/src/components/settings/SystemSetting.jsx
+++ b/web/src/components/settings/SystemSetting.jsx
@@ -52,6 +52,9 @@ const SystemSetting = () => {
    GitHubOAuthEnabled: '',
    GitHubClientId: '',
    GitHubClientSecret: '',
+    'discord.enabled': '',
+    'discord.client_id': '',
+    'discord.client_secret': '',
    'oidc.enabled': '',
    'oidc.client_id': '',
    'oidc.client_secret': '',
@@ -179,6 +182,7 @@ const SystemSetting = () => {
          case 'EmailAliasRestrictionEnabled':
          case 'SMTPSSLEnabled':
          case 'LinuxDOOAuthEnabled':
+          case 'discord.enabled':
          case 'oidc.enabled':
          case 'passkey.enabled':
          case 'passkey.allow_insecure_origin':
@@ -473,6 +477,27 @@ const SystemSetting = () => {
    }
  };

+  const submitDiscordOAuth = async () => {
+    const options = [];
+
+    if (originInputs['discord.client_id'] !== inputs['discord.client_id']) {
+      options.push({ key: 'discord.client_id', value: inputs['discord.client_id'] });
+    }
+    if (
+      originInputs['discord.client_secret'] !== inputs['discord.client_secret'] &&
+      inputs['discord.client_secret'] !== ''
+    ) {
+      options.push({
+        key: 'discord.client_secret',
+        value: inputs['discord.client_secret'],
+      });
+    }
+
+    if (options.length > 0) {
+      await updateOptions(options);
+    }
+  };
+
  const submitOIDCSettings = async () => {
    if (inputs['oidc.well_known'] && inputs['oidc.well_known'] !== '') {
      if (
@@ -1014,6 +1039,15 @@ const SystemSetting = () => {
                      >
                        {t('允许通过 GitHub 账户登录 & 注册')}
                      </Form.Checkbox>
+                      <Form.Checkbox
+                        field='discord.enabled'
+                        noLabel
+                        onChange={(e) =>
+                          handleCheckboxChange('discord.enabled', e)
+                        }
+                      >
+                        {t('允许通过 Discord 账户登录 & 注册')}
+                      </Form.Checkbox>
                      <Form.Checkbox
                        field='LinuxDOOAuthEnabled'
                        noLabel
@@ -1410,6 +1444,37 @@ const SystemSetting = () => {
                  </Button>
                </Form.Section>
              </Card>
+              <Card>
+                <Form.Section text={t('配置 Discord OAuth')}>
+                  <Text>{t('用以支持通过 Discord 进行登录注册')}</Text>
+                  <Banner
+                    type='info'
+                    description={`${t('Homepage URL 填')} ${inputs.ServerAddress ? inputs.ServerAddress : t('网站地址')}，${t('Authorization callback URL 填')} ${inputs.ServerAddress ? inputs.ServerAddress : t('网站地址')}/oauth/discord`}
+                    style={{ marginBottom: 20, marginTop: 16 }}
+                  />
+                  <Row
+                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+                  >
+                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                      <Form.Input
+                        field="['discord.client_id']"
+                        label={t('Discord Client ID')}
+                      />
+                    </Col>
+                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+                      <Form.Input
+                        field="['discord.client_secret']"
+                        label={t('Discord Client Secret')}
+                        type='password'
+                        placeholder={t('敏感信息不会发送到前端显示')}
+                      />
+                    </Col>
+                  </Row>
+                  <Button onClick={submitDiscordOAuth}>
+                    {t('保存 Discord OAuth 设置')}
+                  </Button>
+                </Form.Section>
+              </Card>
              <Card>
                <Form.Section text={t('配置 Linux DO OAuth')}>
                  <Text>
--- a/web/src/components/settings/personal/cards/AccountManagement.jsx
+++ b/web/src/components/settings/personal/cards/AccountManagement.jsx
@@ -38,13 +38,14 @@ import {
  IconLock,
  IconDelete,
 } from '@douyinfe/semi-icons';
-import { SiTelegram, SiWechat, SiLinux } from 'react-icons/si';
+import { SiTelegram, SiWechat, SiLinux, SiDiscord } from 'react-icons/si';
 import { UserPlus, ShieldCheck } from 'lucide-react';
 import TelegramLoginButton from 'react-telegram-login';
 import {
  onGitHubOAuthClicked,
  onOIDCClicked,
  onLinuxDOOAuthClicked,
+  onDiscordOAuthClicked,
 } from '../../../../helpers';
 import TwoFASetting from '../components/TwoFASetting';

@@ -247,6 +248,47 @@ const AccountManagement = ({
                </div>
              </Card>

+              {/* Discord绑定 */}
+              <Card className='!rounded-xl'>
+                <div className='flex items-center justify-between gap-3'>
+                  <div className='flex items-center flex-1 min-w-0'>
+                    <div className='w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3 flex-shrink-0'>
+                      <SiDiscord
+                        size={20}
+                        className='text-slate-600 dark:text-slate-300'
+                      />
+                    </div>
+                    <div className='flex-1 min-w-0'>
+                      <div className='font-medium text-gray-900'>
+                        {t('Discord')}
+                      </div>
+                      <div className='text-sm text-gray-500 truncate'>
+                        {renderAccountInfo(
+                          userState.user?.discord_id,
+                          t('Discord ID'),
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                  <div className='flex-shrink-0'>
+                    <Button
+                      type='primary'
+                      theme='outline'
+                      size='small'
+                      onClick={() =>
+                        onDiscordOAuthClicked(status.discord_client_id)
+                      }
+                      disabled={
+                        isBound(userState.user?.discord_id) ||
+                        !status.discord_oauth
+                      }
+                    >
+                      {status.discord_oauth ? t('绑定') : t('未启用')}
+                    </Button>
+                  </div>
+                </div>
+              </Card>
+
              {/* OIDC绑定 */}
              <Card className='!rounded-xl'>
                <div className='flex items-center justify-between gap-3'>
--- a/web/src/components/table/users/modals/EditUserModal.jsx
+++ b/web/src/components/table/users/modals/EditUserModal.jsx
@@ -72,6 +72,7 @@ const EditUserModal = (props) => {
    password: '',
    github_id: '',
    oidc_id: '',
+    discord_id: '',
    wechat_id: '',
    telegram_id: '',
    email: '',
@@ -332,6 +333,7 @@ const EditUserModal = (props) => {
                  <Row gutter={12}>
                    {[
                      'github_id',
+                      'discord_id',
                      'oidc_id',
                      'wechat_id',
                      'email',
--- a/web/src/helpers/api.js
+++ b/web/src/helpers/api.js
@@ -231,6 +231,17 @@ export async function getOAuthState() {
  }
 }

+export async function onDiscordOAuthClicked(client_id) {
+  const state = await getOAuthState();
+  if (!state) return;
+  const redirect_uri = `${window.location.origin}/oauth/discord`;
+  const response_type = 'code';
+  const scope = 'identify+openid';
+  window.open(
+    `https://discord.com/oauth2/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}&response_type=${response_type}&scope=${scope}&state=${state}`,
+  );
+}
+
 export async function onOIDCClicked(auth_url, client_id, openInNewTab = false) {
  const state = await getOAuthState();
  if (!state) return;
--- a/web/src/i18n/locales/zh.json
+++ b/web/src/i18n/locales/zh.json
@@ -257,6 +257,7 @@
    "余额充值管理": "余额充值管理",
    "你似乎并没有修改什么": "你似乎并没有修改什么",
    "使用 GitHub 继续": "使用 GitHub 继续",
+    "使用 Discord 继续": "使用 Discord 继续",
    "使用 JSON 对象格式，格式为：{\"组名\": [最多请求次数, 最多请求完成次数]}": "使用 JSON 对象格式，格式为：{\"组名\": [最多请求次数, 最多请求完成次数]}",
    "使用 LinuxDO 继续": "使用 LinuxDO 继续",
    "使用 OIDC 继续": "使用 OIDC 继续",