钉钉授权第三⽅WEB⽹站扫码登录
⼀、阅读开发⽂档
⾸先阅读钉钉官⽅的，扫码登录其实⽤的是官⽅⽂档描述的第⼆种⽅式，即将钉钉登录⼆维码内嵌到⾃⼰页⾯中，⽤户使⽤钉钉扫码登录第三⽅⽹站，⽹站可以拿到钉钉的
⽤户信息。
⼆、准备⼯作
你需要⼀个，以获取APPID；
你还需要你要登录的第三⽅⽹站的⽹址，以及⼀张⽹站logo图⽚的地址；
具体步骤：
1.注册成功后，登录，进⾏如下四步⾛，以获取APPID
2.创建要填写的⼀些相关信息。授权LOGO地址，建议就放你⽹站的logo好啦。
3.确定之后就会⽣成APPID和appSecret，先放着。appSecret后⾯拿取钉钉的⽤户信息会⽤到。
三、按照开发⽂档的步骤，实现扫码登录
1.在页⾯中先引⼊如下JS⽂件
<script src="g.alicdn/dingding/dinglogin/0.0.5/ddLogin.js"></script>
2.实例化JS对象
在html页⾯添加⼀个div
<div id="login_container"></div>
实例化
var obj = DDLogin({
id:"login_container",
goto: "oapi.dingtalk/connect/oauth2/sns_authorize?appid=APPID&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=REDIRECT_URI",
style: "border:none;background-color:#FFFFFF;",
width : "365",
height: "400"
});
注意上⾯代码红⾊字体部分，APPID就是之前获取到的，REDIRECT_URI就是你最后要跳转的第三⽅登录的⽹站的地址。回去取过来
还没有完，替换完成之后，goto：“”，双引号⾥⾯的部分要整体做⼀个
3.现在可以实例化之后添加下⾯这段代码
var hanndleMessage = function (event) {
var origin = igin;
console.log("origin", igin);
if( origin == "login.dingtalk" ) { //判断是否来⾃ddLogin扫码事件。
var loginTmpCode = event.data; //拿到loginTmpCode后就可以在这⾥构造跳转链接进⾏跳转了
console.log("loginTmpCode", loginTmpCode);
window.location.href=""+loginTmpCode
} }; if (typeof window.addEventListener != 'undefined') { window.addEventListener('message', hanndleMessage, false); } else if (typeof window.attachEvent != 'undefined') { window.attachEvent('onmessage', hanndleMessage); }
4.红⾊双引号⾥的值，看官⽅⽂档控制台会拿到的 loginTmpCode 的值，但是你要构造的那个链接 loginTmpCode 是变量，要拼接⼀下，这⾥url不⽤进⾏urlencode
编码。然后，你就可以测试⼀下页⾯，可以在看到⼀个⼆维码，⽤钉钉扫码会让你确认登录⽹页版的XXX。当你点击确定的时候，控制台会输出loginTmpCode，并且页⾯会跳
转到你的第三⽅⽹站。这个时候抬头看看你的地址栏，会追加的有⼀个code和state。拿好loginTmpCode和code，接下来读取钉钉⽤户信息会⽤到这些东西。
四、拿到钉钉的⽤户信息
1.以get请求的⽅式，请求这个地址。
oapi.dingtalk/sns/gettoken?appid=APPID&appsecret=APPSECRET
APPID 和 APPSECRET 眼熟吗？
2.好了，当你请求成功时应该返回如下，access_token 的值放好，我们会拿它接着获取永久授权码。还记得我们扫码成功后，跳转登录到第三⽅⽹站的url吗，它后⾯追加了
临时授权码code，这个code和access_token ⼀起就可以获得永久的授权码了。
{
"errcode": 0,
"access_token": "7155d0dca6fa3a489462e4407699c339",
"errmsg": "ok"
}
3.获取永久授权码。以post请求，请求这个地址
oapi.dingtalk/sns/get_persistent_code?access_token=ACCESS_TOKEN
post的参数如下
{
"tmp_auth_code": "9282c00fed0a3e2a88fea069a9fe5be4"
}
tmp_auth_code 的值就是追加到url上的code参数的值。请求成功返回如下
{
"errcode": 0,
"errmsg": "ok",
"unionid": "0wiiEFPtAF09FWcBg2iiygPwiEiE",
"openid": "EmuvN1jpiPwiipLtiSHBUmvcwiEiE",
"persistent_code": "oMOoqK0PEfTXvJSMlZIp8yU-IagK8-kJIVY5od8-8Y2ijlX367M9uRNUvisDAPtX"
}
请求到的这两个红⾊玩意的值，接下来要⽤来去获取⽤户授权的SNS_TOKEN
4.获取⽤户授权的SNS_TOKEN。以post请求，请求这个地址
oapi.dingtalk/sns/get_sns_token?access_token=ACCESS_TOKEN
这个 ACCESS_TOKEN 第⼀步的时候已经取到过了
post的传递参数如下
{
"openid": "EmuvN1jpiPwiipLtiSHBUmvcwiEiE",
"persistent_code": "oMOoqK0PEfTXvJSMlZIp8yU-IagK8-kJIVY5od8-8Y2ijlX367M9uRNUvisDAPtX"
}
红⾊玩意，刚刚才取到的呀。那么请求成功返回如下
{
"errcode": 0,
"errmsg": "ok",
"sns_token": "ea1e12af6ac23a2080178bb9a452b312",
"expires_in": 7200
}
最后⼀步了，⽤获取到的 sns_token 去拿⽤户信息，鸡冻~
5.拿⽤户信息。以get请求，请求这个地址
oapi.dingtalk/sns/getuserinfo?sns_token=SNS_TOKEN
请求成功返回如下
五、补充web端登录
1.
第四步中所有的操作都是在postman接⼝测试得来的，信誓旦旦的准备把代码敲起来，结果实际在前端请求会遇到跨域问题。所以需要通过后端获取token后再返回前端。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论