diff --git a/src/api/sso.ts b/src/api/sso.ts
index 0ec458bd2..909bf2da8 100644
--- a/src/api/sso.ts
+++ b/src/api/sso.ts
@@ -12,8 +12,8 @@ export const getSSOList = (): Promise<DashboardSsoBackendStatus[]> => {
 }
 
 export const postSSOLogin = (
-  backend: 'ldap' | 'saml',
-  emqxDashboardSsoLdapLogin: PostSsoLoginBackendBody,
+  backend: 'ldap' | 'saml' | 'tongauth',
+  emqxDashboardSsoLdapLogin?: PostSsoLoginBackendBody,
 ): Promise<PostSsoLoginBackend200> => {
   return http.post(`/sso/login/${backend}`, emqxDashboardSsoLdapLogin)
 }
diff --git a/src/assets/img/tongauth.png b/src/assets/img/tongauth.png
new file mode 100644
index 000000000..009c6edeb
Binary files /dev/null and b/src/assets/img/tongauth.png differ
diff --git a/src/hooks/SSO/useSSO.ts b/src/hooks/SSO/useSSO.ts
index cf5236c28..bf3e39dd8 100644
--- a/src/hooks/SSO/useSSO.ts
+++ b/src/hooks/SSO/useSSO.ts
@@ -7,12 +7,15 @@ import {
   PostSsoLoginBackend200,
 } from '@/types/schemas/dashboardSingleSignOn.schemas'
 import { ComputedRef, Ref, computed, reactive, ref } from 'vue'
+import useI18nTl from '../useI18nTl'
 
 export const useSSOBackendsLabel = (): { getBackendLabel: (backend: string) => string } => {
+  const { tl } = useI18nTl('General')
   const backendsLabelMap: Map<string, string> = new Map([
     [DashboardSsoBackendStatusBackend.ldap, 'LDAP'],
     [DashboardSsoBackendStatusBackend.saml, 'SAML 2.0'],
     [DashboardSsoBackendStatusBackend.oidc, 'OIDC'],
+    [DashboardSsoBackendStatusBackend.tongauth, tl('tongtech')],
   ])
   const getBackendLabel = (backend: string): string => backendsLabelMap.get(backend) || ''
 
@@ -36,6 +39,9 @@ export default function useSSO(): {
   enabledSSOList: Ref<Array<string>>
   ldapRecord: SsoLogin
   hasSSOEnabled: ComputedRef<boolean>
+  tongTechLoginUrl: string
+  tongTechBackend: Ref<'tongauth'>
+  isTongTechAuthEnabled: ComputedRef<boolean>
   ldapLogin: () => Promise<LdapLoginResult>
   getEnabledSSO: () => Promise<void>
 } {
@@ -49,6 +55,8 @@ export default function useSSO(): {
   })
   const currentLoginBackend = ref<LoginBackend>('local')
 
+  const getLoginUrl = (backend: string) => `${API_BASE_URL}/sso/login/${backend}`
+
   const samlLoginUrl = `${API_BASE_URL}/sso/login/${DashboardSsoBackendStatusBackend.saml}`
   const samlBackend = ref(DashboardSamlBackend.saml)
 
@@ -57,6 +65,12 @@ export default function useSSO(): {
 
   const hasSSOEnabled = computed(() => enabledSSOList.value.length > 0)
 
+  const tongTechLoginUrl = getLoginUrl(DashboardSsoBackendStatusBackend.tongauth)
+  const tongTechBackend = ref(DashboardSsoBackendStatusBackend.tongauth)
+  const isTongTechAuthEnabled = computed(() =>
+    enabledSSOList.value.includes(DashboardSsoBackendStatusBackend.tongauth),
+  )
+
   const getEnabledSSO = async () => {
     try {
       enabledSSOList.value = await getSSORunning()
@@ -88,6 +102,9 @@ export default function useSSO(): {
     enabledSSOList,
     ldapRecord,
     hasSSOEnabled,
+    tongTechLoginUrl,
+    tongTechBackend,
+    isTongTechAuthEnabled,
     ldapLogin,
     getEnabledSSO,
   }
diff --git a/src/hooks/SSO/useSSODetail.ts b/src/hooks/SSO/useSSODetail.ts
index 7241d4068..e20eac941 100644
--- a/src/hooks/SSO/useSSODetail.ts
+++ b/src/hooks/SSO/useSSODetail.ts
@@ -52,11 +52,20 @@ export default (): {
     fallback_methods: ['RS256'],
     client_jwks: 'none',
   })
+  const createRawTongTechForm = (): any => ({
+    enable: true,
+    backend: DashboardSsoBackendStatusBackend.tongauth,
+    dashboard_addr: location.origin + location.pathname.slice(0, -1),
+    auth_server_addr: 'http://168.1.15.162:9000',
+    client_id: 'tongmmp_yunjian_oauth2',
+    client_secret: 'b2c3d4e5-f678-9c0a-1b2f-4567890abcde',
+  })
 
   const formCreatorMap: Map<string, () => any> = new Map([
     [DashboardSsoBackendStatusBackend.ldap, createRawLDAPForm],
     [DashboardSsoBackendStatusBackend.saml, createRawSAMLForm],
     [DashboardSsoBackendStatusBackend.oidc, createRawOIDCForm],
+    [DashboardSsoBackendStatusBackend.tongauth, createRawTongTechForm],
   ])
   const createRawForm = (backend: string) => {
     const func = formCreatorMap.get(backend)
diff --git a/src/i18n/Base.js b/src/i18n/Base.js
index c9a3b11b0..3e03fc5bd 100644
--- a/src/i18n/Base.js
+++ b/src/i18n/Base.js
@@ -703,4 +703,16 @@ export default {
     zh: '',
     en: ' ',
   },
+  tongTechAuthGuidance: {
+    zh: '请在配置文件中，{add}或启用东方通单点登录，并重启服务',
+    en: 'Please {add} or enable TongTech Auth in the configuration file and restart the service',
+  },
+  tongTechAuthConfigComment: {
+    zh: '东方通单点登录配置参数，请确保参数在 dashboard > sso 层级下',
+    en: 'TongTech SSO configuration parameters, please ensure the parameters are under the dashboard > sso hierarchy',
+  },
+  jumping: {
+    zh: '跳转中...',
+    en: 'Jumping...',
+  },
 }
diff --git a/src/i18n/General.js b/src/i18n/General.js
index c85d10fb8..972ea1b7c 100644
--- a/src/i18n/General.js
+++ b/src/i18n/General.js
@@ -263,6 +263,10 @@ export default {
     zh: '启用 {backend} SSO',
     en: 'Enable {backend} SSO',
   },
+  tongtech: {
+    zh: '东方通',
+    en: 'TongTech',
+  },
   baseDN: {
     zh: '基本 DN',
     en: 'Base DN',
@@ -355,6 +359,14 @@ export default {
     zh: '备用方法',
     en: 'Fallback Methods',
   },
+  authServerAddr: {
+    zh: '认证服务器地址',
+    en: 'Auth Server Address',
+  },
+  authServerAddrDesc: {
+    zh: '东方通认证服务器的基本 URL。示例：http://168.1.15.162:9000',
+    en: 'The Base URL of the TongAuth Server. Example: http://168.1.15.162:9000',
+  },
   JWK: {
     zh: 'JSON Web 密钥',
     en: 'JSON Web Key (JWK)',
diff --git a/src/types/schemas/dashboardSingleSignOn.schemas.ts b/src/types/schemas/dashboardSingleSignOn.schemas.ts
index 3a3bfbf5f..b095a9ae7 100644
--- a/src/types/schemas/dashboardSingleSignOn.schemas.ts
+++ b/src/types/schemas/dashboardSingleSignOn.schemas.ts
@@ -1,3 +1,55 @@
+export type GetSsoTongauthCallback404Code =
+  typeof GetSsoTongauthCallback404Code[keyof typeof GetSsoTongauthCallback404Code]
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const GetSsoTongauthCallback404Code = {
+  BACKEND_NOT_FOUND: 'BACKEND_NOT_FOUND',
+} as const
+
+export type GetSsoTongauthCallback404 = {
+  code?: GetSsoTongauthCallback404Code
+  message?: string
+}
+
+export type GetSsoTongauthCallback401Code =
+  typeof GetSsoTongauthCallback401Code[keyof typeof GetSsoTongauthCallback401Code]
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const GetSsoTongauthCallback401Code = {
+  BAD_USERNAME_OR_PWD: 'BAD_USERNAME_OR_PWD',
+} as const
+
+export type GetSsoTongauthCallback401 = {
+  code?: GetSsoTongauthCallback401Code
+  message?: string
+}
+
+export type GetSsoTongauthCallback400Code =
+  typeof GetSsoTongauthCallback400Code[keyof typeof GetSsoTongauthCallback400Code]
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const GetSsoTongauthCallback400Code = {
+  BAD_REQUEST: 'BAD_REQUEST',
+} as const
+
+export type GetSsoTongauthCallback400 = {
+  code?: GetSsoTongauthCallback400Code
+  message?: string
+}
+
+export type GetSsoTongauthCallback302Code =
+  typeof GetSsoTongauthCallback302Code[keyof typeof GetSsoTongauthCallback302Code]
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const GetSsoTongauthCallback302Code = {
+  REDIRECT: 'REDIRECT',
+} as const
+
+export type GetSsoTongauthCallback302 = {
+  code?: GetSsoTongauthCallback302Code
+  message?: string
+}
+
 export type DeleteSsoBackend404Code =
   typeof DeleteSsoBackend404Code[keyof typeof DeleteSsoBackend404Code]
 
@@ -23,9 +75,9 @@ export type PutSsoBackend404 = {
   message?: string
 }
 
-export type PutSsoBackend200 = SsoOidc | DashboardSaml | SsoLdap
+export type PutSsoBackend200 = DashboardTongauth | DashboardSaml | SsoOidc | SsoLdap
 
-export type PutSsoBackendBody = SsoOidc | DashboardSaml | SsoLdap
+export type PutSsoBackendBody = DashboardTongauth | DashboardSaml | SsoOidc | SsoLdap
 
 export type GetSsoBackend404Code = typeof GetSsoBackend404Code[keyof typeof GetSsoBackend404Code]
 
@@ -39,15 +91,16 @@ export type GetSsoBackend404 = {
   message?: string
 }
 
-export type GetSsoBackend200 = SsoOidc | DashboardSaml | SsoLdap
+export type GetSsoBackend200 = DashboardTongauth | DashboardSaml | SsoOidc | SsoLdap
 
 export type GetSsoRunning200Item = typeof GetSsoRunning200Item[keyof typeof GetSsoRunning200Item]
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export const GetSsoRunning200Item = {
   ldap: 'ldap',
-  saml: 'saml',
   oidc: 'oidc',
+  saml: 'saml',
+  tongauth: 'tongauth',
 } as const
 
 export type PostSsoLoginBackend404Code =
@@ -109,7 +162,7 @@ export type PostSsoLoginBackend200 = {
   license?: PostSsoLoginBackend200License
 }
 
-export type PostSsoLoginBackendBody = SsoLogin | DashboardLogin | SsoLogin
+export type PostSsoLoginBackendBody = DashboardLogin | DashboardLogin | SsoLogin | SsoLogin
 
 export type GetSsoSamlMetadata404Code =
   typeof GetSsoSamlMetadata404Code[keyof typeof GetSsoSamlMetadata404Code]
@@ -301,6 +354,20 @@ export const SsoLdapBackend = {
   ldap: 'ldap',
 } as const
 
+export interface SsoLdap {
+  enable?: boolean
+  backend: SsoLdapBackend
+  query_timeout?: string
+  server: string
+  pool_size?: number
+  username: string
+  password?: string
+  base_dn: string
+  filter?: string
+  request_timeout?: string
+  ssl?: LdapSsl
+}
+
 export type SsoClientFileJwksType = typeof SsoClientFileJwksType[keyof typeof SsoClientFileJwksType]
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -370,18 +437,21 @@ export interface LdapSsl {
   server_name_indication?: LdapSslServerNameIndication
 }
 
-export interface SsoLdap {
+export type DashboardTongauthBackend =
+  typeof DashboardTongauthBackend[keyof typeof DashboardTongauthBackend]
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const DashboardTongauthBackend = {
+  tongauth: 'tongauth',
+} as const
+
+export interface DashboardTongauth {
   enable?: boolean
-  backend: SsoLdapBackend
-  query_timeout?: string
-  server: string
-  pool_size?: number
-  username: string
-  password?: string
-  base_dn: string
-  filter?: string
-  request_timeout?: string
-  ssl?: LdapSsl
+  backend: DashboardTongauthBackend
+  dashboard_addr?: string
+  auth_server_addr?: string
+  client_id?: string
+  client_secret?: string
 }
 
 export type DashboardSamlBackend = typeof DashboardSamlBackend[keyof typeof DashboardSamlBackend]
@@ -405,7 +475,7 @@ export type DashboardLoginBackend = typeof DashboardLoginBackend[keyof typeof Da
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export const DashboardLoginBackend = {
-  saml: 'saml',
+  tongauth: 'tongauth',
 } as const
 
 export interface DashboardLogin {
@@ -418,8 +488,9 @@ export type DashboardSsoBackendStatusBackend =
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export const DashboardSsoBackendStatusBackend = {
   ldap: 'ldap',
-  saml: 'saml',
   oidc: 'oidc',
+  saml: 'saml',
+  tongauth: 'tongauth',
 } as const
 
 export interface DashboardSsoBackendStatus {
diff --git a/src/views/Base/Login.vue b/src/views/Base/Login.vue
index 5791106a0..166b625f8 100644
--- a/src/views/Base/Login.vue
+++ b/src/views/Base/Login.vue
@@ -1,6 +1,8 @@
 <template>
-  <div class="login">
-    <el-container>
+  <div class="login" v-loading="isSSOLoading">
+    <TongTechAuthGuidance v-if="!isTongTechAuthEnabled" />
+    <TongTechAuthForm v-else />
+    <el-container v-if="false">
       <el-header>
         <img src="@/assets/img/tongtech.svg" alt="logo" height="40" />
         <el-dropdown popper-class="lang-dropdown">
@@ -290,6 +292,8 @@ import { computed, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { useStore } from 'vuex'
+import TongTechAuthGuidance from './components/TongTechAuthGuidance.vue'
+import TongTechAuthForm from './components/TongTechAuthForm.vue'
 
 const { t } = useI18n()
 const store = useStore()
@@ -309,6 +313,7 @@ const {
   isSSOLoading,
   ldapRecord,
   hasSSOEnabled,
+  isTongTechAuthEnabled,
   ldapLogin,
   getEnabledSSO,
 } = useSSO()
diff --git a/src/views/Base/components/TongTechAuthForm.vue b/src/views/Base/components/TongTechAuthForm.vue
new file mode 100644
index 000000000..b0f6a1cc6
--- /dev/null
+++ b/src/views/Base/components/TongTechAuthForm.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="tong-tech-auth">
+    <p class="placeholder">{{ t('Base.jumping') }}</p>
+    <form
+      v-show="false"
+      :action="tongTechLoginUrl"
+      method="post"
+      class="form-sso"
+      enctype="multipart/form-data"
+    >
+      <input
+        v-show="false"
+        type="text"
+        name="backend"
+        id="backend"
+        required
+        v-model="tongTechBackend"
+      />
+      <input
+        ref="SubmitButton"
+        class="el-button el-button--info is-link"
+        type="submit"
+        value="TongTech"
+      />
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { waitAMoment } from '@/common/tools'
+import useSSO from '@/hooks/SSO/useSSO'
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const { tongTechBackend, tongTechLoginUrl } = useSSO()
+
+const SubmitButton = ref()
+onMounted(async () => {
+  await waitAMoment(500)
+  SubmitButton.value.click()
+})
+</script>
+
+<style lang="scss">
+.tong-tech-auth {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
diff --git a/src/views/Base/components/TongTechAuthGuidance.vue b/src/views/Base/components/TongTechAuthGuidance.vue
new file mode 100644
index 000000000..ddfa2a0e0
--- /dev/null
+++ b/src/views/Base/components/TongTechAuthGuidance.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="tong-tech-auth-guidance">
+    <i18n-t class="tong-tech-auth-guidance-title" keypath="Base.tongTechAuthGuidance" tag="p">
+      <template #add>
+        <el-tooltip placement="top" popper-class="is-wider auth-config-tooltip">
+          <template #content>
+            <CodeView :code="configView" lang="json" />
+          </template>
+          <el-button link type="primary">{{ lowerCase(t('Base.add')) }}</el-button>
+        </el-tooltip>
+      </template>
+    </i18n-t>
+  </div>
+</template>
+
+<script setup lang="ts">
+import CodeView from '@/components/CodeView.vue'
+import { lowerCase } from 'lodash'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const dashboard_addr = location.origin + location.pathname.slice(0, -1)
+const configView = `dashboard {
+  sso {
+    // ${t('Base.tongTechAuthConfigComment')}
+    tongauth {
+      enable = true
+      backend = tongauth
+      auth_server_addr = "http://168.1.15.162:11111"
+      dashboard_addr = "${dashboard_addr}"
+      client_id = tongmmp_yunjian_oauth2
+      client_secret = "b2c3d4e5-f678-9c0a-1b2f-4567890abcde"
+    }
+  }
+}`
+</script>
+
+<style lang="scss">
+.tong-tech-auth-guidance {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  .el-button.is-link {
+    padding: 0;
+    vertical-align: baseline;
+    font-size: 16px;
+    font-weight: normal;
+  }
+}
+.auth-config-tooltip {
+  .code-view .hljs {
+    border: 1px solid #5b5e65;
+  }
+}
+</style>
diff --git a/src/views/General/SSODetail.vue b/src/views/General/SSODetail.vue
index 65273424a..de2a7f036 100644
--- a/src/views/General/SSODetail.vue
+++ b/src/views/General/SSODetail.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { getSSOBackend, putSSOBackend, getSSOList } from '@/api/sso'
+import { getSSOBackend, getSSOList, putSSOBackend } from '@/api/sso'
 import DetailHeader from '@/components/DetailHeader.vue'
 import { useSSOBackendsLabel } from '@/hooks/SSO/useSSO'
 import useSSODetail from '@/hooks/SSO/useSSODetail'
@@ -40,8 +40,9 @@ import { computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 import LDAPForm from './components/SSOForm/LDAPForm.vue'
-import SAMLForm from './components/SSOForm/SAMLForm.vue'
 import OIDCForm from './components/SSOForm/OIDCForm.vue'
+import SAMLForm from './components/SSOForm/SAMLForm.vue'
+import TongTechForm from './components/SSOForm/TongTechForm.vue'
 
 const router = useRouter()
 const route = useRoute()
@@ -59,6 +60,7 @@ const formComMap: Record<string, Component> = {
   [DashboardSsoBackendStatusBackend.ldap]: LDAPForm,
   [DashboardSsoBackendStatusBackend.saml]: SAMLForm,
   [DashboardSsoBackendStatusBackend.oidc]: OIDCForm,
+  [DashboardSsoBackendStatusBackend.tongauth]: TongTechForm,
 }
 
 const formCom = computed(() =>
diff --git a/src/views/General/components/SSOForm/TongTechForm.vue b/src/views/General/components/SSOForm/TongTechForm.vue
new file mode 100644
index 000000000..e6bbce33e
--- /dev/null
+++ b/src/views/General/components/SSOForm/TongTechForm.vue
@@ -0,0 +1,89 @@
+<template>
+  <el-form
+    class="ldap-form tong-form"
+    ref="FormCom"
+    require-asterisk-position="right"
+    :model="formData"
+    :rules="rules"
+    :label-width="150"
+  >
+    <el-form-item prop="enable" :label="tl('SSOEnable', { backend: tl('tongtech') })">
+      <el-switch v-model="formData.enable" />
+    </el-form-item>
+    <el-form-item prop="dashboard_addr">
+      <template #label>
+        <FormItemLabel :label="tl('dashboardAddr')" :desc="tl('dashboardAddrDesc')" />
+      </template>
+      <el-input v-model="formData.dashboard_addr" />
+    </el-form-item>
+    <el-form-item prop="auth_server_addr">
+      <template #label>
+        <FormItemLabel :label="tl('authServerAddr')" :desc="tl('authServerAddrDesc')" />
+      </template>
+      <el-input v-model="formData.auth_server_addr" />
+    </el-form-item>
+    <el-form-item prop="client_id" label="Client ID">
+      <el-input v-model="formData.client_id" />
+    </el-form-item>
+    <el-form-item prop="client_secret" label="Client Secret">
+      <el-input
+        type="password"
+        v-model="formData.client_secret"
+        show-password
+        autocomplete="one-time-code"
+      />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import FormItemLabel from '@/components/FormItemLabel.vue'
+import useFormRules from '@/hooks/useFormRules'
+import useI18nTl from '@/hooks/useI18nTl'
+import { DashboardTongauth } from '@/types/schemas/dashboardSingleSignOn.schemas'
+import { PropType, computed, defineEmits, defineExpose, defineProps, ref } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<DashboardTongauth>,
+    default: () => ({}),
+  },
+  isEdit: {
+    type: Boolean,
+    default: false,
+  },
+})
+const emit = defineEmits(['update:modelValue', 'save'])
+
+const { t, tl } = useI18nTl('General')
+
+const FormCom = ref()
+
+const formData = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emit('update:modelValue', val)
+  },
+})
+
+const { createRequiredRule } = useFormRules()
+const rules = {
+  dashboard_addr: createRequiredRule(tl('dashboardAddr')),
+  auth_server_addr: createRequiredRule(tl('authServerAddr')),
+  client_id: createRequiredRule('Client ID'),
+  client_secret: createRequiredRule('Client Secret'),
+}
+
+const validate = () => FormCom.value.validate()
+defineExpose({ validate })
+</script>
+
+<style lang="scss">
+.ldap-form {
+  .TLS-enable-config .TLS-input {
+    width: 100%;
+  }
+}
+</style>