本文介绍了如何使用Node.js和Vue.js实现钉钉第三方扫码登录。首先，你需要在钉钉注册并获取APPID。接着，通过前端代码配置APPID和回调域名，利用Postman测试钉钉接口，获取access_token、授权码和用户信息。在Node.js后台搭建接口，调用这些接口。然后，在Vue工程中整合前端代码，处理DDLogin方法的调用问题。实操中，扫码登录成功后，刷新页面会导致一次性code失效，需要注意错误处理。
准备工作
-
你需要一个自己的团队，或则某个团队你有管理权限，否则注册个吧，注册钉钉的账号，以获取APPID；https://oa.dingtalk.com/register.html)，
-
获取AAPID
-
使用旧版本的页面
-
移动接入应用 → 登陆 → 创建扫码登陆应用授权
-
确认后
-
前端代码相关
官方文档地址：https://developers.dingtalk.com/document/app/scan-qr-code-to-log-on-to-third-party-websites?spm=a2q3p.21071111.0.0.18711cfa4kzCXi
APPID：为上图创建的appld
REDIRECT_URI:为回调域名
随便建一个index.htm文件（下面有vue工程实践完整代码,以及nodeJs接口的实现）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
</head>
<body>
<div id="login_container"></div>
<script>
let APPID = "dingoarrgitdv8zv6z9l4r"
// let REDIRECT_URI = encodeURIComponent("http://127.0.0.1:8080/")
let REDIRECT_URI = "http://127.0.0.1:8080/"
let goto = `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${
APPID}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${
REDIRECT_URI}`
console.log('goto',goto)
var obj = DDLogin({
id: "login_container",
goto: encodeURIComponent(goto),
style: "border:none;background-color:#FFFFFF;",
width: "365",
height: "400"
});
var hanndleMessage = function (event) {
var origin = event.origin;
console.log("origin", event.origin);
if (origin == "https://login.dingtalk.com") {
//判断是否来自ddLogin扫码事件。
var loginTmpCode = event.data; //拿到loginTmpCode后就可以在这里构造跳转链接进行跳转了
console.log("loginTmpCode", loginTmpCode);
window.location.href = goto + '&loginTmpCode='+loginTmpCode
}
};
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', hanndleMessage, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onmessage', hanndleMessage);
}
</script>
</body>
</html>
postmen工具测试钉钉接口
- 获取access_token（get访问）
https://oapi.dingtalk.com/sns/gettoken?appid=APPID&appsecret=APPSECRET
接口反馈:
{
"errcode": 0,
"access_token": "9c971e5a98839cda1fb33359bda8ade7",
"errmsg": "ok"
}
- 获取永久授权码（post访问）
https://oapi.dingtalk.com/sns/get_persistent_code?access_token=ACCESS_TOKEN
ACCESS_TOKEN ==
最低0.47元/天 解锁文章
扫一扫
3230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
