钉钉登录二维码嵌套在vue页面中
作者:互联网
转自 https://www.csdn.net/tags/OtDacg3sMjQ2NTgtYmxvZwO0O0OO0O0O.html
<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() {
returnhttps://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"); if (code !== null) { axios .get(`${this.apiUrl}?code=${code}`) .then((response) => { console.log(response); }) .catch((error) => { 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>
标签:vue,return,window,嵌套,二维码,code,let,amp,login 来源: https://www.cnblogs.com/huashenyin/p/16126049.html