vue项目----钉钉扫码登录

在public资源目录下的index.html那里引入

下面是登录页面的代码块咯！

HTML这里要有一个盒子装着这个二维码哦！！！

mounted() {
//获取路径的code进行相对应的判断
const { code } = this.$route.query
if (code) {
this.dataSetCode(code)
} else {
this.ddInit()
}
},
methods: {
ddInit() {
const url = encodeURIComponent('自己的登录网址')
const appid = '找后端要哦'
const goto = encodeURIComponent(https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${url})
var obj = DDLogin({
id: 'login',
goto: goto,
style: 'border:none;background-color:#FFFFFF;',
width: '365',
height: '400'
})
const handleMessage = (event) => {
const origin = event.origin
console.log('origin', event.origin)
if (origin == 'https://login.dingtalk.com') { // 判断是否来自ddLogin扫码事件。
window.location.href = https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${url}&loginTmpCode=${loginTmpCode}
}
}
if (typeof window.addEventListener !== 'undefined') {
window.addEventListener('message', handleMessage, false)
} else if (typeof window.attachEvent !== 'undefined') {
window.attachEvent('onmessage', handleMessage)
}
},
dataSetCode(code) {
this.$get('登录接口', { code: code }).then((res) => {
// this.$router.push('/index')
}).catch(() => {
this.$router.push('/')
this.loading = false
})
},
}
最终效果图在这里！！！！