Merge pull request #955 from 1Panel-dev/detached

feat: 支持cas和oidc认证

ui/src/api/auth-setting.ts

@@ -8,7 +8,7 @@ const prefix = '/auth'
  * 获取认证设置
  */
 const getAuthSetting: (auth_type: string, loading?: Ref<boolean>) => Promise<Result<any>> = (auth_type, loading) => {
-    return get(`${prefix}/${auth_type}/info`, undefined, loading)
+    return get(`${prefix}/${auth_type}/detail`, undefined, loading)
 }
 
 /**

ui/src/locales/lang/en_US/index.ts

@@ -31,6 +31,36 @@ export default {
             testConnectionSuccess: 'Test Connection Success',
             testConnectionFailed: 'Test Connection Failed',
             saveSuccess: 'Save Success',
-        }
-    }
+        },
+        cas: {
+            title: 'CAS Settings',
+            ldpUri: 'ldpUri',
+            ldpUriPlaceholder: 'Please enter ldpUri',
+            redirectUrl: 'Callback Address',
+            redirectUrlPlaceholder: 'Please enter Callback Address',
+            enableAuthentication: 'Enable CAS Authentication',
+            saveSuccess: 'Save Success',
+            save: 'Save',
+        },
+         oidc: {
+            title: 'OIDC Settings',
+            authEndpoint: 'Auth Endpoint',
+            authEndpointPlaceholder: 'Please enter Auth Endpoint',
+            tokenEndpoint: 'Token Endpoint',
+            tokenEndpointPlaceholder: 'Please enter Token Endpoint',
+            userInfoEndpoint: 'User Info Endpoint',
+            userInfoEndpointPlaceholder: 'Please enter User Info Endpoint',
+            clientId: 'Client ID',
+            clientIdPlaceholder: 'Please enter Client ID',
+            clientSecret: 'Client Secret',
+            clientSecretPlaceholder: 'Please enter Client Secret',
+            logoutEndpoint: 'Logout Endpoint',
+            logoutEndpointPlaceholder: 'Please enter Logout Endpoint',
+            redirectUrl: 'Redirect URL',
+            redirectUrlPlaceholder: 'Please enter Redirect URL',
+            enableAuthentication: 'Enable OIDC Authentication',
+        },
+        jump_tip: 'Jumping to the authentication source page for authentication',
+        jump: 'Jump',
+    },
 };

ui/src/locales/lang/zh_CN/index.ts

@@ -12,25 +12,55 @@ export default {
     login: {
         authentication: '登录认证',
         ldap: {
-            title: 'LDAP设置',
-            address: 'LDAP地址',
-            serverPlaceholder: '请输入LDAP地址',
+            title: 'LDAP 设置',
+            address: 'LDAP 地址',
+            serverPlaceholder: '请输入LDAP 地址',
             bindDN: '绑定DN',
-            bindDNPlaceholder: '请输入绑定DN',
+            bindDNPlaceholder: '请输入绑定 DN',
             password: '密码',
             passwordPlaceholder: '请输入密码',
             ou: '用户OU',
-            ouPlaceholder: '请输入用户OU',
+            ouPlaceholder: '请输入用户 OU',
             ldap_filter: '用户过滤器',
             ldap_filterPlaceholder: '请输入用户过滤器',
-            ldap_mapping: 'LDAP属性映射',
-            ldap_mappingPlaceholder: '请输入LDAP属性映射',
+            ldap_mapping: 'LDAP 属性映射',
+            ldap_mappingPlaceholder: '请输入 LDAP 属性映射',
             test: '测试连接',
-            enableAuthentication: '启用LDAP认证',
+            enableAuthentication: '启用 LDAP 认证',
             save: '保存',
             testConnectionSuccess: '测试连接成功',
             testConnectionFailed: '测试连接失败',
             saveSuccess: '保存成功',
-        }
-    }
+        },
+        cas: {
+            title: 'CAS 设置',
+            ldpUri: 'ldpUri',
+            ldpUriPlaceholder: '请输入ldpUri',
+            redirectUrl: '回调地址',
+            redirectUrlPlaceholder: '请输入回调地址',
+            enableAuthentication: '启用CAS认证',
+            saveSuccess: '保存成功',
+            save: '保存',
+        },
+        oidc: {
+            title: 'OIDC 设置',
+            authEndpoint: '授权端地址',
+            authEndpointPlaceholder: '请输入授权端地址',
+            tokenEndpoint: 'Token端地址',
+            tokenEndpointPlaceholder: '请输入Token端地址',
+            userInfoEndpoint: '用户信息端地址',
+            userInfoEndpointPlaceholder: '请输入用户信息端地址',
+            clientId: '客户端ID',
+            clientIdPlaceholder: '请输入客户端ID',
+            clientSecret: '客户端密钥',
+            clientSecretPlaceholder: '请输入客户端密钥',
+            logoutEndpoint: '注销端地址',
+            logoutEndpointPlaceholder: '请输入注销端地址',
+            redirectUrl: '回调地址',
+            redirectUrlPlaceholder: '请输入回调地址',
+            enableAuthentication: '启用OIDC认证',
+        },
+        jump_tip: '即将跳转至认证源页面进行认证',
+        jump: '跳转',
+    },
 };

ui/src/router/index.ts

@@ -25,6 +25,9 @@ router.beforeEach(
     const notAuthRouteNameList = ['register', 'login', 'forgot_password', 'reset_password', 'Chat']
 
     if (!notAuthRouteNameList.includes(to.name ? to.name.toString() : '')) {
+      if (to.query && to.query.token) {
+        localStorage.setItem('token', to.query.token.toString())
+      }
       const token = user.getToken()
       if (!token) {
         next({

ui/src/views/application/index.vue

@@ -189,8 +189,12 @@ function getList() {
 }
 
 onMounted(() => {
+  console.log(router)
   getList()
 })
+
+
+
 </script>
 <style lang="scss" scoped>
 .application-card {

ui/src/views/authentication/component/CAS.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="p-24" v-loading="loading">
+    <el-form
+        ref="authFormRef"
+        :rules="rules"
+        :model="form"
+        label-position="top"
+        require-asterisk-position="right"
+    >
+      <el-form-item :label="$t('login.cas.ldpUri')" prop="config_data.ldpUri">
+        <el-input v-model="form.config_data.ldpUri" :placeholder="$t('login.cas.ldpUriPlaceholder')"/>
+      </el-form-item>
+      <el-form-item :label="$t('login.cas.redirectUrl')" prop="config_data.redirectUrl">
+        <el-input v-model="form.config_data.redirectUrl" :placeholder="$t('login.cas.redirectUrlPlaceholder')"/>
+      </el-form-item>
+      <el-form-item>
+        <el-checkbox v-model="form.is_active">{{ $t('login.cas.enableAuthentication') }}</el-checkbox>
+      </el-form-item>
+    </el-form>
+
+    <div class="text-right">
+      <el-button @click="submit(authFormRef)" type="primary" :disabled="loading"> {{ $t('login.cas.save') }}
+      </el-button>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {reactive, ref, watch, onMounted} from 'vue'
+import authApi from '@/api/auth-setting'
+import type {FormInstance, FormRules} from 'element-plus'
+import {t} from '@/locales'
+import {MsgSuccess} from '@/utils/message'
+
+const form = ref<any>({
+  id: '',
+  auth_type: 'CAS',
+  config_data: {
+    ldpUri: '',
+    redirectUrl: '',
+  },
+  is_active: true
+})
+
+const authFormRef = ref()
+
+const loading = ref(false)
+
+const rules = reactive<FormRules<any>>({
+  'config_data.ldpUri': [{required: true, message: t('login.ldap.ldpUriPlaceholder'), trigger: 'blur'}],
+  'config_data.redirectUrl': [{
+    required: true,
+    message: t('login.ldap.redirectUrlPlaceholder'),
+    trigger: 'blur'
+  }],
+})
+
+const submit = async (formEl: FormInstance | undefined, test?: string) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      if (test) {
+        authApi.postAuthSetting(form.value, loading).then((res) => {
+          MsgSuccess(t('login.cas.testConnectionSuccess'))
+        })
+      } else {
+        authApi.putAuthSetting(form.value.auth_type, form.value, loading).then((res) => {
+          MsgSuccess(t('login.cas.saveSuccess'))
+        })
+      }
+    }
+  })
+}
+
+function getDetail() {
+  authApi.getAuthSetting(form.value.auth_type, loading).then((res: any) => {
+    if (res.data && JSON.stringify(res.data) !== '{}') {
+      form.value = res.data
+    }
+  })
+}
+
+onMounted(() => {
+  getDetail()
+})
+</script>
+<style lang="scss" scoped></style>

ui/src/views/authentication/component/OIDC.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="p-24" v-loading="loading">
+    <el-form
+        ref="authFormRef"
+        :rules="rules"
+        :model="form"
+        label-position="top"
+        require-asterisk-position="right"
+    >
+      <el-form-item :label="$t('login.oidc.authEndpoint')" prop="config_data.authEndpoint">
+        <el-input v-model="form.config_data.authEndpoint" :placeholder="$t('login.oidc.authEndpointPlaceholder')"/>
+      </el-form-item>
+      <el-form-item :label="$t('login.oidc.tokenEndpoint')" prop="config_data.tokenEndpoint">
+        <el-input v-model="form.config_data.tokenEndpoint" :placeholder="$t('login.oidc.tokenEndpointPlaceholder')"/>
+      </el-form-item>
+      <el-form-item :label="$t('login.oidc.userInfoEndpoint')" prop="config_data.userInfoEndpoint">
+        <el-input v-model="form.config_data.userInfoEndpoint"
+                  :placeholder="$t('login.oidc.userInfoEndpointPlaceholder')"/>
+      </el-form-item>
+      <el-form-item :label="$t('login.oidc.clientId')" prop="config_data.clientId">
+        <el-input v-model="form.config_data.clientId" :placeholder="$t('login.oidc.clientIdPlaceholder')"/>
+      </el-form-item>
+      <el-form-item :label="$t('login.oidc.clientSecret')" prop="config_data.clientSecret">
+        <el-input v-model="form.config_data.clientSecret" :placeholder="$t('login.oidc.clientSecretPlaceholder')"
+                  show-password/>
+      </el-form-item>
+      <el-form-item :label="$t('login.oidc.redirectUrl')" prop="config_data.redirectUrl">
+        <el-input v-model="form.config_data.redirectUrl" :placeholder="$t('login.oidc.redirectUrlPlaceholder')"/>
+      </el-form-item>
+      <el-form-item>
+        <el-checkbox v-model="form.is_active">{{ $t('login.oidc.enableAuthentication') }}</el-checkbox>
+      </el-form-item>
+    </el-form>
+
+    <div class="text-right">
+      <el-button @click="submit(authFormRef)" type="primary" :disabled="loading"> {{ $t('login.ldap.save') }}
+      </el-button>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {reactive, ref, watch, onMounted} from 'vue'
+import authApi from '@/api/auth-setting'
+import type {FormInstance, FormRules} from 'element-plus'
+import {t} from '@/locales'
+import {MsgSuccess} from '@/utils/message'
+
+const form = ref<any>({
+  id: '',
+  auth_type: 'OIDC',
+  config_data: {
+    authEndpoint: '',
+    tokenEndpoint: '',
+    userInfoEndpoint: '',
+    clientId: '',
+    clientSecret: '',
+    redirectUrl: ''
+  },
+  is_active: true
+})
+
+const authFormRef = ref()
+
+const loading = ref(false)
+
+const rules = reactive<FormRules<any>>({
+  'config_data.authEndpoint': [{required: true, message: t('login.oidc.authEndpointPlaceholder'), trigger: 'blur'}],
+  'config_data.tokenEndpoint': [{required: true, message: t('login.oidc.tokenEndpointPlaceholder'), trigger: 'blur'}],
+  'config_data.userInfoEndpoint': [{
+    required: true,
+    message: t('login.oidc.userInfoEndpointPlaceholder'),
+    trigger: 'blur'
+  }],
+  'config_data.clientId': [{required: true, message: t('login.oidc.clientIdPlaceholder'), trigger: 'blur'}],
+  'config_data.clientSecret': [{required: true, message: t('login.oidc.clientSecretPlaceholder'), trigger: 'blur'}],
+  'config_data.redirectUrl': [{required: true, message: t('login.oidc.redirectUrlPlaceholder'), trigger: 'blur'}],
+  'config_data.logoutEndpoint': [{required: true, message: t('login.oidc.logoutEndpointPlaceholder'), trigger: 'blur'}]
+})
+
+const submit = async (formEl: FormInstance | undefined, test?: string) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      if (test) {
+        authApi.postAuthSetting(form.value, loading).then((res) => {
+          MsgSuccess(t('login.ldap.testConnectionSuccess'))
+        })
+      } else {
+        authApi.putAuthSetting(form.value.auth_type, form.value, loading).then((res) => {
+          MsgSuccess(t('login.ldap.saveSuccess'))
+        })
+      }
+    }
+  })
+}
+
+function getDetail() {
+  authApi.getAuthSetting(form.value.auth_type, loading).then((res: any) => {
+    if (res.data && JSON.stringify(res.data) !== '{}') {
+      form.value = res.data
+      if (res.data.config_data.ldap_mapping) {
+        form.value.config_data.ldap_mapping = JSON.stringify(JSON.parse(res.data.config_data.ldap_mapping))
+      }
+    }
+  })
+}
+
+onMounted(() => {
+  getDetail()
+})
+</script>
+<style lang="scss" scoped></style>

ui/src/views/authentication/index.vue

@@ -20,6 +20,8 @@
 import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import LDAP from './component/LDAP.vue'
+import CAS from './component/CAS.vue'
+import OIDC from './component/OIDC.vue'
 import { t } from '@/locales'
 import useStore from '@/stores'
 
@@ -32,6 +34,16 @@ const tabList = [
     label: t('login.ldap.title'),
     name: 'LDAP',
     component: LDAP
+  },
+  {
+    label: t('login.cas.title'),
+    name: 'CAS',
+    component: CAS
+  },
+  {
+    label: t('login.oidc.title'),
+    name: 'OIDC',
+    component: OIDC
   }
 ]
 

ui/src/views/login/index.vue

@@ -3,19 +3,19 @@
     <LoginContainer :subTitle="user.themeInfo?.slogan || '欢迎使用 MaxKB 智能知识库'">
       <h2 class="mb-24">{{ loginMode || '普通登录' }}</h2>
       <el-form
-        class="login-form"
-        :rules="rules"
-        :model="loginForm"
-        ref="loginFormRef"
-        @keyup.enter="login"
+          class="login-form"
+          :rules="rules"
+          :model="loginForm"
+          ref="loginFormRef"
+          @keyup.enter="login"
       >
         <div class="mb-24">
           <el-form-item prop="username">
             <el-input
-              size="large"
-              class="input-item"
-              v-model="loginForm.username"
-              placeholder="请输入用户名"
+                size="large"
+                class="input-item"
+                v-model="loginForm.username"
+                placeholder="请输入用户名"
             >
             </el-input>
           </el-form-item>
@@ -23,12 +23,12 @@
         <div class="mb-24">
           <el-form-item prop="password">
             <el-input
-              type="password"
-              size="large"
-              class="input-item"
-              v-model="loginForm.password"
-              placeholder="请输入密码"
-              show-password
+                type="password"
+                size="large"
+                class="input-item"
+                v-model="loginForm.password"
+                placeholder="请输入密码"
+                show-password
             >
             </el-input>
           </el-form-item>
@@ -40,10 +40,10 @@
           注册
         </el-button> -->
         <el-button
-          class="forgot-password"
-          @click="router.push('/forgot_password')"
-          link
-          type="primary"
+            class="forgot-password"
+            @click="router.push('/forgot_password')"
+            link
+            type="primary"
         >
           忘记密码?
         </el-button>
@@ -55,21 +55,21 @@
       <div class="text-center mt-16">
         <template v-for="item in modeList">
           <el-button
-            v-if="item !== '' && loginMode !== item"
-            circle
-            :key="item"
-            class="login-button-circle color-secondary"
-            @click="changeMode(item)"
-            >{{ item }}
+              v-if="item !== '' && loginMode !== item"
+              circle
+              :key="item"
+              class="login-button-circle color-secondary"
+              @click="changeMode(item)"
+          >{{ item }}
           </el-button>
           <el-button
-            v-if="item === '' && loginMode !== ''"
-            circle
-            :key="item"
-            class="login-button-circle color-secondary"
-            style="font-size: 24px"
-            icon="UserFilled"
-            @click="changeMode('')"
+              v-if="item === '' && loginMode !== ''"
+              circle
+              :key="item"
+              class="login-button-circle color-secondary"
+              style="font-size: 24px"
+              icon="UserFilled"
+              @click="changeMode('')"
           />
         </template>
       </div>
@@ -77,14 +77,18 @@
   </login-layout>
 </template>
 <script setup lang="ts">
-import { onMounted, ref, onBeforeMount } from 'vue'
-import type { LoginRequest } from '@/api/type/user'
-import { useRouter } from 'vue-router'
-import type { FormInstance, FormRules } from 'element-plus'
+import {onMounted, ref, onBeforeMount} from 'vue'
+import type {LoginRequest} from '@/api/type/user'
+import {useRouter} from 'vue-router'
+import type {FormInstance, FormRules} from 'element-plus'
 import useStore from '@/stores'
+import authApi from "@/api/auth-setting";
+import {MsgConfirm, MsgSuccess} from "@/utils/message";
+import {t} from "@/locales";
+import systemKeyApi from "@/api/system-api-key";
 
 const loading = ref<boolean>(false)
-const { user } = useStore()
+const {user} = useStore()
 const router = useRouter()
 const loginForm = ref<LoginRequest>({
   username: '',
@@ -112,12 +116,53 @@ const loginFormRef = ref<FormInstance>()
 const modeList = ref<string[]>([''])
 const loginMode = ref('')
 
+function redirectAuth(authType: string) {
+  if (authType === 'LDAP' || authType === '') {
+    return;
+  }
+  authApi.getAuthSetting(authType, loading).then((res: any) => {
+    if (!res.data) {
+      return;
+    }
+    MsgConfirm(
+        `${t('login.jump_tip')}`,
+        t(''),
+        {
+          confirmButtonText: t('login.jump'),
+          cancelButtonText: t('views.applicationOverview.appInfo.APIKeyDialog.cancel'),
+          confirmButtonClass: ''
+        }
+    )
+        .then(() => {
+          if (!res.data.config_data) {
+            return;
+          }
+          const config = res.data.config_data
+          const redirectUrl = eval(`\`${config.redirectUrl}\``);
+          let url;
+          if (authType === 'CAS') {
+            url = `${config.ldpUri}?service=${encodeURIComponent(redirectUrl)}`;
+          }
+          if (authType === 'OIDC') {
+            url = `${config.authEndpoint}?client_id=${config.clientId}&redirect_uri=${redirectUrl}&response_type=code&scope=openid+profile+email`;
+          }
+          if (url) {
+            window.location.href = url;
+          }
+        })
+        .catch(() => {
+        })
+  });
+}
+
+
 function changeMode(val: string) {
-  loginMode.value = val || ''
+  loginMode.value = val === 'LDAP' ? val : '';
   loginForm.value = {
     username: '',
     password: ''
   }
+  redirectAuth(val)
   loginFormRef.value?.clearValidate()
 }
 
@@ -125,11 +170,11 @@ const login = () => {
   loginFormRef.value?.validate().then(() => {
     loading.value = true
     user
-      .login(loginMode.value, loginForm.value.username, loginForm.value.password)
-      .then(() => {
-        router.push({ name: 'home' })
-      })
-      .finally(() => (loading.value = false))
+        .login(loginMode.value, loginForm.value.username, loginForm.value.password)
+        .then(() => {
+          router.push({name: 'home'})
+        })
+        .finally(() => (loading.value = false))
   })
 }
 
@@ -138,11 +183,11 @@ onMounted(() => {
     if (user.isEnterprise()) {
       loading.value = true
       user
-        .getAuthType()
-        .then((res) => {
-          modeList.value = [...modeList.value, ...res]
-        })
-        .finally(() => (loading.value = false))
+          .getAuthType()
+          .then((res) => {
+            modeList.value = [...modeList.value, ...res]
+          })
+          .finally(() => (loading.value = false))
     }
   })
 })