add sso login logic

src/locales/en-US/common.ts

@@ -6,8 +6,8 @@ export default {
   'common.button.shortcut': 'Keyboard Shortcut',
   'common.button.add': 'Add',
   'common.button.login': 'Use a local user',
-  'common.button.oidclogin': 'Login In With OIDC',
+  'common.button.oidclogin': 'Log In With OIDC',
-  'common.button.samllogin': 'Login In With SAML',
+  'common.button.samllogin': 'Log In With SAML',
   'common.button.select': 'Select',
   'common.button.selected': 'Selected',
   'common.button.continue': 'Continue',

src/locales/zh-CN/common.ts

@@ -6,8 +6,8 @@ export default {
   'common.button.shortcut': '快捷键',
   'common.button.add': '添加',
   'common.button.login': 'Use a local user',
-  'common.button.oidclogin': 'Login In With OIDC',
+  'common.button.oidclogin': 'Log In With OIDC',
-  'common.button.samllogin': 'Login In With SAML',
+  'common.button.samllogin': 'Log In With SAML',
   'common.button.select': '选择',
   'common.button.selected': '已选择',
   'common.button.continue': '继续',

src/pages/login/components/login-form.tsx

@@ -12,17 +12,16 @@ import {
   removeRememberMe
 } from '@/utils/localstore/index';
 import { LockOutlined, UserOutlined } from '@ant-design/icons';
-import { useIntl, useModel } from '@umijs/max';
+import { history, useIntl, useModel } from '@umijs/max';
 import { Button, Checkbox, Form } from 'antd';
 import { createStyles } from 'antd-style';
 import CryptoJS from 'crypto-js';
 import { useAtom } from 'jotai';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { login } from '../apis';
 import { checkDefaultPage } from '../utils';
 
-const authConfig = await fetchAuthConfig('/get_config'); // get authentication configuration
 const useStyles = createStyles(({ token, css }) => ({
   header: css`
     display: flex;
@@ -42,7 +41,7 @@ const useStyles = createStyles(({ token, css }) => ({
   `
 }));
 // function authentication configuration method
-async function fetchAuthConfig(url) {
+async function fetchAuthConfig(url: string) {
   try {
     const response = await fetch(url);
     if (!response.ok) throw new Error(`HTTP ${response.status}`);
@@ -51,16 +50,28 @@ async function fetchAuthConfig(url) {
     console.error('OIDC config error:', error);
     throw error;
   }
-};
+}
 
 const LoginForm = () => {
+  type LoginOption = {
+    saml?: boolean;
+    oidc?: boolean;
+  };
+
+  const [err, setErr] = useState<Error | null>(null);
+  const [loginOption, setLoginOption] = useState<LoginOption>({
+    saml: false,
+    oidc: false
+  });
   const { styles } = useStyles();
   const [userInfo, setUserInfo] = useAtom(userAtom);
   const [initialPassword, setInitialPassword] = useAtom(initialPasswordAtom);
   const { initialState, setInitialState } = useModel('@@initialState') || {};
   const intl = useIntl();
   const [form] = Form.useForm();
-
+  const { location } = history;
+  const params = new URLSearchParams(location.search);
+  const sso = params.get('sso'); // OIDC callback information
   const renderWelCome = useMemo(() => {
     return (
       <div
@@ -83,7 +94,6 @@ const LoginForm = () => {
       </div>
     );
   }, [intl]);
-
   const gotoDefaultPage = async (userInfo: any) => {
     checkDefaultPage(userInfo, true);
   };
@@ -134,36 +144,46 @@ const LoginForm = () => {
       form.setFieldsValue({ username, password, autoLogin: true });
     }
   };
+
   // OIDC certification
   const handleOidcLogin = async () => {
-    const authUrl = `${authConfig.base_entrypoint}auth?response_type=code&client_id=${authConfig.CLIENT_ID}&redirect_uri=${authConfig.redirect_uri}&scope=openid profile email&state=random_state_string`;
+    window.location.href = '/auth/oidc/login';
-    window.location.href = authUrl;};
+  };
   // SAML certification
   const handleSamlLogin = async () => {
-      window.location.href = "/auth/saml/login";}
+    window.location.href = '/auth/saml/login';
-  // Handling certification callbacks
-  useEffect(()  => {
-    const params = new URLSearchParams(window.location.search);
-    const code = params.get('code'); // OIDC callback information
-    console.log(code)
-    const samlResponse = params.get('SAMLResponse'); // SAML callback information
-    const allParams = Object.fromEntries(params.entries());
-    history.replaceState({}, '', window.location.pathname);
-    if (code) { login({
-        code: code
-      }).then(async () => {
-      const userInfo = await fetchUserInfo();
-      await setUserInfo(userInfo);
-      gotoDefaultPage(userInfo);
-    });
   };
-    if (samlResponse) { login({
+
-        SAMLResponse: decodeURIComponent(samlResponse)
+  // Handling SSO callbacks
-      }).then(async () => {
+  useEffect(() => {
-      const userInfo = await fetchUserInfo();
+    fetchAuthConfig('/get_config')
-      await setUserInfo(userInfo);
+      .then((authConfig) => {
-      gotoDefaultPage(userInfo);
+        if (authConfig.is_oidc) {
-    })};
+          setLoginOption({
+            oidc: true
+          });
+        } else if (authConfig.is_saml) {
+          if (authConfig.is_saml) {
+            setLoginOption({
+              saml: true
+            });
+          }
+        }
+      })
+      .catch((error) => {
+        setLoginOption({ oidc: false, saml: false });
+      });
+    if (sso) {
+      fetchUserInfo()
+        .then((userInfo) => {
+          setUserInfo(userInfo);
+          gotoDefaultPage({});
+        })
+        .catch((error) => {
+          console.log(error);
+          setErr(error);
+        });
+    }
   }, []);
   const handleLogin = async (values: any) => {
     try {
@@ -193,6 +213,13 @@ const LoginForm = () => {
     callGetRememberMe();
   }, []);
 
+  if (sso && !err) {
+    return <div>Handle SSO callback...</div>;
+  } else if (err) {
+    return (
+      <div style={{ color: 'red' }}>Error to log in by SSO: {err.message}</div>
+    );
+  } else {
     return (
       <div>
         <div className={styles.header}>
@@ -264,23 +291,37 @@ const LoginForm = () => {
                 {intl.formatMessage({ id: 'common.button.forgotpassword' })}
               </Button>
             </div>
-          <Button onClick={handleOidcLogin}
+            <Button
+              onClick={handleOidcLogin}
               type="primary"
               block
-                style={{ height: '48px', fontSize: '14px', display: authConfig?.is_oidc ? 'block': 'none'}}
+              style={{
+                height: '48px',
+                fontSize: '14px',
+                display: loginOption.oidc ? 'block' : 'none'
+              }}
             >
               {intl.formatMessage({ id: 'common.button.oidclogin' })}
             </Button>
-          <Button onClick={handleSamlLogin}
+            <Button
+              onClick={handleSamlLogin}
               type="primary"
               block
-                style={{ height: '48px', fontSize: '14px', display: authConfig?.is_saml ? 'block': 'none'}}
+              style={{
+                height: '48px',
+                fontSize: '14px',
+                display: loginOption.saml ? 'block' : 'none'
+              }}
             >
               {intl.formatMessage({ id: 'common.button.samllogin' })}
             </Button>
             <Button
               htmlType="submit"
-                type="link"
+              type={
+                loginOption.oidc === false && loginOption.saml === false
+                  ? 'primary'
+                  : 'link'
+              }
               block
               style={{ height: '48px', fontSize: '14px' }}
             >
@@ -290,6 +331,7 @@ const LoginForm = () => {
         </div>
       </div>
     );
+  }
 };
 
 export default LoginForm;

src/pages/users/index.tsx

@@ -277,6 +277,21 @@ const Users: React.FC = () => {
                 );
               }}
             />
+            <Column
+              title={intl.formatMessage({ id: 'users.form.source' })}
+              dataIndex="source"
+              key="source"
+              ellipsis={{
+                showTitle: false
+              }}
+              render={(text, record) => {
+                return (
+                  <AutoTooltip ghost minWidth={20}>
+                    {text}
+                  </AutoTooltip>
+                );
+              }}
+            />
             <Column
               title={intl.formatMessage({ id: 'common.table.createTime' })}
               dataIndex="created_at"