diff --git a/src/components/Apps/AccountCreateUpdateForm/OTPSecretInput.vue b/src/components/Apps/AccountCreateUpdateForm/OTPSecretInput.vue
new file mode 100644
index 0000000000..7fc8871ee9
--- /dev/null
+++ b/src/components/Apps/AccountCreateUpdateForm/OTPSecretInput.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="otp-secret-input">
+    <el-input
+      v-model.trim="curValue"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      @input="handleInput"
+    >
+      <template slot="append">
+        <el-button
+          :disabled="disabled"
+          :loading="loading"
+          type="text"
+          @click="generateOTPSecret"
+        >
+          {{ $t('Generate') }}
+        </el-button>
+      </template>
+    </el-input>
+    <div v-if="generatedOTPCode" class="otp-secret-input__code">
+      <span class="otp-secret-input__code-label">{{ $t('CurrentOTPCode') }}:</span>
+      <span class="otp-secret-input__code-value">{{ generatedOTPCode }}</span>
+      <el-button type="text" @click="copyOTPCode">
+        {{ $t('Copy') }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { copy } from '@/utils/common/index'
+
+export default {
+  name: 'OTPSecretInput',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      curValue: this.value,
+      generatedOTPCode: ''
+    }
+  },
+  watch: {
+    value(val) {
+      this.curValue = val
+    }
+  },
+  methods: {
+    handleInput(value) {
+      this.generatedOTPCode = ''
+      this.$emit('input', value)
+    },
+    async generateOTPSecret() {
+      this.loading = true
+      try {
+        const data = await this.$axios.post('/api/v1/accounts/accounts/generate-otp/')
+        this.curValue = data.otp_secret_key || ''
+        this.generatedOTPCode = data.otp_code || ''
+        this.$emit('input', this.curValue)
+      } finally {
+        this.loading = false
+      }
+    },
+    copyOTPCode() {
+      if (!this.generatedOTPCode) {
+        return
+      }
+      copy(this.generatedOTPCode)
+      this.$message.success(this.$tc('CopySuccess'))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.otp-secret-input {
+  &__code {
+    margin-top: 8px;
+    color: var(--color-text-secondary);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    line-height: 1.4;
+  }
+
+  &__code-label {
+    white-space: nowrap;
+  }
+
+  &__code-value {
+    color: var(--color-text-primary);
+    font-family: monospace;
+    letter-spacing: 1px;
+  }
+}
+</style>
diff --git a/src/components/Apps/AccountCreateUpdateForm/const.js b/src/components/Apps/AccountCreateUpdateForm/const.js
index f59514d8c3..49422a6c16 100644
--- a/src/components/Apps/AccountCreateUpdateForm/const.js
+++ b/src/components/Apps/AccountCreateUpdateForm/const.js
@@ -3,6 +3,7 @@ import Select2 from '@/components/Form/FormFields/Select2.vue'
 import AssetSelect from '@/components/Apps/AssetSelect/index.vue'
 import { Required, RequiredChange } from '@/components/Form/DataForm/rules'
 import AutomationParamsForm from '@/views/assets/Platform/AutomationParamsSetting.vue'
+import OTPSecretInput from '@/components/Apps/AccountCreateUpdateForm/OTPSecretInput.vue'
 
 export const accountFieldsMeta = (vm) => {
   const defaultPrivilegedAccounts = ['root', 'administrator']
@@ -215,6 +216,17 @@ export const accountFieldsMeta = (vm) => {
       },
       hidden: (formValue) => formValue.secret_type !== 'api_key' || vm.addTemplate
     },
+    otp_secret_key: {
+      label: vm.$t('OTPSecretKey'),
+      component: OTPSecretInput,
+      helpText: vm.$t('OTPSecretKeyHelpText'),
+      el: {
+        get disabled() {
+          return vm.isDisabled
+        }
+      },
+      hidden: () => vm.addTemplate
+    },
     secret_type: {
       type: 'radio-group',
       options: [],
diff --git a/src/components/Apps/AccountCreateUpdateForm/index.vue b/src/components/Apps/AccountCreateUpdateForm/index.vue
index 12c672ecda..14023a0502 100644
--- a/src/components/Apps/AccountCreateUpdateForm/index.vue
+++ b/src/components/Apps/AccountCreateUpdateForm/index.vue
@@ -77,6 +77,7 @@ export default {
             'access_key',
             'passphrase',
             'api_key',
+            'otp_secret_key',
             'secret_reset'
           ]
         ],
@@ -160,6 +161,9 @@ export default {
       const secretType = form.secret_type || 'password'
       form.secret = form[secretType]
       form.secret = this.encryptPassword ? encryptPassword(form.secret) : form.secret
+      if (form.otp_secret_key) {
+        form.otp_secret_key = encryptPassword(form.otp_secret_key)
+      }
 
       // 如果不删除会明文显示
       delete form[secretType]
diff --git a/src/components/Apps/AccountListTable/AccountList.vue b/src/components/Apps/AccountListTable/AccountList.vue
index 31caddfc72..b72a55d958 100644
--- a/src/components/Apps/AccountListTable/AccountList.vue
+++ b/src/components/Apps/AccountListTable/AccountList.vue
@@ -13,6 +13,11 @@
       :url="secretUrl"
       :visible.sync="showViewSecretDialog"
     />
+    <ViewOTPCode
+      v-if="showViewOTPCodeDialog"
+      :account="account"
+      :visible.sync="showViewOTPCodeDialog"
+    />
     <UpdateSecretInfo
       v-if="showUpdateSecretDialog"
       :account="account"
@@ -60,6 +65,7 @@ import {
   SecretViewerFormatter
 } from '@/components/Table/TableFormatters'
 import ViewSecret from './ViewSecret.vue'
+import ViewOTPCode from './ViewOTPCode.vue'
 import UpdateSecretInfo from './UpdateSecretInfo.vue'
 import ResultDialog from './BulkCreateResultDialog.vue'
 import AccountCreateUpdate from './AccountCreateUpdate.vue'
@@ -71,6 +77,7 @@ export default {
   name: 'AccountListTable',
   components: {
     ViewSecret,
+    ViewOTPCode,
     ResultDialog,
     DrawerListTable,
     UpdateSecretInfo,
@@ -157,6 +164,7 @@ export default {
       currentAccountColumn: {},
       showPasswordHistoryDialog: false,
       showViewSecretDialog: false,
+      showViewOTPCodeDialog: false,
       showUpdateSecretDialog: false,
       showResultDialog: false,
       showAddDialog: false,
diff --git a/src/components/Apps/AccountListTable/ViewOTPCode.vue b/src/components/Apps/AccountListTable/ViewOTPCode.vue
new file mode 100644
index 0000000000..8de5a4774a
--- /dev/null
+++ b/src/components/Apps/AccountListTable/ViewOTPCode.vue
@@ -0,0 +1,204 @@
+<template>
+  <Dialog
+    :destroy-on-close="true"
+    :show-cancel="false"
+    :title="$tc('OTPCode')"
+    :visible.sync="showDialog"
+    :width="'40'"
+    v-bind="$attrs"
+    @confirm="showDialog = false"
+    v-on="$listeners"
+  >
+    <el-form label-position="right" label-width="130px">
+      <el-form-item :label="$tc('Name')">
+        <span>{{ account.name || '-' }}</span>
+      </el-form-item>
+      <el-form-item :label="$tc('Username')">
+        <span>{{ account.username || '-' }}</span>
+      </el-form-item>
+      <el-form-item :label="$tc('CurrentOTPCode')">
+        <div class="otp-panel">
+          <div class="otp-panel__header">
+            <span class="otp-panel__title">{{ account.asset?.name || '-' }}</span>
+          </div>
+          <div class="otp-panel__code" @click="copyCurrentOTPCode">{{ currentOTPCode || '------' }}</div>
+          <div class="otp-panel__footer">
+            <span class="otp-panel__footer-text">{{ account.username || '-' }}</span>
+            <span class="otp-panel__countdown">{{ secondsRemaining }}s</span>
+          </div>
+        </div>
+      </el-form-item>
+    </el-form>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog/index.vue'
+import { copy } from '@/utils/common/index'
+import { mapGetters } from 'vuex'
+
+const OTP_PERIOD = 30
+
+export default {
+  name: 'ViewOTPCode',
+  components: {
+    Dialog
+  },
+  props: {
+    account: {
+      type: Object,
+      default: () => ({})
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      showDialog: false,
+      currentOTPCode: '',
+      loading: false,
+      secondsRemaining: OTP_PERIOD,
+      countdownTimer: null
+    }
+  },
+  computed: {
+    ...mapGetters({
+      publicSettings: 'publicSettings'
+    })
+  },
+  mounted() {
+    this.showDialog = this.visible
+    if (!this.publicSettings.SECURITY_ACCOUNT_SECRET_READ) {
+      this.$message.warning(this.$tc('AccountSecretReadDisabled'))
+      this.$emit('update:visible', false)
+      return
+    }
+    this.syncCountdown()
+    this.startCountdown()
+    this.loadCurrentOTPCode({ disableFlashErrorMsg: true })
+  },
+  beforeDestroy() {
+    if (this.countdownTimer) {
+      clearInterval(this.countdownTimer)
+      this.countdownTimer = null
+    }
+  },
+  methods: {
+    syncCountdown() {
+      const timestamp = Math.floor(Date.now() / 1000)
+      const mod = timestamp % OTP_PERIOD
+      this.secondsRemaining = mod === 0 ? OTP_PERIOD : OTP_PERIOD - mod
+    },
+    startCountdown() {
+      if (this.countdownTimer) {
+        clearInterval(this.countdownTimer)
+      }
+      this.countdownTimer = setInterval(() => {
+        const previous = this.secondsRemaining
+        this.syncCountdown()
+        if (this.secondsRemaining === OTP_PERIOD && previous !== OTP_PERIOD) {
+          this.loadCurrentOTPCode({ disableFlashErrorMsg: true })
+        }
+      }, 1000)
+    },
+    loadCurrentOTPCode(options = {}) {
+      this.loading = true
+      return this.$axios
+        // eslint-disable-next-line spellcheck/spell-checker
+        .get(`/api/v1/accounts/account-secrets/${this.account.id}/otp-code/`, options)
+        .then(res => {
+          this.currentOTPCode = res?.otp_code || ''
+          this.syncCountdown()
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    copyCurrentOTPCode() {
+      if (!this.currentOTPCode) return
+      copy(this.currentOTPCode)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-form-item {
+  border-bottom: 1px solid #ebeef5;
+  padding: 5px 0;
+  margin-bottom: 0;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  ::v-deep .el-form-item__label {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding-right: 20px;
+    line-height: 30px;
+    word-break: keep-all;
+    overflow-wrap: break-word;
+    white-space: normal;
+  }
+
+  ::v-deep .el-form-item__content {
+    line-height: 30px;
+  }
+}
+
+.otp-panel {
+  border: 1px solid #dfe4ec;
+  border-radius: 4px;
+  background: #f5f7fa;
+  padding: 12px 16px;
+}
+
+.otp-panel__header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.otp-panel__title {
+  color: #606266;
+  font-size: 13px;
+  line-height: 1.2;
+  word-break: break-all;
+}
+
+.otp-panel__code {
+  margin: 10px 0 6px;
+  color: var(--color-info);
+  font-size: 42px;
+  line-height: 1;
+  font-weight: 600;
+  letter-spacing: 2px;
+  font-family: Monaco, Menlo, Consolas, monospace;
+  cursor: pointer;
+  user-select: none;
+}
+
+.otp-panel__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: #909399;
+  font-size: 12px;
+  line-height: 1.2;
+}
+
+.otp-panel__footer-text {
+  word-break: break-all;
+}
+
+.otp-panel__countdown {
+  color: #606266;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+</style>
diff --git a/src/components/Apps/AccountListTable/ViewSecret.vue b/src/components/Apps/AccountListTable/ViewSecret.vue
index 9fde56b95f..49fdeeae85 100644
--- a/src/components/Apps/AccountListTable/ViewSecret.vue
+++ b/src/components/Apps/AccountListTable/ViewSecret.vue
@@ -92,7 +92,7 @@ export default {
     },
     title: {
       type: String,
-      default: function () {
+      default: function() {
         return this.$tc('Detail')
       }
     },
diff --git a/src/components/Apps/AccountListTable/const.js b/src/components/Apps/AccountListTable/const.js
index 4d71a9906f..d4c7a49020 100644
--- a/src/components/Apps/AccountListTable/const.js
+++ b/src/components/Apps/AccountListTable/const.js
@@ -58,6 +58,21 @@ export const accountOtherActions = vm => {
         })
       }
     },
+    {
+      name: 'OTPCode',
+      title: vm.$t('OTPCode'),
+      has: ({ row }) => !!row.has_otp_secret_key,
+      can: vm.$hasPerm('accounts.view_accountsecret'),
+      type: 'primary',
+      order: 2,
+      callback: ({ row }) => {
+        vm.account = row
+        vm.showViewOTPCodeDialog = false
+        setTimeout(() => {
+          vm.showViewOTPCodeDialog = true
+        })
+      }
+    },
     {
       name: 'Update',
       title: vm.$t('Edit'),
diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
index ec8bd4f25a..92745a740f 100644
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -20,6 +20,11 @@
     "Details": "Details",
     "Confirm": "Confirm",
     "Ignore": "Ignore",
+    "OTPSecretKey": "OTP Secret Key",
+    "OTPSecretKeyHelpText": "Optional. If the target account also requires a one-time password, set the OTP secret key here or click Generate to create a valid one.",
+    "CurrentOTPCode": "Current OTP Code",
+    "OTPCode": "OTP Code",
+    "Authenticator": "Authenticator",
     "Please enter a reason": "Please enter a reason",
     "PleaseEnterReason": "Please enter a reason | Please enter reasons"
-}
\ No newline at end of file
+}
diff --git a/src/i18n/langs/ja.json b/src/i18n/langs/ja.json
index 2b2faa4b6c..cb3257b122 100644
--- a/src/i18n/langs/ja.json
+++ b/src/i18n/langs/ja.json
@@ -8,5 +8,10 @@
   "notParenthesis": "不能包含括号。",
   "InvalidJson": "JSON 格式错误.",
   "requiredHasUserNameMapped": "用户名属性是必需的。",
-  "Diff": ""
+  "Diff": "",
+  "OTPSecretKey": "OTP Secret Key",
+  "OTPSecretKeyHelpText": "Optional. If the target account also requires a one-time password, set the OTP secret key here or click Generate to create a valid one.",
+  "CurrentOTPCode": "Current OTP Code",
+  "OTPCode": "OTP Code",
+  "Authenticator": "Authenticator"
 }
diff --git a/src/i18n/langs/zh.json b/src/i18n/langs/zh.json
index 6d1d5ad2d8..0b1bb57db7 100644
--- a/src/i18n/langs/zh.json
+++ b/src/i18n/langs/zh.json
@@ -19,5 +19,10 @@
     "Other": "其他",
     "Details": "详情",
     "Confirm": "确认",
-    "Ignore": "忽略"
+    "Ignore": "忽略",
+    "OTPSecretKey": "OTP 密钥",
+    "OTPSecretKeyHelpText": "可选。如果目标账号登录还需要动态口令，可以填写 OTP 密钥，或者点“生成”自动生成一组可用密钥。",
+    "CurrentOTPCode": "当前 OTP 验证码",
+    "OTPCode": "OTP 验证码",
+    "Authenticator": "身份验证器"
 }
diff --git a/src/i18n/langs/zh_hant.json b/src/i18n/langs/zh_hant.json
index cd7765272c..9915995028 100644
--- a/src/i18n/langs/zh_hant.json
+++ b/src/i18n/langs/zh_hant.json
@@ -7,5 +7,10 @@
     "notAlphanumericUnderscore": "仅支持字母、数字和下划线。",
     "notParenthesis": "不能包含括号。",
     "InvalidJson": "JSON 格式错误.",
-    "requiredHasUserNameMapped": "用户名属性是必需的。"
+    "requiredHasUserNameMapped": "用户名属性是必需的。",
+    "OTPSecretKey": "OTP 密鑰",
+    "OTPSecretKeyHelpText": "可選。如果目標賬號登錄還需要動態口令，可以填寫 OTP 密鑰，或者點擊「生成」自動生成一組可用密鑰。",
+    "CurrentOTPCode": "當前 OTP 驗證碼",
+    "OTPCode": "OTP 驗證碼",
+    "Authenticator": "身份驗證器"
 }
diff --git a/src/views/accounts/Account/AccountDetail/Detail.vue b/src/views/accounts/Account/AccountDetail/Detail.vue
index 06161ac4b1..e8059ef744 100644
--- a/src/views/accounts/Account/AccountDetail/Detail.vue
+++ b/src/views/accounts/Account/AccountDetail/Detail.vue
@@ -15,6 +15,11 @@
           :url="secretUrl"
           :visible.sync="showViewSecretDialog"
         />
+        <ViewOTPCode
+          v-if="showViewOTPCodeDialog"
+          :account="object"
+          :visible.sync="showViewOTPCodeDialog"
+        />
         <AutomationParamsForm
           :has-button="false"
           :method="pushAccountMethod"
@@ -39,6 +44,7 @@
 import AutoDetailCard from '@/components/Cards/DetailCard/auto.vue'
 import QuickActions from '@/components/Common/QuickActions/index.vue'
 import ViewSecret from '@/components/Apps/AccountListTable/ViewSecret.vue'
+import ViewOTPCode from '@/components/Apps/AccountListTable/ViewOTPCode.vue'
 import { openTaskPage } from '@/utils/jms/index'
 import AutomationParamsForm from '@/views/assets/Platform/AutomationParamsSetting.vue'
 import AssetDetail from '@/views/assets/Asset/AssetDetail'
@@ -52,7 +58,8 @@ export default {
     QuickActions,
     AssetDetail,
     AutomationParamsForm,
-    ViewSecret
+    ViewSecret,
+    ViewOTPCode
   },
   props: {
     object: {
@@ -68,8 +75,8 @@ export default {
       drawerRefName: null,
       needSetAutoPushParams: false,
       autoPushVisible: false,
-      secretUrl: `/api/v1/accounts/account-secrets/${this.object.id}/`,
       showViewSecretDialog: false,
+      showViewOTPCodeDialog: false,
       quickActions: [
         {
           title: this.$t('Active'),
@@ -175,6 +182,24 @@ export default {
             }
           })
         },
+        {
+          name: 'OTPCode',
+          title: this.$t('OTPCode'),
+          has: false,
+          attrs: {
+            type: 'primary',
+            label: this.$t('View'),
+            disabled: !vm.$hasPerm('accounts.view_accountsecret')
+          },
+          callbacks: Object.freeze({
+            click: () => {
+              vm.showViewOTPCodeDialog = false
+              setTimeout(() => {
+                vm.showViewOTPCodeDialog = true
+              })
+            }
+          })
+        },
         {
           title: this.$t('ClearSecret'),
           attrs: {
@@ -238,10 +263,24 @@ export default {
     }
   },
   computed: {
+    secretUrl() {
+      return this.object?.id ? `/api/v1/accounts/account-secrets/${this.object.id}/` : ''
+    },
     pushAccountMethod() {
       return this.object.asset?.auto_config?.push_account_method || ''
     }
   },
+  watch: {
+    'object.has_otp_secret_key': {
+      handler(val) {
+        const action = this.quickActions.find(item => item.name === 'OTPCode')
+        if (action) {
+          this.$set(action, 'has', !!val)
+        }
+      },
+      immediate: true
+    }
+  },
   methods: {
     onCanSetting(item) {
       this.needSetAutoPushParams = item
diff --git a/src/views/accounts/AccountTemplate/Detail/Account.vue b/src/views/accounts/AccountTemplate/Detail/Account.vue
index 43ae1328f2..c903b6faa5 100644
--- a/src/views/accounts/AccountTemplate/Detail/Account.vue
+++ b/src/views/accounts/AccountTemplate/Detail/Account.vue
@@ -22,6 +22,11 @@
       :url="secretUrl"
       :visible.sync="showViewSecretDialog"
     />
+    <ViewOTPCode
+      v-if="showViewOTPCodeDialog"
+      :account="account"
+      :visible.sync="showViewOTPCodeDialog"
+    />
   </div>
 </template>
 
@@ -33,12 +38,14 @@ import { ActionsFormatter, DetailFormatter } from '@/components/Table/TableForma
 
 import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 import ViewSecret from '@/components/Apps/AccountListTable/ViewSecret'
+import ViewOTPCode from '@/components/Apps/AccountListTable/ViewOTPCode'
 
 export default {
   name: 'AccountTemplateChangeSecret',
   components: {
     TwoCol,
     ViewSecret,
+    ViewOTPCode,
     QuickActions,
     GenericListTable
   },
@@ -54,8 +61,10 @@ export default {
     return {
       detailDrawer: () => import('@/views/accounts/AccountDiscover/TaskDetail/index.vue'),
       visible: false,
+      account: {},
       secretUrl: '',
       showViewSecretDialog: false,
+      showViewOTPCodeDialog: false,
       quickActions: [
         {
           title: this.$t('SyncUpdateAccountInfo'),
@@ -118,6 +127,20 @@ export default {
               hasClone: false,
               moreActionsTitle: this.$t('More'),
               extraActions: [
+                {
+                  name: 'OTPCode',
+                  title: this.$t('OTPCode'),
+                  has: ({ row }) => !!row.has_otp_secret_key,
+                  can: this.$hasPerm('accounts.view_accountsecret'),
+                  type: 'primary',
+                  callback: ({ row }) => {
+                    vm.account = row
+                    vm.showViewOTPCodeDialog = false
+                    setTimeout(() => {
+                      vm.showViewOTPCodeDialog = true
+                    })
+                  }
+                },
                 {
                   name: 'View',
                   title: this.$t('View'),