feat(X-Pack): Add OAuth2 authentication mechanism

Author: fit2cloud-chenyw

frontend/auto-imports.d.ts

@@ -7,7 +7,13 @@
 export {}
 declare global {
   const ElButton: typeof import('element-plus-secondary/es')['ElButton']
+  const ElCheckbox: typeof import('element-plus-secondary/es')['ElCheckbox']
+  const ElDatePicker: typeof import('element-plus-secondary/es')['ElDatePicker']
+  const ElInput: typeof import('element-plus-secondary/es')['ElInput']
   const ElMessage: typeof import('element-plus-secondary/es')['ElMessage']
   const ElMessageBox: typeof import('element-plus-secondary/es')['ElMessageBox']
+  const ElRadio: typeof import('element-plus-secondary/es')['ElRadio']
+  const ElRadioGroup: typeof import('element-plus-secondary/es')['ElRadioGroup']
+  const ElSelect: typeof import('element-plus-secondary/es')['ElSelect']
   const LicenseGenerator: any
 }

frontend/src/i18n/en.json

@@ -704,7 +704,17 @@
     "field_mapping": "User Attribute Mapping",
     "field_mapping_placeholder": "Example: {'{'}\"account\": \"saml2Account\", \"name\": \"saml2Name\", \"email\": \"email\"{'}'}",
     "incorrect_please_re_enter": "Incorrect format, please re-enter",
-    "in_json_format": "Please enter JSON format"
+    "in_json_format": "Please enter JSON format",
+    "authorize_url": "Authorization URL",
+    "client_id": "Client ID",
+    "client_secret": "Client Secret",
+    "redirect_url": "Redirect URL",
+    "oauth2_settings": "OAuth2 Settings",
+    "scope": "Scope",
+    "userinfo_url": "User Info URL",
+    "token_url": "Token URL",
+    "revoke_url": "Revocation URL",
+    "oauth2_field_mapping_placeholder": "Example: {'{'}\"account\": \"OAuth2Account\", \"name\": \"OAuth2Name\", \"email\": \"email\"{'}'}"
   },
   "login": {
     "default_login": "Default",

frontend/src/i18n/ko-KR.json

@@ -704,7 +704,17 @@
     "field_mapping": "사용자 속성 매핑",
     "field_mapping_placeholder": "예: {'{'}\"account\": \"saml2Account\", \"name\": \"saml2Name\", \"email\": \"email\"{'}'}",
     "incorrect_please_re_enter": "형식이 잘못되었습니다. 다시 입력해 주세요",
-    "in_json_format": "JSON 형식으로 입력해 주세요"
+    "in_json_format": "JSON 형식으로 입력해 주세요",
+    "authorize_url": "인증 URL",
+    "client_id": "클라이언트 ID",
+    "client_secret": "클라이언트 시크릿",
+    "redirect_url": "리디렉션 URL",
+    "oauth2_settings": "OAuth2 설정",
+    "scope": "권한 범위",
+    "userinfo_url": "사용자 정보 URL",
+    "token_url": "토큰 URL",
+    "revoke_url": "취소 URL",
+    "oauth2_field_mapping_placeholder": "예: {'{'}\"account\": \"OAuth2Account\", \"name\": \"OAuth2Name\", \"email\": \"email\"{'}'}"
   },
   "login": {
     "default_login": "기본값",

frontend/src/i18n/zh-CN.json

@@ -704,7 +704,17 @@
     "field_mapping": "用户属性映射",
     "field_mapping_placeholder": "例如：{'{'}\"account\": \"saml2Account\", \"name\": \"saml2Name\", \"email\": \"email\"{'}'}",
     "incorrect_please_re_enter": "格式错误，请重新填写",
-    "in_json_format": "请输入json格式"
+    "in_json_format": "请输入json格式",
+    "authorize_url": "授权地址",
+    "client_id": "客户端 ID",
+    "client_secret": "客户端密钥",
+    "redirect_url": "回调地址",
+    "oauth2_settings": "OAuth2 设置",
+    "scope": "授权范围",
+    "userinfo_url": "用户信息地址",
+    "token_url": "令牌地址",
+    "revoke_url": "撤销地址",
+    "oauth2_field_mapping_placeholder": "例如：{'{'}\"account\": \"oauth2Account\", \"name\": \"oauth2Name\", \"email\": \"email\"{'}'}"
   },
   "login": {
     "default_login": "默认",

frontend/src/utils/utils.ts

@@ -213,6 +213,11 @@ export const getQueryString = (name: string) => {
   return null
 }
 
+export const getUrlParams = () => {
+  const urlParams = new URLSearchParams(window.location.search) as any
+  return Object.fromEntries(urlParams)
+}
+
 export const isLarkPlatform = () => {
   return !!getQueryString('state') && !!getQueryString('code')
 }

frontend/src/views/login/xpack/Handler.vue

@@ -20,8 +20,8 @@
         :ldap="loginCategory.ldap"
         @status-change="qrStatusChange"
       />
-      <Oidc v-if="loginCategory.oidc" @switch-category="switcherCategory" />
-      <Oauth2 v-if="loginCategory.oauth2" ref="oauth2Handler" @switch-category="switcherCategory" /> -->
+      <Oidc v-if="loginCategory.oidc" @switch-category="switcherCategory" /> -->
+      <Oauth2 v-if="loginCategory.oauth2" ref="oauth2Handler" @switch-category="switcherCategory" />
       <Cas v-if="loginCategory.cas" @switch-category="switcherCategory" />
       <!-- <Saml2 v-if="loginCategory.saml2" ref="saml2Handler" @switch-category="switcherCategory" /> -->
     </div>
@@ -38,13 +38,14 @@ import Oidc from './Oidc.vue'
 import Oauth2 from './Oauth2.vue'
 import Saml2 from './Saml2.vue' */
 import Cas from './Cas.vue'
+import Oauth2 from './Oauth2.vue'
 // import QrTab from './QrTab.vue'
 import { request } from '@/utils/request'
 import { useCache } from '@/utils/useCache'
 
 import router from '@/router'
 import { useUserStore } from '@/stores/user.ts'
-import { getQueryString, isPlatformClient } from '@/utils/utils'
+import { getQueryString, getUrlParams, isPlatformClient } from '@/utils/utils'
 import { loadClient, type LoginCategory } from './PlatformClient'
 // import MfaStep from './MfaStep.vue'
 // import { logoutHandler } from '@/utils/logout'
@@ -150,7 +151,10 @@ const switcherCategory = (param: Categoryparam) => {
   }
   const nextPage = curOrigin + pathname + proxy + curLocation
   if (category === 'oauth2') {
-    oauth2Handler?.value?.toLoginPage()
+    request.get('/system/authentication/login/4').then((res: any) => {
+      window.location.href = res
+      window.open(res, '_self')
+    })
     return
   }
   if (category === 'saml2') {
@@ -176,9 +180,12 @@ const getCurLocation = () => {
 }
 
 const casLogin = () => {
+  const urlParams = getUrlParams()
   const ticket = getQueryString('ticket')
+  /* request
+    .get('/system/authentication/sso/cas?ticket=' + ticket) */
   request
-    .get('/system/authentication/sso/cas?ticket=' + ticket)
+    .post('/system/authentication/sso/1', urlParams)
     .then((res: any) => {
       const token = res.access_token
       if (token && isPlatformClient()) {
@@ -207,6 +214,39 @@ const casLogin = () => {
       }, 1500)
     })
 }
+const oauth2Login = () => {
+  const urlParams = getUrlParams()
+  request
+    .post('/system/authentication/sso/4', urlParams)
+    .then((res: any) => {
+      const token = res.access_token
+      const id_token = res.id_token
+      if (token && isPlatformClient()) {
+        wsCache.set('de-platform-client', true)
+      }
+      userStore.setToken(token)
+      userStore.setExp(res.exp)
+      userStore.setTime(Date.now())
+      userStore.setPlatformInfo({
+        flag: 'oauth2',
+        data: id_token,
+        origin: 4,
+      })
+      const queryRedirectPath = getCurLocation()
+      router.push({ path: queryRedirectPath })
+    })
+    .catch((e: any) => {
+      userStore.setToken('')
+      setTimeout(() => {
+        // logoutHandler(true, true)
+        platformLoginMsg.value = e?.message || e
+        setTimeout(() => {
+          window.location.href =
+            window.location.origin + window.location.pathname + window.location.hash
+        }, 2000)
+      }, 1500)
+    })
+}
 /* const platformLogin = (origin: number) => {
   const url = '/system/authentication/sso/cas'
   request
@@ -384,6 +424,8 @@ onMounted(() => {
     if (state?.includes('cas') && getQueryString('ticket')) {
       // platformLogin(1)
       casLogin()
+    } else if (state?.includes('oauth2')) {
+      oauth2Login()
     } else {
       updateLoading(false)
     }

frontend/src/views/login/xpack/Oauth2.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="item CAS" @click="execute">
+    <el-icon>
+      <Icon name="logo_oauth"><logo_oauth class="svg-icon" /></Icon>
+    </el-icon>
+    <span class="name"> OAuth2 </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import logo_oauth from '@/assets/svg/logo_oauth.svg'
+import { Icon } from '@/components/icon-custom'
+const emits = defineEmits(['switch-category'])
+const execute = () => {
+  emits('switch-category', { category: 'oauth2', proxy: '/#' })
+}
+</script>
+<style lang="less" scoped>
+.item {
+  width: 32px;
+  cursor: pointer;
+
+  &.qrcode,
+  &.account {
+    .ed-icon {
+      padding: 5px;
+    }
+  }
+
+  .ed-icon {
+    font-size: 32px;
+    border: 1px solid #dee0e3;
+    border-radius: 50%;
+  }
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .name {
+    margin-top: 8px;
+    color: #000;
+    text-align: center;
+    font-family: var(--de-custom_font, 'PingFang');
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 166.667% */
+    display: none;
+  }
+}
+</style>