网站内嵌二维码钉钉登录JS实现办法：
1.在页面中先引入如下JS文件（支持HTTPS）
<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
2.在需要使用钉钉登录的地方实例以下JS对象
let url = encodeURIComponent(`${this.$store.state.serverConfig.appKey}?appKey=${this.accountData.corpId}&userId=${this.$store.state.loginUser.userId}`);
// 钉钉自己的url
let goto = encodeURIComponent(
`https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${url}`
);
let obj = DDLogin({
id: 'ding-login', // 这里需要你在自己的页面定义一个HTML标签并设置id，例如<div id="login_container"></div>
goto: goto, // 请参考注释里的方式
style: 'border:none;background-color:#FFFFFF;',
width: '100%', // 官方参数 365
height: '300' // 官方参数 400
});
let handleMessage = (event) => {
let origin = event.origin;
if (origin === 'https://login.dingtalk.com') {
this.$emit('accept', appid);
// 判断是否来自ddLogin扫码事件。
let loginTmpCode = event.data;
// 获取到loginTmpCode后就可以在这里构造跳转链接进行跳转了
// 此步拿到临时loginTmpCode换取正式code
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);
}
3.因为重定向的地址是当前扫码页面的地址，所以在当前页面加载的时候要再判断一次
先定义一个方法
getUrlKey: function (name) {
return (
decodeURIComponent(
(new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(
location.href
) || ['', ''])[1].replace(/\+/g, '%20')
) || null
);
},
mounted函数中做了路由判断
if (this.$route.fullPath.includes('state=STATE')) { // 我简单的用这个state来判断的，其实不够严谨
this.codeDing = this.getUrlKey('code'); // 这个是用来给后端获取用户信息的
let appid = this.getUrlKey('appKey');
let userId = this.getUrlKey('userId');
// let url = encodeURIComponent(`${this.$store.state.serverConfig.appKey}?code=${this.codeDing}&corpId=${this.appid}&userId=${this.$store.state.loginUser.userId}&state=STATE`);
let params = {
code:this.codeDing,
corpId:appid,
userId:userId,
state:'STATE'
}
// 这个get请求是把扫码成功后拿到的用户信息发送给后端，是后端提供的接口
$Proxy.IntegrationChild.getUserInfo(params).then((res) => {
if (res.data.code === 0) {
this.$message({
message: JSON.stringify(res.data.msg),
type: 'success'
});
// 自己当前页面的逻辑在向后台发送信息成功后开始处理
this.showUserCenter = true; //我自己项目的逻辑，扫码成功后打开扫码成功弹窗
this.tabVisible = true; // 我自己项目的逻辑，扫码成功后打开的弹窗
this.textDialog = 'D'; // 我自己定义的参数
}
}).catch(err => {
this.$message({
message: JSON.stringify(err),
type: 'warning'
});
});
}
想要只在本页面操作不跳转新页面，之要重定向的地址定义成自己当前的路由就可以了。
写的比较粗糙，不好之处还望指教。
参考钉钉官网：https://open.dingtalk.com/document/orgapp-server/scan-qr-code-to-log-on-to-third-party-websites
