feat: support Google OAuth

2025-11-17 05:33:42 +08:00 · 2023-07-24 20:09:52 +08:00
parent bc2f48b1f2
commit c144c64fff
14 changed files with 459 additions and 11 deletions
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -12,6 +12,7 @@ import AddUser from './pages/User/AddUser';
 import { API, getLogo, getSystemName, showError, showNotice } from './helpers';
 import PasswordResetForm from './components/PasswordResetForm';
 import GitHubOAuth from './components/GitHubOAuth';
+import GoogleOAuth from './components/GoogleOAuth';
 import PasswordResetConfirm from './components/PasswordResetConfirm';
 import { UserContext } from './context/User';
 import { StatusContext } from './context/Status';
@@ -239,6 +240,14 @@ function App() {
          </Suspense>
        }
      />
+      <Route
+        path='/oauth/google'
+        element={
+          <Suspense fallback={<Loading></Loading>}>
+            <GoogleOAuth />
+          </Suspense>
+        }
+      />
      <Route
        path='/setting'
        element={
--- a/web/src/components/GoogleOAuth.js
+++ b/web/src/components/GoogleOAuth.js
@@ -0,0 +1,57 @@
+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 GoogleOAuth = () => {
+  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, count) => {
+    const res = await API.get(`/api/oauth/google?code=${code}`);
+    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 GitHub
+        return;
+      }
+      count++;
+      setPrompt(`出现错误，第 ${count} 次重试中...`);
+      await new Promise((resolve) => setTimeout(resolve, count * 2000));
+      await sendCode(code, count);
+    }
+  };
+
+  useEffect(() => {
+    let code = searchParams.get('code');
+    sendCode(code, 0).then();
+  }, []);
+
+  return (
+    <Segment style={{ minHeight: '300px' }}>
+      <Dimmer active inverted>
+        <Loader size='large'>{prompt}</Loader>
+      </Dimmer>
+    </Segment>
+  );
+};
+
+export default GoogleOAuth;
--- a/web/src/components/LoginForm.js
+++ b/web/src/components/LoginForm.js
@@ -31,6 +31,12 @@ const LoginForm = () => {

  const [showWeChatLoginModal, setShowWeChatLoginModal] = useState(false);

+  const openGoogleOAuth = () => {
+    window.open(
+      `https://accounts.google.com/o/oauth2/v2/auth?client_id=${status.google_client_id}&redirect_uri=${window.location.origin}/oauth/google&response_type=code&scope=profile`
+    );
+  };
+
  const onGitHubOAuthClicked = () => {
    window.open(
      `https://github.com/login/oauth/authorize?client_id=${status.github_client_id}&scope=user:email`
@@ -123,28 +129,32 @@ const LoginForm = () => {
            点击注册
          </Link>
        </Message>
-        {status.github_oauth || status.wechat_login ? (
+        {status.github_oauth || status.wechat_login || status.google_oauth ? (
          <>
            <Divider horizontal>Or</Divider>
-            {status.github_oauth ? (
+            {status.github_oauth && (
              <Button
                circular
                color='black'
                icon='github'
                onClick={onGitHubOAuthClicked}
              />
-            ) : (
-              <></>
            )}
-            {status.wechat_login ? (
+            {status.wechat_login && (
              <Button
                circular
                color='green'
                icon='wechat'
                onClick={onWeChatLoginClicked}
              />
-            ) : (
-              <></>
+            )}
+            {status.google_oauth && (
+              <Button
+                circular
+                color='red'
+                icon='google'
+                onClick={openGoogleOAuth}
+              />
            )}
          </>
        ) : (
--- a/web/src/components/PersonalSetting.js
+++ b/web/src/components/PersonalSetting.js
@@ -112,6 +112,12 @@ const PersonalSetting = () => {
    }
  };

+  const openGoogleOAuth = () => {
+    window.open(
+      `https://accounts.google.com/o/oauth2/v2/auth?client_id=${status.google_client_id}&redirect_uri=${window.location.origin}/oauth/google&response_type=code&scope=https://www.googleapis.com/auth/userinfo.profile`
+    );
+  };
+
  const openGitHubOAuth = () => {
    window.open(
      `https://github.com/login/oauth/authorize?client_id=${status.github_client_id}&scope=user:email`
@@ -215,6 +221,11 @@ const PersonalSetting = () => {
          <Button onClick={openGitHubOAuth}>绑定 GitHub 账号</Button>
        )
      }
+      {
+        status.google_oauth && (
+          <Button onClick={openGoogleOAuth}>绑定 Google 账号</Button>
+        )
+      }
      <Button
        onClick={() => {
          setShowEmailBindModal(true);
--- a/web/src/components/SystemSetting.js
+++ b/web/src/components/SystemSetting.js
@@ -22,6 +22,9 @@ const SystemSetting = () => {
    WeChatServerAddress: '',
    WeChatServerToken: '',
    WeChatAccountQRCodeImageURL: '',
+    GoogleOAuthEnabled: '',
+    GoogleClientId: '',
+    GoogleClientSecret: '',
    TurnstileCheckEnabled: '',
    TurnstileSiteKey: '',
    TurnstileSecretKey: '',
@@ -57,6 +60,7 @@ const SystemSetting = () => {
      case 'EmailVerificationEnabled':
      case 'GitHubOAuthEnabled':
      case 'WeChatAuthEnabled':
+      case 'GoogleOAuthEnabled':
      case 'TurnstileCheckEnabled':
      case 'RegisterEnabled':
        value = inputs[key] === 'true' ? 'false' : 'true';
@@ -87,6 +91,8 @@ const SystemSetting = () => {
      name === 'WeChatServerAddress' ||
      name === 'WeChatServerToken' ||
      name === 'WeChatAccountQRCodeImageURL' ||
+      name === 'GoogleClientId' ||
+      name === 'GoogleClientSecret' ||
      name === 'TurnstileSiteKey' ||
      name === 'TurnstileSecretKey'
    ) {
@@ -149,6 +155,18 @@ const SystemSetting = () => {
    }
  };

+  const submitGoogleOAuth = async () => {
+    if (originInputs['GoogleClientId'] !== inputs.GoogleClientId) {
+      await updateOption('GoogleClientId', inputs.GoogleClientId);
+    }
+    if (
+      originInputs['GoogleClientSecret'] !== inputs.GoogleClientSecret &&
+      inputs.GoogleClientSecret !== ''
+    ) {
+      await updateOption('GoogleClientSecret', inputs.GoogleClientSecret);
+    }
+  };
+
  const submitGitHubOAuth = async () => {
    if (originInputs['GitHubClientId'] !== inputs.GitHubClientId) {
      await updateOption('GitHubClientId', inputs.GitHubClientId);
@@ -217,6 +235,12 @@ const SystemSetting = () => {
              name='GitHubOAuthEnabled'
              onChange={handleInputChange}
            />
+            <Form.Checkbox
+              checked={inputs.GoogleOAuthEnabled === 'true'}
+              label='允许通过 Google 账户登录和注册'
+              name='GoogleOAuthEnabled'
+              onChange={handleInputChange}
+            />
            <Form.Checkbox
              checked={inputs.WeChatAuthEnabled === 'true'}
              label='允许通过微信登录 & 注册'
@@ -372,6 +396,44 @@ const SystemSetting = () => {
            保存 WeChat Server 设置
          </Form.Button>
          <Divider />
+          <Header as='h3'>
+            配置 Google OAuth 应用程序
+            <Header.Subheader>
+              用以支持通过 Google 进行登录注册，
+              <a href='https://console.cloud.google.com/' target='_blank'>
+                点击此处
+              </a>
+              管理你的 Google OAuth App
+            </Header.Subheader>
+          </Header>
+          <Message>
+            Homepage URL 填 <code>{inputs.ServerAddress}</code>
+            ，Authorization callback URL 填{' '}
+            <code>{`${inputs.ServerAddress}/oauth/google`}</code>
+          </Message>
+          <Form.Group widths={3}>
+            <Form.Input
+              label='Google 客户 ID'
+              name='GoogleClientId'
+              onChange={handleInputChange}
+              autoComplete='new-password'
+              value={inputs.GoogleClientId}
+              placeholder='输入您注册的 Google OAuth APP 的 ID'
+            />
+            <Form.Input
+              label='Google 客户秘密'
+              name='GoogleClientSecret'
+              onChange={handleInputChange}
+              type='password'
+              autoComplete='new-password'
+              value={inputs.GoogleClientSecret}
+              placeholder='敏感信息不会发送到前端显示'
+            />
+          </Form.Group>
+          <Form.Button onClick={submitGoogleOAuth}>
+            保存 Google OAuth 设置
+          </Form.Button>
+          <Divider />
          <Header as='h3'>
            配置 Turnstile
            <Header.Subheader>
--- a/web/src/pages/Home/index.js
+++ b/web/src/pages/Home/index.js
@@ -103,6 +103,12 @@ const Home = () => {
                          ? '已启用'
                          : '未启用'}
                      </p>
+                      <p>
+                        Google 身份验证：
+                        {statusState?.status?.google_oauth === true
+                          ? '已启用'
+                          : '未启用'}
+                      </p>
                      <p>
                        Turnstile 用户校验：
                        {statusState?.status?.turnstile_check === true
--- a/web/src/pages/User/EditUser.js
+++ b/web/src/pages/User/EditUser.js
@@ -14,12 +14,13 @@ const EditUser = () => {
    password: '',
    github_id: '',
    wechat_id: '',
+    google_id: '',
    email: '',
    quota: 0,
    group: 'default'
  });
  const [groupOptions, setGroupOptions] = useState([]);
-  const { username, display_name, password, github_id, wechat_id, email, quota, group } =
+  const { username, display_name, password, github_id, wechat_id, email, quota, google_id } =
    inputs;
  const handleInputChange = (e, { name, value }) => {
    setInputs((inputs) => ({ ...inputs, [name]: value }));
@@ -166,6 +167,16 @@ const EditUser = () => {
              readOnly
            />
          </Form.Field>
+          <Form.Field>
+            <Form.Input
+              label='已绑定的 Google 账户'
+              name='google_id'
+              value={google_id}
+              autoComplete='new-password'
+              placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+              readOnly
+            />
+          </Form.Field>
          <Form.Field>
            <Form.Input
              label='已绑定的邮箱账户'