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

2022-04-10 15:32:36 阅读：213 来源： 互联网

标签：vue return window 嵌套二维码 code let amp login

转自 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

app {