钉钉登录二维码嵌套在vue页面中

转自 https://www.csdn.net/tags/OtDacg3sMjQ2NTgtYmxvZwO0O0OO0O0O.html

钉钉登录二维码嵌套在vue页面中

2021-09-04 14:42:45

<template>
  <div id="app">
    <div id="login_container"></div>
  </div>
</template>
<script>
import axios from "axios";
export default {

name: "App",

components: {},

data() {

return {

appid: "dingb3x07ieb8wrwmw81",

redirectUrl: "https://console.huishouzx.com/login",

apiUrl:

"<用户信息接口,把redirectUrl回调获取的CODE给后端用于获取扫码用户信息>",

dingCodeConfig: {

id: "login_container",

style: "border:none;background-color:#FFFFFF;",

width: "365",

height: "400",

},

};

},

computed: {

getRedirectUrl() {

return encodeURIComponent(this.redirectUrl);

},

getAuthUrl() {

return https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${this.appid}&amp;response_type=code&amp;scope=snsapi_login&amp;state=STATE&amp;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 + `&amp;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("(^|&amp;)" + name + "=([^&amp;]*)(&amp;|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
      return unescape(r[2]);
    }
    return null;
  };

  let code = getQueryString("code");

  if (code !== null) {
    axios
      .get(`${this.apiUrl}?code=${code}`)
      .then((response) =&gt; {
        console.log(response);
      })
      .catch((error) =&gt; {
        console.log(error);
      });
  }
},

},

};

</script>
<style>
app {
font-family: Avenir, Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

</style>