feat(X-Pack): Support Lark embedded

Author: fit2cloud-chenyw

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

@@ -449,6 +449,40 @@ const wecomLogin = () => {
       }, 1500)
     })
 }
+const larkLogin = () => {
+  const urlParams = getUrlParams()
+  urlParams['redirect_uri'] = encodeURIComponent(window.location.origin + window.location.pathname)
+  request
+    .post('/system/platform/sso/8', 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: 'lark',
+        // data: platform_info ? JSON.stringify(platform_info) : '',
+        origin: 8,
+      })
+      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 dingtalkLogin = () => {
   const urlParams = getUrlParams()
   request
@@ -661,6 +695,8 @@ onMounted(() => {
       wecomLogin()
     } else if (state?.includes('dingtalk')) {
       dingtalkLogin()
+    } else if (state?.includes('lark')) {
+      larkLogin()
     } else {
       auto2Platform()
     }

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

@@ -0,0 +1,77 @@
+<template>
+  <div id="de2-lark-qr" :class="{ 'de2-lark-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 LarkQrInfo {
+  client_id?: string
+  state?: string
+  redirect_uri?: string
+}
+
+const props = defineProps({
+  isBind: propTypes.bool.def(false),
+})
+const origin = ref(8)
+const remoteJsUrl =
+  'https://lf-package-cn.feishucdn.com/obj/feishu-static/lark/passport/qrcode/LarkSSOSDKWebQRCode-1.0.3.js'
+const jsId = 'de-lark-qr-id'
+const init = () => {
+  loadScript(remoteJsUrl, jsId).then(() => {
+    queryClientInfo(origin.value).then((res: any) => {
+      const data = formatQrResult(res) as any
+      loadQr(data.client_id, data.state, data.redirect_uri)
+    })
+  })
+}
+
+const formatQrResult = (data: any): LarkQrInfo => {
+  const result = { client_id: null, state: null, redirect_uri: null } as unknown as LarkQrInfo
+  result.client_id = data.client_id
+  result.state = 'fit2cloud-lark-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.feishu.cn/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-lark-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)) {
+      const loginTmpCode = event.data
+      url += '&tmp_code=' + loginTmpCode.tmp_code
+      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-lark-qr {
+  margin-top: -15px;
+}
+</style>

frontend/src/views/login/xpack/PlatformClient.ts

@@ -101,14 +101,14 @@ const larkClientRequest = async () => {
     return
   }
   const res = await queryClientInfo(8)
-  if (!res?.appId) {
-    ElMessage.error('get appId error')
+  if (!res?.client_id) {
+    ElMessage.error('get client_id error')
     return
   }
-  const appId = res.data.appId
+  const clientId = res.client_id
   const callRequestAuthCode = () => {
     window['tt'].requestAuthCode({
-      appId: appId,
+      appId: clientId,
       success: (res: any) => {
         const { code } = res
         const state = `fit2cloud-lark-client`
@@ -122,7 +122,7 @@ const larkClientRequest = async () => {
   }
   if (window['tt'].requestAccess) {
     window['tt'].requestAccess({
-      appID: appId,
+      appID: clientId,
       scopeList: [],
       success: (res: any) => {
         const { code } = res
@@ -149,15 +149,15 @@ const larksuiteClientRequest = async () => {
     return
   }
   const res = await queryClientInfo(9)
-  if (!res?.data?.appId) {
-    ElMessage.error('get appId error')
+  if (!res?.client_id) {
+    ElMessage.error('get client_id error')
     return
   }
-  const appId = res.data.appId
+  const clientId = res.client_id
 
   window['h5sdk'].ready(() => {
     window['tt'].requestAuthCode({
-      appId: appId,
+      appId: clientId,
       success(res: any) {
         const code = res?.code || res
         const state = `fit2cloud-larksuite-client`

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

@@ -36,7 +36,7 @@
       <el-icon>
         <Icon name="logo_lark"><logo_lark class="svg-icon" /></Icon>
       </el-icon>
-      {{ t('threshold.lark') }}
+      {{ t('user.lark') }}
     </div>
     <div class="qrcode">
       <lark-qr v-if="activeName === 'lark'" />
@@ -60,8 +60,8 @@ import logo_wechatWork from '@/assets/svg/logo_wechat-work.svg'
 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 LarkQr from './LarkQr.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/common/SettingTemplate.ts

@@ -70,49 +70,35 @@ export const settingMapping = {
     },
   ],
   8: [
-    {
-      realKey: 'corpid',
-      pkey: 'CorpId',
-      pval: '',
-      type: 'text',
-      sort: 1,
-    },
     {
       realKey: 'client_id',
       pkey: 'APP Key',
       pval: '',
       type: 'text',
-      sort: 2,
+      sort: 1,
     },
     {
       realKey: 'client_secret',
       pkey: 'APP Secret',
       pval: '',
       type: 'pwd',
-      sort: 3,
+      sort: 2,
     },
   ],
   9: [
-    {
-      realKey: 'corpid',
-      pkey: 'CorpId',
-      pval: '',
-      type: 'text',
-      sort: 1,
-    },
     {
       realKey: 'client_id',
       pkey: 'APP Key',
       pval: '',
       type: 'text',
-      sort: 2,
+      sort: 1,
     },
     {
       realKey: 'client_secret',
       pkey: 'APP Secret',
       pval: '',
       type: 'pwd',
-      sort: 3,
+      sort: 2,
     },
   ],
 } as any
@@ -134,13 +120,13 @@ export const cardMapping = {
     title: 'user.lark',
     icon: logo_lark,
     settingList: settingMapping[8],
-    copyField: ['CorpId', 'APP Secret'],
+    copyField: ['APP Key', 'APP Secret'],
   },
   9: {
     title: 'user.larksuite',
     icon: logo_lark,
     settingList: settingMapping[9],
-    copyField: ['CorpId', 'APP Secret'],
+    copyField: ['APP Key', 'APP Secret'],
   },
 } as any
 

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 < 8)
+      .filter((card: any) => card.type < 9)
   })
 }
 onMounted(() => {