Vue 钉钉扫码登录

2.X

<template>
  <div id="app">
    <div id="login_container"></div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      redirect: undefined,
      appid: 'ding8lrom1le5zopavwt',
      redirectUrl: 'http://localhost:8080/login',
      apiUrl: 'http://localhost:8080/dingTalk/user/dingTalkLogin',
      dingCodeConfig: {
        id: 'login_container',
        style: 'border:none;background-color:#FFFFFF;',
        width: '365',
        height: '400'
      }
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  computed: {
    getRedirectUrl() {
      return encodeURIComponent(this.redirectUrl)
    },
    getAuthUrl() {
      return `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${this.appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${this.getRedirectUrl}`
    },
    getGoto() {
      return encodeURIComponent(this.getAuthUrl)
    },
    getDingCodeConfig() {
      return { ...this.dingCodeConfig, goto: this.getGoto }
    }
  },
  created() {
    this.initDingJs()
  },
  mounted() {
    this.addDingListener()
    this.initDingLogin()
    this.getUser()
  },
  methods: {
    initDingJs() {
      !function(window, document) {

        function d(a) {
          var e, c = document.createElement('iframe'),
            d = 'https://login.dingtalk.com/login/qrcode.htm?goto=' + a.goto
          d += a.style ? '&style=' + encodeURIComponent(a.style) : '',
            d += a.href ? '&href=' + a.href : '',
            c.src = d,
            c.frameBorder = '0',
            c.allowTransparency = 'true',
            c.scrolling = 'no',
            c.width = a.width ? a.width + 'px' : '365px',
            c.height = a.height ? a.height + 'px' : '400px',
            e = document.getElementById(a.id),
            e.innerHTML = '',
            e.appendChild(c)
        }

        window.DDLogin = d

      }(window, document)
    },
    addDingListener() {

      let self = this

      let handleLoginTmpCode = function(loginTmpCode) {
        window.location.href = self.getAuthUrl + `&loginTmpCode=${loginTmpCode}`
      }

      let handleMessage = function(event) {
        if (event.origin == 'https://login.dingtalk.com') {
          handleLoginTmpCode(event.data)
        }
      }

      if (typeof window.addEventListener != 'undefined') {
        window.addEventListener('message', handleMessage, false)
      } else if (typeof window.attachEvent != 'undefined') {
        window.attachEvent('onmessage', handleMessage)
      }

    },
    initDingLogin() {
      window.DDLogin(this.getDingCodeConfig)
    },
    getUser() {
      let getQueryString = function(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
        var r = window.location.search.substr(1).match(reg)
        if (r != null) {
          return unescape(r[2])
        }
        return null
      }
      let code = getQueryString('code')
      console.log(code)
      // if (code !== null) {
      //   axios
      //     .get(`${this.apiUrl}?code=${code}`).then(response => {

      //     // setToken(response.data.token)
      //     console.log(response)
      //     this.$router.push({ path: this.redirect || '/' }).catch(() => {
      //     })
      //     commit('SET_TOKEN', response.data.token)
      //   })
      //     .catch(error => {
      //       console.log(error)
      //     })
      // }

    }

  }
}
</script>

3.X

<template>
  <div class="login">
    <div class="header">
      <img src="/@/assets/dingding.png" alt="" />
    </div>
    <div id="login_container"></div>
  </div>
</template>

<script setup>
import { onBeforeMount, onMounted } from "vue-demi";

const appid = import.meta.env.VITE_APPID;
const redirectUrl = encodeURIComponent(import.meta.env.VITE_REDIRECTURL);
const dingCodeConfig = {
  id: "login_container",
  style: "border:none;background-color:#FFFFFF;",
  width: "365",
  height: "400",
};
const authUrl = `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${redirectUrl}`;

const goto = encodeURIComponent(authUrl);

const dConfig = Object.assign({}, dingCodeConfig, { goto });

onBeforeMount(() => {
  initDingJs();
});

function initDingJs() {
  !(function (window, document) {
    function d(a) {
      var e,
        c = document.createElement("iframe"),
        d = "https://login.dingtalk.com/login/qrcode.htm?goto=" + a.goto;
      (d += a.style ? "&style=" + encodeURIComponent(a.style) : ""),
        (d += a.href ? "&href=" + a.href : ""),
        (c.src = d),
        (c.frameBorder = "0"),
        (c.allowTransparency = "true"),
        (c.scrolling = "no"),
        (c.width = a.width ? a.width + "px" : "365px"),
        (c.height = a.height ? a.height + "px" : "400px"),
        (e = document.getElementById(a.id)),
        (e.innerHTML = ""),
        e.appendChild(c);
    }

    window.DDLogin = d;
  })(window, document);
}

onMounted(() => {
  addDingListener();
  initDingLogin();
  getUser();
});

function addDingListener() {
  let handleLoginTmpCode = function (loginTmpCode) {
    window.location.href = authUrl + `&loginTmpCode=${loginTmpCode}`;
  };
  let handleMessage = function (event) {
    if (event.origin == "https://login.dingtalk.com") {
      handleLoginTmpCode(event.data);
    }
  };
  if (typeof window.addEventListener != "undefined") {
    window.addEventListener("message", handleMessage, false);
  } else if (typeof window.attachEvent != "undefined") {
    window.attachEvent("onmessage", handleMessage);
  }
}

function initDingLogin() {
  window.DDLogin(dConfig);
}

function getUser() {
  let getQueryString = function (name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
      return unescape(r[2]);
    }
    return null;
  };
  let code = getQueryString("code");
  console.log(code);
  // if (code !== null) {
  //   axios
  //     .get(`${this.apiUrl}?code=${code}`).then(response => {

  //     // setToken(response.data.token)
  //     console.log(response)
  //     this.$router.push({ path: this.redirect || '/' }).catch(() => {
  //     })
  //     commit('SET_TOKEN', response.data.token)
  //   })
  //     .catch(error => {
  //       console.log(error)
  //     })
  // }
}

</script>

<style scoped lang="scss">
.login {
  width: 370px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  box-shadow: 1px 1px 3px 3px #e5e5e5;
  padding: 30px 20px;
  margin: 100px auto;
  .header {
    width: 50px;
    height: 50px;
    font-size: 36px;
    color: #ffffff;
    color: var(--common_white1_color, #ffffff);
    text-align: center;
    background: #0089ff;
    background: var(--theme_primary1_color, #0089ff);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 30px;
    }
  }
  #login_container {
    overflow: hidden;
    display: flex;
    justify-content: center;
  }
}
</style>