其他分享
首页 > 其他分享> > 钉钉登录二维码嵌套在vue页面中

钉钉登录二维码嵌套在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>

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    vscode javascript vue.js 更多相关内容
  • 标签:vue,return,window,嵌套,二维码,code,let,amp,login
    来源: https://www.cnblogs.com/huashenyin/p/16126049.html