feat(系统设置): 登录页面新增钉钉登陆

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

@@ -0,0 +1,53 @@
+<template>
+  <div id="ding-talk-qr" class="ding-talk-qrName" />
+</template>
+
+<script lang="ts" setup>
+  import { useScriptTag } from '@vueuse/core';
+
+  const { load } = useScriptTag('https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js');
+
+  const a = encodeURIComponent('https://s0my5tnf41e2.ngrok.xiaomiqiu123.top/');
+
+  const url = `https://login.dingtalk.com/oauth2/auth?redirect_uri=${a}&response_type=code&client_id=dinglsfxhodjquu4gq2x&scope=openid&state=dddd&prompt=consent`;
+
+  const initActive = async () => {
+    await load(true);
+    window.DTFrameLogin(
+      {
+        id: 'ding-talk-qr',
+        width: 300,
+        height: 300,
+      },
+      {
+        redirect_uri: a,
+        client_id: 'dinglsfxhodjquu4gq2x',
+        scope: 'openid',
+        response_type: 'code',
+        state: 'xxxxxxxxx',
+        prompt: 'consent',
+      },
+      (loginResult) => {
+        const { redirectUrl, authCode, state } = loginResult;
+        // 这里可以直接进行重定向
+        window.location.href = redirectUrl;
+        // 也可以在不跳转页面的情况下，使用code进行授权
+        console.log(authCode);
+      },
+      (errorMsg) => {
+        // 这里一般需要展示登录失败的具体原因,可以使用toast等轻提示
+        console.error(`errorMsg of errorCbk: ${errorMsg}`);
+      }
+    );
+  };
+  onMounted(() => {
+    initActive();
+  });
+</script>
+
+<style lang="less" scoped>
+  .ding-talk-qrName {
+    width: 300px;
+    height: 300px;
+  }
+</style>

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

@@ -1,8 +1,8 @@
 <template>
   <a-tabs v-model:active-key="activeName" class="tabPlatform" @change="handleClick">
     <a-tab-pane key="wecom" :title="t('project.messageManagement.WE_COM')" class="font-[16px]"></a-tab-pane>
-    <!--    <a-tab-pane key="dingtalk" :title="t('project.messageManagement.DING_TALK')" ></a-tab-pane>
+    <a-tab-pane key="dingtalk" :title="t('project.messageManagement.DING_TALK')" class="font-[16px]"></a-tab-pane>
-    <a-tab-pane key="lark" :title="t('project.messageManagement.LARK')"></a-tab-pane>
+    <!--    <a-tab-pane key="lark" :title="t('project.messageManagement.LARK')"></a-tab-pane>
     <a-tab-pane key="larksuite" :title="t('project.messageManagement.LARK_SUITE')"></a-tab-pane>-->
   </a-tabs>
   <div v-if="activeName === 'wecom'" class="login-qrcode">
@@ -10,11 +10,16 @@
       <wecom-qr v-if="activeName === 'wecom'" />
     </div>
   </div>
-  <!--  <div class="login-qrcode" v-if="activeName === 'dingtalk'">
+  <div v-if="activeName === 'dingtalk'" class="login-qrcode">
     <div class="qrcode">
-      <dingtalk-qr v-if="activeName === 'dingtalk'"/>
+      <div class="title">
+        <MsIcon type="icon-logo_dingtalk" size="24"></MsIcon>
+        钉钉登录
+      </div>
+      <ding-talk-qr v-if="activeName === 'dingtalk'" />
     </div>
   </div>
+  <!--
   <div class="login-qrcode" v-if="activeName === 'lark'">
     <div class="qrcode">
       <lark-qr v-if="activeName === 'lark'"/>
@@ -31,6 +36,8 @@
   import { ref } from 'vue';
   import { useI18n } from 'vue-i18n';
 
+  import MsIcon from '@/components/pure/ms-icon-font/index.vue';
+  import dingTalkQr from './dingTalkQrCode.vue';
   import WecomQr from './weComQrCode.vue';
 
   const { t } = useI18n();
@@ -83,11 +90,12 @@
       justify-content: center;
       align-items: center;
       overflow: hidden;
-      margin: 0 0 16px;
       font-size: 18px;
       font-weight: 500;
       font-style: normal;
       line-height: 26px;
+      margin-bottom: -24px;
+      z-index: 100000;
       .ed-icon {
         margin-right: 8px;
         font-size: 24px;

frontend/src/views/login/utils/RemoteJs.ts

@@ -0,0 +1,22 @@
+export default function loadScript(url: string, jsId?: string) {
+  return new Promise(function (resolve, reject) {
+    const scriptId = jsId || 'de-fit2cloud-script-id';
+    let dom = document.getElementById(scriptId);
+    if (dom) {
+      dom.parentElement?.removeChild(dom);
+      dom = null;
+    }
+    const script = document.createElement('script');
+
+    script.id = scriptId;
+    script.onload = function () {
+      return resolve(null);
+    };
+    script.onerror = function () {
+      return reject(new Error('Load script from '.concat(url, ' failed')));
+    };
+    script.src = url;
+    const head = document.head || document.getElementsByTagName('head')[0];
+    (document.body || head).appendChild(script);
+  });
+}

frontend/types/window.d.ts

@@ -1,3 +1,40 @@
+// ********************************************************************************
+// DOM包裹容器相关参数
+// ********************************************************************************
+// 注意！width与height参数只用于设置二维码iframe元素的尺寸，并不会影响包裹容器尺寸。
+// 包裹容器的尺寸与样式需要接入方自己使用css设置
+interface IDTLoginFrameParams {
+  id: string; // 必传，包裹容器元素ID，不带'#'
+  width?: number; // 选传，二维码iframe元素宽度，最小280，默认300
+  height?: number; // 选传，二维码iframe元素高度，最小280，默认300
+}
+
+// ********************************************************************************
+// 统一登录参数
+// ********************************************************************************
+// 参数意义与“拼接链接发起登录授权”的接入方式完全相同（缺少部分参数）
+// 增加了isPre参数来设定运行环境
+interface IDTLoginLoginParams {
+  redirect_uri: string; // 必传，注意url需要encode
+  response_type: string; // 必传，值固定为code
+  client_id: string; // 必传
+  scope: string; // 必传，如果值为openid+corpid，则下面的org_type和corpId参数必传，否则无法成功登录
+  prompt: string; // 必传，值为consent。
+  state?: string; // 选传
+  org_type?: string; // 选传，当scope值为openid+corpid时必传
+  corpId?: string; // 选传，当scope值为openid+corpid时必传
+  exclusiveLogin?: string; // 选传，如需生成专属组织专用二维码时，可指定为true，可以限制非组织帐号的扫码
+  exclusiveCorpId?: string; // 选传，当exclusiveLogin为true时必传，指定专属组织的corpId
+}
+
+// ********************************************************************************
+// 登录成功后返回的登录结果
+// ********************************************************************************
+interface IDTLoginSuccess {
+  redirectUrl: string; // 登录成功后的重定向地址，接入方可以直接使用该地址进行重定向
+  authCode: string; // 登录成功后获取到的authCode，接入方可直接进行认证，无需跳转页面
+  state?: string; // 登录成功后获取到的state
+}
 declare interface Window {
   kity: any;
   angular: any;
@@ -9,4 +46,10 @@ declare interface Window {
   minderEditor: Record<string, any>;
   km: Record<string, any>;
   canvg: (canvas: HTMLCanvasElement, xml: string, option: Record<string, any>) => void;
+  DTFrameLogin: (
+    frameParams: IDTLoginFrameParams, // DOM包裹容器相关参数
+    loginParams: IDTLoginLoginParams, // 统一登录参数
+    successCbk: (result: IDTLoginSuccess) => void, // 登录成功后的回调函数
+    errorCbk?: (errorMsg: string) => void // 登录失败后的回调函数
+  ) => void;
 }