feat: integrate WeCom SDK for QR code login functionality

Author: wxg0103

ui/package.json

@@ -24,6 +24,7 @@
     "@logicflow/extension": "^1.2.27",
     "@vavt/cm-extension": "^1.9.1",
     "@vueuse/core": "^13.3.0",
+    "@wecom/jssdk": "^2.3.3",
     "axios": "^1.8.4",
     "cropperjs": "^1.6.2",
     "dingtalk-jsapi": "^3.1.0",

ui/src/views/chat/user-login/scanCompinents/wecomQrCode.vue

@@ -1,46 +1,79 @@
 <template>
-  <iframe :src="iframeUrl" width="100%" height="380px" frameborder="0"
-          style="margin-top: -30px"></iframe>
+  <div id="wecom-qr" class="wecom-qr flex"></div>
 </template>
 
 <script lang="ts" setup>
+import {useRoute, useRouter} from 'vue-router'
+import * as ww from '@wecom/jssdk'
+import {
+  WWLoginLangType,
+  WWLoginPanelSizeType,
+  WWLoginRedirectType,
+  WWLoginType
+} from '@wecom/jssdk'
 import {ref, nextTick, defineProps} from 'vue'
+import {MsgError} from '@/utils/message'
+import useStore from '@/stores'
 import {getBrowserLang} from '@/locales'
-import {useRoute} from "vue-router";
 
+const router = useRouter()
 const route = useRoute()
+const {
+  params: {accessToken},
+} = route as any
+const wwLogin = ref({})
+const obj = ref<any>({isWeComLogin: false})
+const {chatUser} = useStore()
+
 const props = defineProps<{
   config: {
+    callback_url: string;
     app_secret: string
     app_key: string
     corp_id?: string
     agent_id?: string
-    callback_url: string
   }
 }>()
 
-const {
-  params: {accessToken},
-} = route as any
-
-const iframeUrl = ref('')
 const init = async () => {
   await nextTick() // 确保DOM已更新
   const data = {
     corpId: props.config.corp_id,
-    agentId: props.config.agent_id,
-    redirectUri: props.config.callback_url,
+    agentId: props.config.agent_id
   }
-  let lang = localStorage.getItem('MaxKB-locale') || getBrowserLang() || 'en-US'
-  if (lang === 'en-US') {
-    lang = 'en'
-  } else {
-    lang = 'zh'
+  const lang = localStorage.getItem('MaxKB-locale') || getBrowserLang() || 'en-US'
+  const redirectUri = props.config.callback_url
+  try {
+    wwLogin.value = ww.createWWLoginPanel({
+      el: '#wecom-qr',
+      params: {
+        login_type: WWLoginType.corpApp,
+        appid: data.corpId || '',
+        agentid: data.agentId,
+        redirect_uri: redirectUri,
+        state: 'fit2cloud-wecom-qr',
+        lang: lang === 'zh-CN' || lang === 'zh-Hant' ? WWLoginLangType.zh : WWLoginLangType.en,
+        redirect_type: WWLoginRedirectType.callback,
+        panel_size: WWLoginPanelSizeType.small
+      },
+      onCheckWeComLogin: obj.value,
+      async onLoginSuccess({code}: any) {
+        chatUser.wecomCallback(code, accessToken).then(() => {
+          setTimeout(() => {
+            router.push({
+              name: 'chat',
+              params: {accessToken: accessToken},
+              query: route.query,
+            })
+          })
+        })
+      },
+      onLoginFail(err) {
+        MsgError(`${err.errMsg}`)
+      }
+    })
+  } catch (error) {
   }
-  const redirectUri = encodeURIComponent(data.redirectUri)
-  console.log('redirectUri', data.redirectUri)
-  // 手动构建生成二维码的url
-  iframeUrl.value = `https://login.work.weixin.qq.com/wwlogin/sso/login?login_type=CorpApp&appid=${data.corpId}&agentid=${data.agentId}&redirect_uri=${redirectUri}&state=${accessToken}&lang=${lang}&lang=${lang}&panel_size=small`
 }
 
 init()