ソースを参照

fix: 集成钉钉二维码登录

hanxiaohui 4 ヶ月 前
コミット
c4eced6c77
5 ファイル変更58 行追加1 行削除
  1. 1 0
      .env.development
  2. 2 1
      .env.localhost
  3. 1 0
      .env.pre
  4. 1 0
      .env.production
  5. 53 0
      src/components/support/dd-login/index.vue

+ 1 - 0
.env.development

@@ -5,3 +5,4 @@ VITE_APP_FILE_URL='http://192.168.21.77:2024/upload'
 VITE_APP_API_BASE_URL='http://localhost:8081/#'
 VITE_APP_API_FILE_VIEW_URL='http://192.168.17.153:8812'
 VITE_APP_API_CUSTOM_URL='/base-api'
+VITE_APP_DING_APP_ID='dingu35ilmyp0f4vlkfd'

+ 2 - 1
.env.localhost

@@ -1,4 +1,5 @@
 NODE_ENV=development
 VITE_APP_TITLE='BoundLink-Plate 本地环境(Local)'
 VITE_APP_API_URL='/api'
-VITE_APP_API_CUSTOM_URL='/common-api'
+VITE_APP_API_CUSTOM_URL='/common-api'
+VITE_APP_DING_APP_ID='123456789'

+ 1 - 0
.env.pre

@@ -2,3 +2,4 @@ NODE_ENV=production
 VITE_APP_TITLE='BoundLink-Plate 预发布环境(Pre)'
 VITE_APP_API_URL='/api'
 VITE_APP_API_CUSTOM_URL='/common-api'
+VITE_APP_DING_APP_ID='123456789'

+ 1 - 0
.env.production

@@ -5,3 +5,4 @@ VITE_APP_FILE_URL='http://192.168.21.77:2024/upload'
 VITE_APP_API_BASE_URL='http://27.223.11.42:9102/#'
 VITE_APP_API_FILE_VIEW_URL='http://27.223.11.42:8812'
 VITE_APP_API_CUSTOM_URL='/common-api'
+VITE_APP_DING_APP_ID='123456789'

+ 53 - 0
src/components/support/dd-login/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="ding-login" id="dd_login_container"></div>
+</template>
+
+<script setup>
+  import { onMounted, onUnmounted } from 'vue';
+  const appId = import.meta.env.VITE_APP_DING_APP_ID;
+  const url = encodeURIComponent('http://59.110.6.97:10619');
+  const goto = encodeURIComponent(
+    `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appId}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=` + url
+  );
+
+  onMounted(() => {
+    DDLogin({
+      id: 'dd_login_container', //这里需要你在自己的页面定义一个HTML标签并设置id,例如<div id="login_container"></div>或<span id="login_container"></span>
+      goto: goto, //请参考注释里的方式
+      style: 'border:none;background-color:#FFFFFF;',
+      width: '300',
+      height: '300',
+    });
+  });
+
+  const handleMessage = (event) => {
+    let origin = event.origin;
+    if (origin == 'https://login.dingtalk.com') {
+      //判断是否来自ddLogin扫码事件。
+      let loginTmpCode = event.data;
+      //获取到loginTmpCode后就可以在这里构造跳转链接进行跳转了
+      const targetUrl = goto + `#/sso?code=${loginTmpCode}&state=STATE`;
+      window.location.href = targetUrl;
+    }
+  };
+  if (typeof window.addEventListener != 'undefined') {
+    window.addEventListener('message', handleMessage, false);
+  } else if (typeof window.attachEvent != 'undefined') {
+    window.attachEvent('onmessage', handleMessage);
+  }
+
+  onUnmounted(() => {
+    if (typeof window.removeEventListener != 'undefined') {
+      window.removeEventListener('message', handleMessage);
+    } else if (typeof window.detachEvent != 'undefined') {
+      window.detachEvent('onmessage', handleMessage);
+    }
+  });
+</script>
+
+<style lang="scss" scoped>
+  .ding-login {
+    width: 100%;
+    height: 100%;
+  }
+</style>