feat: 添加钉钉扫码登录功能

- 后端：钉钉 OAuth 认证服务 - 后端：系统设置 API（钉钉配置） - 前端：登录页钉钉扫码入口 - 前端：系统设置页面 - 数据库迁移脚本
2026-01-29 14:40:00 +08:00
parent c5d460b413
commit 662947cd06
16 changed files with 1417 additions and 9 deletions
--- a/frontend/src/api/auth/index.ts
+++ b/frontend/src/api/auth/index.ts
@@ -102,3 +102,34 @@ export const getCurrentUser = (): Promise<ApiResponse<UserInfo>> => {
 export const resetPasswordRequest = (email: string): Promise<ApiResponse<null>> => {
  return request.post('/api/v1/auth/reset-password', { email })
 }
+
+// ============================================
+// 钉钉免密登录 API
+// ============================================
+
+// 钉钉登录请求参数
+export interface DingtalkLoginParams {
+  code: string
+  tenant_id?: number
+}
+
+// 钉钉配置响应
+export interface DingtalkConfig {
+  enabled: boolean
+  corp_id: string | null
+  agent_id: string | null
+}
+
+/**
+ * 钉钉免密登录
+ */
+export const dingtalkLogin = (data: DingtalkLoginParams): Promise<ApiResponse<LoginResult>> => {
+  return request.post('/api/v1/auth/dingtalk/login', data)
+}
+
+/**
+ * 获取钉钉配置（用于前端初始化JSDK）
+ */
+export const getDingtalkConfig = (tenantId: number = 1): Promise<ApiResponse<DingtalkConfig>> => {
+  return request.get('/api/v1/auth/dingtalk/config', { params: { tenant_id: tenantId } })
+}
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -245,6 +245,12 @@ const routes: RouteRecordRaw[] = [
        name: 'AdminLogs',
        component: () => import('@/views/admin/logs.vue'),
        meta: { title: '系统日志', icon: 'Files' }
+      },
+      {
+        path: 'settings',
+        name: 'SystemSettings',
+        component: () => import('@/views/admin/system-settings.vue'),
+        meta: { title: '系统设置', icon: 'Setting' }
      }
    ]
  },
--- a/frontend/src/utils/dingtalk.ts
+++ b/frontend/src/utils/dingtalk.ts
@@ -0,0 +1,190 @@
+/**
+ * 钉钉SDK工具类
+ * 
+ * 提供钉钉环境检测、免登授权码获取等功能
+ */
+
+// 钉钉JSAPI类型声明
+declare global {
+  interface Window {
+    dd?: {
+      env: {
+        platform: 'notInDingTalk' | 'android' | 'ios' | 'pc'
+      }
+      ready: (callback: () => void) => void
+      error: (callback: (err: any) => void) => void
+      runtime: {
+        permission: {
+          requestAuthCode: (options: {
+            corpId: string
+            onSuccess: (result: { code: string }) => void
+            onFail: (err: any) => void
+          }) => void
+        }
+      }
+      biz: {
+        navigation: {
+          setTitle: (options: { title: string }) => void
+        }
+      }
+    }
+  }
+}
+
+/**
+ * 钉钉配置接口
+ */
+export interface DingtalkConfig {
+  enabled: boolean
+  corp_id: string | null
+  agent_id: string | null
+}
+
+/**
+ * 检测是否在钉钉环境中
+ */
+export function isDingtalkEnv(): boolean {
+  if (typeof window === 'undefined') return false
+  if (!window.dd) return false
+  return window.dd.env.platform !== 'notInDingTalk'
+}
+
+/**
+ * 获取钉钉平台类型
+ */
+export function getDingtalkPlatform(): string {
+  if (!window.dd) return 'notInDingTalk'
+  return window.dd.env.platform
+}
+
+/**
+ * 等待钉钉SDK就绪
+ */
+export function waitDingtalkReady(): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (!window.dd) {
+      reject(new Error('钉钉SDK未加载'))
+      return
+    }
+    
+    window.dd.ready(() => {
+      resolve()
+    })
+    
+    window.dd.error((err) => {
+      reject(err)
+    })
+  })
+}
+
+/**
+ * 获取钉钉免登授权码
+ * 
+ * @param corpId 企业CorpId
+ * @returns 免登授权码
+ */
+export function getAuthCode(corpId: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    if (!window.dd) {
+      reject(new Error('钉钉SDK未加载'))
+      return
+    }
+    
+    if (!isDingtalkEnv()) {
+      reject(new Error('当前不在钉钉环境中'))
+      return
+    }
+    
+    window.dd.runtime.permission.requestAuthCode({
+      corpId: corpId,
+      onSuccess: (result) => {
+        resolve(result.code)
+      },
+      onFail: (err) => {
+        console.error('获取钉钉授权码失败:', err)
+        reject(new Error(err.message || '获取授权码失败'))
+      }
+    })
+  })
+}
+
+/**
+ * 设置钉钉页面标题
+ */
+export function setDingtalkTitle(title: string): void {
+  if (!window.dd || !isDingtalkEnv()) return
+  
+  try {
+    window.dd.biz.navigation.setTitle({ title })
+  } catch (e) {
+    console.warn('设置钉钉标题失败:', e)
+  }
+}
+
+/**
+ * 加载钉钉JSAPI SDK
+ * 
+ * 动态加载钉钉SDK脚本
+ */
+export function loadDingtalkSDK(): Promise<void> {
+  return new Promise((resolve, reject) => {
+    // 如果已经加载过，直接返回
+    if (window.dd) {
+      resolve()
+      return
+    }
+    
+    const script = document.createElement('script')
+    script.src = 'https://g.alicdn.com/dingding/dingtalk-jsapi/3.0.12/dingtalk.open.js'
+    script.async = true
+    
+    script.onload = () => {
+      console.log('钉钉SDK加载成功')
+      resolve()
+    }
+    
+    script.onerror = () => {
+      reject(new Error('钉钉SDK加载失败'))
+    }
+    
+    document.head.appendChild(script)
+  })
+}
+
+/**
+ * 钉钉免密登录完整流程
+ * 
+ * @param corpId 企业CorpId
+ * @param loginApi 登录API函数
+ * @returns 登录结果
+ */
+export async function dingtalkAutoLogin(
+  corpId: string,
+  loginApi: (code: string) => Promise<any>
+): Promise<any> {
+  // 1. 检测钉钉环境
+  if (!isDingtalkEnv()) {
+    throw new Error('当前不在钉钉环境中，无法使用免密登录')
+  }
+  
+  // 2. 等待SDK就绪
+  await waitDingtalkReady()
+  
+  // 3. 获取授权码
+  const code = await getAuthCode(corpId)
+  
+  // 4. 调用登录API
+  const result = await loginApi(code)
+  
+  return result
+}
+
+export default {
+  isDingtalkEnv,
+  getDingtalkPlatform,
+  waitDingtalkReady,
+  getAuthCode,
+  setDingtalkTitle,
+  loadDingtalkSDK,
+  dingtalkAutoLogin
+}
--- a/frontend/src/views/admin/system-settings.vue
+++ b/frontend/src/views/admin/system-settings.vue
@@ -0,0 +1,251 @@
+<template>
+  <div class="system-settings-container">
+    <el-card shadow="hover" class="settings-card">
+      <template #header>
+        <div class="card-header">
+          <span>系统设置</span>
+        </div>
+      </template>
+
+      <el-tabs v-model="activeTab" type="border-card">
+        <!-- 钉钉配置 -->
+        <el-tab-pane label="钉钉免密登录" name="dingtalk">
+          <div class="tab-content">
+            <el-alert
+              title="钉钉免密登录配置说明"
+              type="info"
+              :closable="false"
+              show-icon
+              style="margin-bottom: 20px;"
+            >
+              <template #default>
+                <p>配置后，员工可以通过钉钉客户端直接登录系统，无需输入用户名密码。</p>
+                <p style="margin-top: 8px;">
+                  <a href="https://open-dev.dingtalk.com" target="_blank" class="link">
+                    前往钉钉开放平台获取配置 →
+                  </a>
+                </p>
+              </template>
+            </el-alert>
+
+            <el-form 
+              ref="dingtalkFormRef" 
+              :model="dingtalkForm" 
+              :rules="dingtalkRules" 
+              label-width="140px"
+              v-loading="loading"
+            >
+              <el-form-item label="启用钉钉登录">
+                <el-switch 
+                  v-model="dingtalkForm.enabled" 
+                  active-text="已启用"
+                  inactive-text="已禁用"
+                />
+              </el-form-item>
+
+              <el-divider content-position="left">钉钉应用配置</el-divider>
+
+              <el-form-item label="AppKey" prop="app_key">
+                <el-input 
+                  v-model="dingtalkForm.app_key" 
+                  placeholder="请输入钉钉应用的AppKey"
+                  style="width: 400px;"
+                />
+              </el-form-item>
+
+              <el-form-item label="AppSecret" prop="app_secret">
+                <el-input 
+                  v-model="dingtalkForm.app_secret" 
+                  type="password"
+                  show-password
+                  :placeholder="dingtalkForm.app_secret_masked || '请输入钉钉应用的AppSecret'"
+                  style="width: 400px;"
+                />
+                <span class="form-tip" v-if="dingtalkForm.app_secret_masked && !dingtalkForm.app_secret">
+                  当前值: {{ dingtalkForm.app_secret_masked }}（如需修改请重新输入）
+                </span>
+              </el-form-item>
+
+              <el-form-item label="AgentId" prop="agent_id">
+                <el-input 
+                  v-model="dingtalkForm.agent_id" 
+                  placeholder="请输入钉钉应用的AgentId"
+                  style="width: 400px;"
+                />
+              </el-form-item>
+
+              <el-form-item label="CorpId" prop="corp_id">
+                <el-input 
+                  v-model="dingtalkForm.corp_id" 
+                  placeholder="请输入钉钉企业的CorpId"
+                  style="width: 400px;"
+                />
+              </el-form-item>
+
+              <el-form-item>
+                <el-button type="primary" @click="saveDingtalkConfig" :loading="saving">
+                  保存配置
+                </el-button>
+                <el-button @click="loadDingtalkConfig">重置</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-tab-pane>
+
+        <!-- 其他设置（预留） -->
+        <el-tab-pane label="其他设置" name="other" disabled>
+          <div class="tab-content">
+            <el-empty description="暂无其他设置项" />
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { request } from '@/api/request'
+
+const activeTab = ref('dingtalk')
+const loading = ref(false)
+const saving = ref(false)
+const dingtalkFormRef = ref<FormInstance>()
+
+// 钉钉配置表单
+const dingtalkForm = reactive({
+  enabled: false,
+  app_key: '',
+  app_secret: '',
+  app_secret_masked: '',  // 用于显示脱敏后的值
+  agent_id: '',
+  corp_id: '',
+})
+
+// 表单验证规则
+const dingtalkRules = reactive<FormRules>({
+  app_key: [
+    { required: false, message: '请输入AppKey', trigger: 'blur' }
+  ],
+  agent_id: [
+    { required: false, message: '请输入AgentId', trigger: 'blur' }
+  ],
+  corp_id: [
+    { required: false, message: '请输入CorpId', trigger: 'blur' }
+  ]
+})
+
+/**
+ * 加载钉钉配置
+ */
+const loadDingtalkConfig = async () => {
+  loading.value = true
+  try {
+    const response = await request.get('/api/v1/settings/dingtalk')
+    if (response.code === 200 && response.data) {
+      dingtalkForm.enabled = response.data.enabled || false
+      dingtalkForm.app_key = response.data.app_key || ''
+      dingtalkForm.app_secret = ''  // 不回显密钥
+      dingtalkForm.app_secret_masked = response.data.app_secret_masked || ''
+      dingtalkForm.agent_id = response.data.agent_id || ''
+      dingtalkForm.corp_id = response.data.corp_id || ''
+    }
+  } catch (error: any) {
+    console.error('加载钉钉配置失败:', error)
+    ElMessage.error('加载配置失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+/**
+ * 保存钉钉配置
+ */
+const saveDingtalkConfig = async () => {
+  if (!dingtalkFormRef.value) return
+  
+  await dingtalkFormRef.value.validate(async (valid) => {
+    if (valid) {
+      saving.value = true
+      try {
+        // 构建更新数据，只发送有值的字段
+        const updateData: any = {
+          enabled: dingtalkForm.enabled,
+        }
+        
+        if (dingtalkForm.app_key) {
+          updateData.app_key = dingtalkForm.app_key
+        }
+        if (dingtalkForm.app_secret) {
+          updateData.app_secret = dingtalkForm.app_secret
+        }
+        if (dingtalkForm.agent_id) {
+          updateData.agent_id = dingtalkForm.agent_id
+        }
+        if (dingtalkForm.corp_id) {
+          updateData.corp_id = dingtalkForm.corp_id
+        }
+        
+        const response = await request.put('/api/v1/settings/dingtalk', updateData)
+        if (response.code === 200) {
+          ElMessage.success('配置保存成功')
+          // 重新加载配置
+          await loadDingtalkConfig()
+        } else {
+          ElMessage.error(response.message || '保存失败')
+        }
+      } catch (error: any) {
+        console.error('保存钉钉配置失败:', error)
+        ElMessage.error('保存配置失败')
+      } finally {
+        saving.value = false
+      }
+    }
+  })
+}
+
+// 页面加载时获取配置
+onMounted(() => {
+  loadDingtalkConfig()
+})
+</script>
+
+<style lang="scss" scoped>
+.system-settings-container {
+  padding: 20px;
+
+  .settings-card {
+    .card-header {
+      font-size: 18px;
+      font-weight: 600;
+    }
+  }
+
+  .tab-content {
+    padding: 20px;
+    min-height: 400px;
+  }
+
+  .form-tip {
+    font-size: 12px;
+    color: #909399;
+    margin-left: 12px;
+  }
+
+  .link {
+    color: #409eff;
+    text-decoration: none;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  :deep(.el-divider__text) {
+    font-size: 14px;
+    color: #606266;
+  }
+}
+</style>
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -67,20 +67,34 @@
          </el-button>
        </el-form-item>

-        <div class="other-login">
+        <div class="other-login" v-if="dingtalkConfig.enabled || !isDingtalk">
          <el-divider>其他登录方式</el-divider>
          <div class="social-icons">
+            <!-- 钉钉登录按钮（仅在启用且非钉钉环境时显示） -->
+            <div 
+              v-if="dingtalkConfig.enabled && !isDingtalk" 
+              class="social-icon dingtalk-icon" 
+              @click="handleDingtalkLogin"
+              title="钉钉登录"
+            >
+              <svg viewBox="0 0 1024 1024" width="22" height="22">
+                <path d="M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229.2 512-512S794.8 0 512 0z m259.3 568.7l-197.8 3.3-59.4 143.1c-3.6 8.6-15.7 7.5-17.9-1.6l-45.2-188.5-241.9-69c-10.8-3.1-10.6-18.4 0.3-21.2l492.3-126c11.3-2.9 21.4 7.6 18 18.7l-77.4 252.3c-2.7 8.8-15.1 10.1-19.7 2.1l-51.3-90.8-90.8 51.3c-8 4.5-17.6-2-15.9-10.8l34.8-188.4-213.7 54.7 213.7 61.1 19.2 80.1 32.6-78.8 240.1-4z" fill="#3296FA"/>
+              </svg>
+            </div>
            <div class="social-icon" @click="socialLogin('wechat')">
              <el-icon :size="20"><ChatDotRound /></el-icon>
            </div>
            <div class="social-icon" @click="socialLogin('qq')">
              <el-icon :size="20"><Connection /></el-icon>
            </div>
-            <div class="social-icon" @click="socialLogin('github')">
-              <el-icon :size="20"><Link /></el-icon>
-            </div>
          </div>
        </div>
+        
+        <!-- 钉钉环境中的自动登录提示 -->
+        <div v-if="isDingtalk && dingtalkLoading" class="dingtalk-loading">
+          <el-icon class="is-loading" :size="24"><Loading /></el-icon>
+          <span>正在通过钉钉自动登录...</span>
+        </div>

        <div class="register-link">
          还没有账号？
@@ -94,17 +108,29 @@
 </template>

 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
+import { Loading } from '@element-plus/icons-vue'
 import type { FormInstance, FormRules } from 'element-plus'
-import { login } from '@/api/auth'
+import { login, dingtalkLogin, getDingtalkConfig } from '@/api/auth'
+import type { DingtalkConfig } from '@/api/auth'
 import { authManager } from '@/utils/auth'
+import { isDingtalkEnv, loadDingtalkSDK, getAuthCode, waitDingtalkReady } from '@/utils/dingtalk'

 const router = useRouter()
 const formRef = ref<FormInstance>()
 const loading = ref(false)

+// 钉钉相关状态
+const isDingtalk = ref(false)
+const dingtalkLoading = ref(false)
+const dingtalkConfig = reactive<DingtalkConfig>({
+  enabled: false,
+  corp_id: null,
+  agent_id: null
+})
+
 // 登录表单
 const loginForm = reactive({
  username: '',
@@ -192,6 +218,113 @@ const socialLogin = (type: string) => {
 const goRegister = () => {
  ElMessage.info('注册功能开发中')
 }
+
+/**
+ * 钉钉登录成功处理
+ */
+const handleDingtalkLoginSuccess = (response: any) => {
+  // 保存认证信息
+  authManager.setAccessToken(response.data.token.access_token)
+  authManager.setRefreshToken(response.data.token.refresh_token)
+  
+  const userInfo = {
+    ...response.data.user,
+    created_at: response.data.user.created_at || new Date().toISOString(),
+    updated_at: response.data.user.updated_at || new Date().toISOString()
+  }
+  authManager.setCurrentUser(userInfo)
+  
+  ElMessage.success('钉钉登录成功')
+  
+  // 跳转
+  const redirect = new URLSearchParams(window.location.search).get('redirect') || authManager.getDefaultRoute()
+  router.push(redirect)
+}
+
+/**
+ * 钉钉免密登录（在钉钉环境中自动触发）
+ */
+const autoDingtalkLogin = async () => {
+  if (!dingtalkConfig.corp_id) {
+    console.warn('钉钉CorpId未配置')
+    return
+  }
+  
+  dingtalkLoading.value = true
+  
+  try {
+    // 等待钉钉SDK就绪
+    await waitDingtalkReady()
+    
+    // 获取免登授权码
+    const code = await getAuthCode(dingtalkConfig.corp_id)
+    
+    // 调用登录API
+    const response = await dingtalkLogin({ code })
+    
+    if (response.code === 200) {
+      handleDingtalkLoginSuccess(response)
+    } else {
+      ElMessage.error(response.message || '钉钉登录失败')
+    }
+  } catch (error: any) {
+    console.error('钉钉自动登录失败:', error)
+    ElMessage.warning('钉钉自动登录失败，请使用账号密码登录')
+  } finally {
+    dingtalkLoading.value = false
+  }
+}
+
+/**
+ * 手动触发钉钉登录（非钉钉环境下点击钉钉登录按钮）
+ */
+const handleDingtalkLogin = () => {
+  if (isDingtalk.value) {
+    // 在钉钉环境中，重新触发自动登录
+    autoDingtalkLogin()
+  } else {
+    // 非钉钉环境，提示用户
+    ElMessage.info('请在钉钉客户端中打开本应用以使用免密登录')
+  }
+}
+
+/**
+ * 初始化钉钉登录
+ */
+const initDingtalkLogin = async () => {
+  try {
+    // 获取钉钉配置
+    const response = await getDingtalkConfig()
+    if (response.code === 200 && response.data) {
+      dingtalkConfig.enabled = response.data.enabled
+      dingtalkConfig.corp_id = response.data.corp_id
+      dingtalkConfig.agent_id = response.data.agent_id
+    }
+    
+    // 检测钉钉环境
+    isDingtalk.value = isDingtalkEnv()
+    
+    // 如果在钉钉环境中且钉钉登录已启用，自动触发登录
+    if (isDingtalk.value && dingtalkConfig.enabled && dingtalkConfig.corp_id) {
+      autoDingtalkLogin()
+    }
+  } catch (error) {
+    console.error('初始化钉钉登录失败:', error)
+  }
+}
+
+// 页面加载时初始化
+onMounted(async () => {
+  // 尝试加载钉钉SDK
+  try {
+    await loadDingtalkSDK()
+  } catch (e) {
+    console.log('钉钉SDK加载跳过（非必须）')
+  }
+  
+  // 初始化钉钉登录
+  initDingtalkLogin()
+})
 </script>

 <style lang="scss" scoped>
@@ -326,9 +459,35 @@ const goRegister = () => {
              color: #667eea;
              transform: translateY(-2px);
            }
+            
+            &.dingtalk-icon {
+              &:hover {
+                border-color: #3296FA;
+                background-color: rgba(50, 150, 250, 0.1);
+              }
+            }
          }
        }
      }
+      
+      .dingtalk-loading {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
+        margin-top: 20px;
+        color: #666;
+        
+        .el-icon {
+          margin-bottom: 12px;
+          color: #3296FA;
+        }
+        
+        span {
+          font-size: 14px;
+        }
+      }

      .register-link {
        text-align: center;