feat(系统设置): 飞书扫码登陆

backend/framework/sdk/src/main/java/io/metersphere/sdk/util/FilterChainUtils.java

@@ -13,8 +13,12 @@ public class FilterChainUtils {
         filterChainDefinitionMap.put("/authentication/get-list", "anon");
         filterChainDefinitionMap.put("/we_com/info", "anon");
         filterChainDefinitionMap.put("/ding_talk/info", "anon");
+        filterChainDefinitionMap.put("/lark/info", "anon");
+        filterChainDefinitionMap.put("/lark_suite/info", "anon");
         filterChainDefinitionMap.put("/sso/callback/we_com", "anon");
         filterChainDefinitionMap.put("/sso/callback/ding_talk", "anon");
+        filterChainDefinitionMap.put("/sso/callback/lark", "anon");
+        filterChainDefinitionMap.put("/sso/callback/lark_suite", "anon");
         filterChainDefinitionMap.put("/setting/get/platform/param", "anon");
         filterChainDefinitionMap.put("/signout", "anon");
         filterChainDefinitionMap.put("/is-login", "anon");

frontend/src/api/modules/user/index.ts

@@ -8,10 +8,14 @@ import {
   EnableAPIKEYUrl,
   EnableLocalConfigUrl,
   GeDingInfoUrl,
+  GeLarkInfoUrl,
+  GeLarkSuiteInfoUrl,
   GetAPIKEYListUrl,
   getAuthenticationUrl,
   GetDingCallbackUrl,
   GetInfoUrl,
+  GetLarkCallbackUrl,
+  GetLarkSuiteCallbackUrl,
   GetLocalConfigUrl,
   GetMenuListUrl,
   GetPlatformAccountUrl,
@@ -48,7 +52,7 @@ import type {
   UpdateLocalConfigParams,
   UpdatePswParams,
 } from '@/models/user';
-import { DingInfo, WecomInfo } from '@/models/user';
+import { DingInfo, LarkInfo, WecomInfo } from '@/models/user';
 
 import type { RouteRecordNormalized } from 'vue-router';
 
@@ -89,6 +93,23 @@ export function getDingInfo() {
 export function getDingCallback(code: string) {
   return MSR.get<LoginRes>({ url: GetDingCallbackUrl, params: { code } });
 }
+
+export function getLarkInfo() {
+  return MSR.get<LarkInfo>({ url: GeLarkInfoUrl }, { ignoreCancelToken: true, errorMessageMode: 'none' });
+}
+
+export function getLarkCallback(code: string) {
+  return MSR.get<LoginRes>({ url: GetLarkCallbackUrl, params: { code } });
+}
+
+export function getLarkSuiteInfo() {
+  return MSR.get<LarkInfo>({ url: GeLarkSuiteInfoUrl }, { ignoreCancelToken: true, errorMessageMode: 'none' });
+}
+
+export function getLarkSuiteCallback(code: string) {
+  return MSR.get<LoginRes>({ url: GetLarkSuiteCallbackUrl, params: { code } });
+}
+
 export function logout() {
   return MSR.get<LoginRes>({ url: LogoutUrl });
 }

frontend/src/api/requrls/user.ts

@@ -31,3 +31,7 @@ export const GetWeComCallbackUrl = '/sso/callback/we_com'; // 获取企业微信
 export const GetPlatformParamUrl = '/setting/get/platform/param';
 export const GeDingInfoUrl = '/ding_talk/info'; // 获取企业微信登陆的配置信息
 export const GetDingCallbackUrl = '/sso/callback/ding_talk'; // 获取企业微信登陆的回调信息
+export const GeLarkInfoUrl = '/lark/info'; // 获取飞书登陆的配置信息
+export const GetLarkCallbackUrl = '/sso/callback/lark'; // 获取飞书登陆的回调信息
+export const GeLarkSuiteInfoUrl = '/lark_suite/info'; // 获取国际飞书登陆的配置信息
+export const GetLarkSuiteCallbackUrl = '/sso/callback/lark_suite'; // 获取国际飞书登陆的回调信息

frontend/src/models/user.ts

@@ -28,6 +28,13 @@ export interface DingInfo {
   callBack?: string;
 }
 
+// 飞书对接信息
+export interface LarkInfo {
+  agentId?: string;
+  state?: string;
+  callBack?: string;
+}
+
 // 更新本地执行配置
 export interface UpdateLocalConfigParams {
   id: string;

frontend/src/router/constants.ts

@@ -3,6 +3,7 @@ export const WHITE_LIST = [
   { name: 'notFound', path: '/notFound', children: [] },
   { name: 'invite', path: '/invite', children: [] },
   { name: 'index', path: '/index', children: [] },
+  { name: 'loginRedirect', path: '/qrcode/transition', children: [] },
   {
     name: 'share',
     path: '/share',

frontend/src/router/index.ts

@@ -6,6 +6,7 @@ import appRoutes from './routes';
 import {
   INDEX_ROUTE,
   INVITE_ROUTE,
+  LOGIN_REDIRECT,
   NO_PROJECT,
   NO_RESOURCE,
   NOT_FOUND_RESOURCE,
@@ -39,6 +40,7 @@ const router = createRouter({
     NO_PROJECT,
     NO_RESOURCE,
     INDEX_ROUTE,
+    LOGIN_REDIRECT,
   ],
   scrollBehavior() {
     return { top: 0 };

frontend/src/router/routes/base.ts

@@ -75,3 +75,9 @@ export const NOT_FOUND_RESOURCE: RouteRecordRaw = {
   name: 'notResourceScreen',
   component: () => import('@/views/base/not-resource-screen/not-resource-screen.vue'),
 };
+
+export const LOGIN_REDIRECT: RouteRecordRaw = {
+  path: '/qrcode/transition',
+  name: 'loginRedirect',
+  component: () => import('@/views/base/login-redirect/index.vue'),
+};

frontend/src/views/base/login-redirect/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div></div>
+</template>
+
+<script lang="ts" setup>
+  import { useRouter } from 'vue-router';
+  import { Message } from '@arco-design/web-vue';
+
+  import { getProjectInfo } from '@/api/modules/project-management/project';
+  import { getLarkCallback, getLarkSuiteCallback } from '@/api/modules/user';
+  import { useI18n } from '@/hooks/useI18n';
+  import { NO_PROJECT_ROUTE_NAME, NO_RESOURCE_ROUTE_NAME } from '@/router/constants';
+  import { useAppStore, useUserStore } from '@/store';
+  import useLicenseStore from '@/store/modules/setting/license';
+  import { setLoginExpires } from '@/utils/auth';
+  import { getFirstRouteNameByPermission, routerNameHasPermission } from '@/utils/permission';
+
+  const router = useRouter();
+  const { t } = useI18n();
+  const userStore = useUserStore();
+  const appStore = useAppStore();
+  const licenseStore = useLicenseStore();
+
+  async function loginConfig() {
+    const redirectUrl = new URL(window.location.href);
+    // 获取参数
+    const params = new URLSearchParams(redirectUrl.search);
+    // 获取特定参数的值，例如 "id"
+    const code = params.get('code');
+    const state = params.get('state');
+    let larkCallback;
+    if (state === 'fit2cloud-lark-qr') {
+      larkCallback = await getLarkCallback(code || '');
+    } else {
+      larkCallback = await getLarkSuiteCallback(code || '');
+    }
+    userStore.qrCodeLogin(await larkCallback);
+    Message.success(t('login.form.login.success'));
+    const { redirect, ...othersQuery } = router.currentRoute.value.query;
+    const redirectHasPermission =
+      redirect &&
+      ![NO_RESOURCE_ROUTE_NAME, NO_PROJECT_ROUTE_NAME].includes(redirect as string) &&
+      routerNameHasPermission(redirect as string, router.getRoutes());
+    const currentRouteName = getFirstRouteNameByPermission(router.getRoutes());
+    const [res] = await Promise.all([getProjectInfo(appStore.currentProjectId), licenseStore.getValidateLicense()]); // 登录前校验 license 避免进入页面后无license状态
+    if (!res || res.deleted) {
+      router.push({
+        name: NO_PROJECT_ROUTE_NAME,
+      });
+    }
+    if (res) {
+      appStore.setCurrentMenuConfig(res?.moduleIds || []);
+    }
+    setLoginExpires();
+    router.push({
+      name: redirectHasPermission ? (redirect as string) : currentRouteName,
+      query: {
+        ...othersQuery,
+        orgId: appStore.currentOrgId,
+        pId: appStore.currentProjectId,
+      },
+    });
+  }
+
+  onBeforeMount(async () => {
+    loginConfig();
+  });
+</script>

frontend/src/views/login/components/larkQrCode.vue

@@ -0,0 +1,52 @@
+<template>
+  <div id="lark-qr" class="lark-qrName" />
+</template>
+
+<script lang="ts" setup>
+  import { useScriptTag } from '@vueuse/core';
+
+  import { getLarkInfo } from '@/api/modules/user';
+
+  const { load } = useScriptTag(
+    'https://lf-package-cn.feishucdn.com/obj/feishu-static/lark/passport/qrcode/LarkSSOSDKWebQRCode-1.0.3.js'
+  );
+
+  const initActive = async () => {
+    const data = await getLarkInfo();
+    await load(true);
+    // const callBack = encodeURIComponent(window.location.origin);
+    const redirectUrL = encodeURIComponent(`${window.location.origin}#/qrcode/transition`);
+    // const url = `https://passport.feishu.cn/suite/passport/oauth/authorize?client_id=${data.agentId}&redirect_uri=${callBack}&response_type=code&state=fit2cloud-lark-qr`;
+    const url = `https://passport.feishu.cn/suite/passport/oauth/authorize?client_id=${data.agentId}&redirect_uri=${redirectUrL}&response_type=code&state=fit2cloud-lark-qr`;
+
+    const QRLoginObj = window.QRLogin({
+      id: 'lark-qr',
+      goto: url,
+      width: '300',
+      height: '300',
+      style: 'width:300px;height:300px', // 可选的，二维码html标签的style属性
+    });
+
+    // function handleMessage
+    if (typeof window.addEventListener !== 'undefined') {
+      window.addEventListener('message', async (event: any) => {
+        // 使用 matchOrigin 和 matchData 方法来判断 message 和来自的页面 url 是否合法
+        if (QRLoginObj.matchOrigin(event.origin) && QRLoginObj.matchData(event.data)) {
+          const loginTmpCode = event.data.tmp_code;
+          // 在授权页面地址上拼接上参数 tmp_code，并跳转
+          window.location.href = `${url}&tmp_code=${loginTmpCode}`;
+        }
+      });
+    }
+  };
+  onMounted(() => {
+    initActive();
+  });
+</script>
+
+<style lang="less" scoped>
+  .lark-qrName {
+    width: 300px;
+    height: 300px;
+  }
+</style>

frontend/src/views/login/components/larkSuiteQrCode.vue

@@ -0,0 +1,52 @@
+<template>
+  <div id="lark-suite-qr" class="lark-suite-qrName" />
+</template>
+
+<script lang="ts" setup>
+  import { useScriptTag } from '@vueuse/core';
+
+  import { getLarkSuiteInfo } from '@/api/modules/user';
+
+  const { load } = useScriptTag(
+    'https://lf-package-us.larksuitecdn.com/obj/lark-static-us/lark/passport/qrcode/LarkSSOSDKWebQRCode-1.0.3.js'
+  );
+
+  const initActive = async () => {
+    const data = await getLarkSuiteInfo();
+    await load(true);
+    // const callBack = encodeURIComponent(window.location.origin);
+    const redirectUrL = encodeURIComponent(`${window.location.origin}#/qrcode/transition`);
+    // const url = `https://passport.feishu.cn/suite/passport/oauth/authorize?client_id=${data.agentId}&redirect_uri=${callBack}&response_type=code&state=fit2cloud-lark-qr`;
+    const url = `https://passport.larksuite.com/suite/passport/oauth/authorize?client_id=${data.agentId}&redirect_uri=${redirectUrL}&response_type=code&state=fit2cloud-lark-suite-qr`;
+
+    const QRLoginObj = window.QRLogin({
+      id: 'lark-suite-qr',
+      goto: url,
+      width: '300',
+      height: '300',
+      style: 'width:300px;height:300px', // 可选的，二维码html标签的style属性
+    });
+
+    // function handleMessage
+    if (typeof window.addEventListener !== 'undefined') {
+      window.addEventListener('message', async (event: any) => {
+        // 使用 matchOrigin 和 matchData 方法来判断 message 和来自的页面 url 是否合法
+        if (QRLoginObj.matchOrigin(event.origin) && QRLoginObj.matchData(event.data)) {
+          const loginTmpCode = event.data.tmp_code;
+          // 在授权页面地址上拼接上参数 tmp_code，并跳转
+          window.location.href = `${url}&tmp_code=${loginTmpCode}`;
+        }
+      });
+    }
+  };
+  onMounted(() => {
+    initActive();
+  });
+</script>
+
+<style lang="less" scoped>
+  .lark-suite-qrName {
+    width: 300px;
+    height: 300px;
+  }
+</style>

frontend/src/views/login/components/tabQrCode.vue

@@ -26,17 +26,16 @@
       <ding-talk-qr v-if="activeName === 'DING_TALK'" />
     </div>
   </div>
-  <!--
+  <div v-if="activeName === 'LARK'" class="login-qrcode">
-  <div class="login-qrcode" v-if="activeName === 'lark'">
     <div class="qrcode">
-      <lark-qr v-if="activeName === 'lark'"/>
+      <lark-qr-code v-if="activeName === 'LARK'" />
     </div>
   </div>
-  <div class="login-qrcode" v-if="activeName === 'larksuite'">
+  <div v-if="activeName === 'LARK_SUITE'" class="login-qrcode">
     <div class="qrcode">
-      <larksuite-qr v-if="activeName === 'larksuite'"/>
+      <lark-suite-qr-code v-if="activeName === 'LARK_SUITE'" />
     </div>
-  </div>-->
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -46,6 +45,8 @@
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
   import dingTalkQr from './dingTalkQrCode.vue';
   import WecomQr from './weComQrCode.vue';
+  import LarkQrCode from '@/views/login/components/larkQrCode.vue';
+  import LarkSuiteQrCode from '@/views/login/components/larkSuiteQrCode.vue';
 
   import { getPlatformParamUrl } from '@/api/modules/user';
 

frontend/types/window.d.ts

@@ -9,6 +9,14 @@ interface IDTLoginFrameParams {
   height?: number; // 选传，二维码iframe元素高度，最小280，默认300
 }
 
+interface qrLogin {
+  id: string;
+  goto: string;
+  width: string;
+  height: string;
+  style: string; // 可选的，二维码html标签的style属性
+}
+
 // ********************************************************************************
 // 统一登录参数
 // ********************************************************************************
@@ -59,4 +67,5 @@ declare interface Window {
     successCbk: (result: IDTLoginSuccess) => void, // 登录成功后的回调函数
     errorCbk?: (errorMsg: string) => void // 登录失败后的回调函数
   ) => void;
+  QRLogin: (QRLogin: qrLogin) => Record<any, any>;
 }