index.html中引入
–登录页
html
<div id="ding-login" class="a"></div>
import qs from 'qs'
// 钉钉后台获取的appid和appSecret,appSecret没有用到扫码中
let appid= 'XXXXXXXXXXX'
let redirect = encodeURIComponent(`xxxxxxxxxxxxxx`) //回调地址
let http_url = encodeURIComponent(`https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appid}&response_type=code&scope=snsapi_login&prompt=consent&state=STATE&redirect_uri=${redirect}`)
data中实例
code: qs.parse(window.location.hash.substring(3)).code, // 获取的临时登陆码
codeX:'',
方法
created(){
this.ddLoginInit()
this.DDLogin()
},
methods:{
DDLogin(){
this.$nextTick(() => {
// 钉钉登录,参数文档中那些其他项就不展示了,按照文档自己配置就可以
var obj = DDLogin({
id: "ding-login",
goto: http_url,
style: "border:none;background-color:#FFFFFF;",
})
})
},
ddLoginInit(){
// 如果临时登录吗存在,执行登录方法
//截取扫码成功后返回的code码
let url=window.location.href;
let index = url.indexOf("?")
let theRequest = new Object();
if (index != -1) {
var str = url.substr(index + 1);
var strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
}
}
//判断如果code码不为空,则调取后台接口传值
if(theRequest.code!=null && theRequest.code!=undefined){
this.codeX = theRequest.code
let params = new FormData();
params.append("code", this.codeX);
/* 这里写登录方法 */
scanCodeLogin(params).then((data) => {
if(data && data.code === 200) {
this.$cookie.set("adminToken", data.data.token);
this.$router.push( "" );
}else {
this.$message.error(err.data.msg);
}
})
.catch(err => {
this.$message.error(err.data.msg);
});
return false
}else{
// 获取到扫码结果,并且跳转获取临时登录码
var handleMessage = function (event) {
var origin = event.origin;
if (origin == "https://login.dingtalk.com") {
// 拿到 loginTmpCode 后,跳转连接拿到临时登陆码,之后返回到跳转的地址,会携带临时登陆码
var loginTmpCode = event.data;
let url = `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${http_url}&loginTmpCode=${loginTmpCode}`
// 这边直接打开拼接好的连接,去获取临时登录码,回来地址在下面
location.href = url
}
};
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', handleMessage, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onmessage', handleMessage);
}
}
},
}