钉钉授权扫码登录

最新推荐文章于 2024-07-19 11:07:13 发布

前端同学

最新推荐文章于 2024-07-19 11:07:13 发布

阅读量1.3k

点赞数 1

分类专栏：钉钉

本文链接：https://blog.csdn.net/weixin_44730897/article/details/118148585

版权

钉钉专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在后台配置AppKey，并利用DingTalk SDK实现在移动端的扫码登录。当用户授权登录后，DingTalk会携带code回调到指定的域名。在登录页面接收到code后，可以通过它请求后台获取用户信息。文中提供了JavaScript代码示例，演示了如何监听并处理DingTalk的回调事件，完成登录流程。

摘要由CSDN通过智能技术生成

回调域名，需要在后台配置
AppKey，在钉钉后台获取
等在手机确定授权登录，会调用重定向到钉钉那，然后钉钉在跳转回来，
会带上一个临时的code ，
如

http://172.16.150.72:8080/#/login?code=1f0e565439bf37419036f38f08ad10e3&state=STATE

然后我们就可以在login这个页面，加入判断，带上code请求后台获取用户信息了

<template>
	<div id="login_container"></div>
</template>
<script>
export default {
	data() {
		return {
			AppKey: '你的AppKey',
		};
	},
	methods: {
		DDLogin(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);
		}
	},
	mounted() {
        let baseUrl = encodeURIComponent('http://172.16.150.72:8080/#/login') // 回调域名：扫码成功跳转的url，需要进行编码
		let url = encodeURIComponent(
            `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${this.AppKey}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${baseUrl}`
            ) // goto参数,需要进行编码
        var obj = this.DDLogin({
            id: "login_container", //这里需要你在自己的页面定义一个HTML标签并设置id，例如<div id="login_container"></div>或<span id="login_container"></span>
            goto: url, // 转码后的url
            style: "border:none;background-color:#FFFFFF;", // 二维码的样式
            width: "400", // 二维码的宽度
            height: "400" // 二维码的高度
        });
        // **width和height不代表二维码的大小，二维码大小是固定的210px210px。
        var hanndleMessage = function (event) {	
            let {origin} = event;
            if (origin == "https://login.dingtalk.com") { //判断是否来自ddLogin扫码事件。
                let {data:loginTmpCode} = event; //拿到loginTmpCode后就可以在这里构造跳转链接进行跳转了
                // 通过JS获取到loginTmpCode后，需要由你构造并跳转到如下链接：
                // `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=APPID&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=REDIRECT_URI&loginTmpCode=loginTmpCode` 
                // 此链接处理成功后，会302跳转到你goto参数指定的redirect_uri，并向url参数中追加临时授权码code及state两个参数。
                window.location.href=`https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${this.AppKey}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${baseUrl}&loginTmpCode=${loginTmpCode}`
			}
        };
        if (typeof window.addEventListener != 'undefined') {
            window.addEventListener('message', hanndleMessage, false);
        } else if (typeof window.attachEvent != 'undefined') {
            window.attachEvent('onmessage', hanndleMessage);
        }

	}
};
</script>