feat(X-Pack): Add Larksuite Support

Author: fit2cloud-chenyw

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

@@ -445,6 +445,39 @@ const wecomLogin = () => {
       }, 1500)
     })
 }
+const larksuiteLogin = () => {
+  const urlParams = getUrlParams()
+  urlParams['redirect_uri'] = encodeURIComponent(getSQLBotAddr())
+  request
+    .post('/system/platform/sso/9', urlParams)
+    .then((res: any) => {
+      const token = res.access_token
+      // const platform_info = res.platform_info
+      if (token && isPlatformClient()) {
+        wsCache.set('sqlbot-platform-client', true)
+      }
+      userStore.setToken(token)
+      userStore.setExp(res.exp)
+      userStore.setTime(Date.now())
+      userStore.setPlatformInfo({
+        flag: 'larksuite',
+        // data: platform_info ? JSON.stringify(platform_info) : '',
+        origin: 9,
+      })
+      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 = getSQLBotAddr() + window.location.hash
+        }, 2000)
+      }, 1500)
+    })
+}
 const larkLogin = () => {
   const urlParams = getUrlParams()
   urlParams['redirect_uri'] = encodeURIComponent(getSQLBotAddr())
@@ -689,6 +722,8 @@ onMounted(() => {
       wecomLogin()
     } else if (state?.includes('dingtalk')) {
       dingtalkLogin()
+    } else if (state?.includes('larksuite')) {
+      larksuiteLogin()
     } else if (state?.includes('lark')) {
       larkLogin()
     } else {

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

@@ -0,0 +1,76 @@
+<template>
+  <div id="de2-larksuite-qr" :class="{ 'de2-larksuite-qr': !isBind }" />
+</template>
+
+<script lang="ts" setup>
+import { loadScript } from '@/utils/RemoteJs'
+import { propTypes } from '@/utils/propTypes'
+import { queryClientInfo } from './platformUtils'
+import { getSQLBotAddr } from '@/utils/utils'
+import { ref } from 'vue'
+interface LarksuiteQrInfo {
+  client_id?: string
+  state?: string
+  redirect_uri?: string
+}
+const origin = ref(9)
+const props = defineProps({
+  isBind: propTypes.bool.def(false),
+})
+const remoteJsUrl =
+  'https://lf-package-us.larksuitecdn.com/obj/lark-static-us/lark/passport/qrcode/LarkSSOSDKWebQRCode-1.0.3.js'
+const jsId = 'de-larksuite-qr-id'
+const init = () => {
+  loadScript(remoteJsUrl, jsId).then(() => {
+    queryClientInfo(origin.value).then((res) => {
+      const data: any = formatQrResult(res)
+      loadQr(data.client_id, data.state, data.redirect_uri)
+    })
+  })
+}
+
+const formatQrResult = (data: any): LarksuiteQrInfo => {
+  const result = { client_id: null, state: null, redirect_uri: null } as unknown as LarksuiteQrInfo
+  result.client_id = data.client_id
+  result.state = 'fit2cloud-larksuite-qr'
+  result.redirect_uri = data.redirect_uri || getSQLBotAddr()
+  if (props.isBind) {
+    result.state += '_de_bind'
+  }
+  return result
+}
+
+const loadQr = (CLIENT_ID: string, STATE: string, REDIRECT_URI: string) => {
+  let url = `https://passport.larksuite.com/suite/passport/oauth/authorize?client_id=${CLIENT_ID}&response_type=code&state=${STATE}&redirect_uri=${REDIRECT_URI}`
+  // eslint-disable-next-line
+  // @ts-ignore
+  const QRLoginObj = window['QRLogin']({
+    id: 'de2-larksuite-qr',
+    goto: url,
+    style: 'border:none;background-color:#FFFFFF;width: 266px;height: 266px;',
+  })
+  const handleMessage = function (event: any) {
+    const origin = event.origin
+    if (QRLoginObj.matchOrigin(origin) && QRLoginObj.matchData(event.data)) {
+      const loginTmpCode = event.data.tmp_code
+      url += '&tmp_code=' + loginTmpCode
+      window.location.href = url
+    }
+  }
+  if (typeof window.addEventListener != 'undefined') {
+    window.addEventListener('message', handleMessage, false)
+    // eslint-disable-next-line
+    // @ts-ignore
+  } else if (typeof window['attachEvent'] != 'undefined') {
+    // eslint-disable-next-line
+    // @ts-ignore
+    window['attachEvent']('onmessage', handleMessage)
+  }
+}
+init()
+</script>
+<style lang="less" scoped>
+.de2-larksuite-qr {
+  margin-top: -15px;
+}
+</style>

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

@@ -57,7 +57,7 @@ import logo_dingtalk from '@/assets/svg/logo_dingtalk.svg'
 import logo_lark from '@/assets/svg/logo_lark.svg'
 import { ref } from 'vue'
 import LarkQr from './LarkQr.vue'
-/* import LarksuiteQr from './LarksuiteQr.vue' */
+import LarksuiteQr from './LarksuiteQr.vue'
 import DingtalkQr from './DingtalkQr.vue'
 import WecomQr from './WecomQr.vue'
 import { propTypes } from '@/utils/propTypes'

frontend/src/views/system/platform/PlatformInfo.vue

@@ -142,7 +142,7 @@ const edit = () => {
   editor?.value.edit(data)
 }
 const validate = () => {
-  if (info.value?.agent_id && info.value?.corpsecret) {
+  if (info.value) {
     validateHandler()
   }
 }

frontend/src/views/system/platform/index.vue

@@ -29,7 +29,7 @@ const loadData = () => {
         item.config = JSON.parse(item.config)
         return item
       })
-      .filter((card: any) => card.type < 9)
+      .filter((card: any) => card.type < 10)
   })
 }
 onMounted(() => {