钉钉受权第三方WEB网站扫码登陆

1、阅读开发文档

　　首先阅读钉钉官方的开发文档，扫码登陆其实用的是官方文档描述的第二种方式，即将钉钉登陆二维码内嵌到本身页面中，用户使用钉钉扫码登陆第三方网站，网站能够拿到钉钉的用户信息。

2、准备工做

　　你须要一个注册钉钉的帐号，以获取APPID；

　　你还须要你要登陆的第三方网站的网址，以及一张网站logo图片的地址；

　　具体步骤：

　　1.注册成功后，登陆，进行以下四步走，以获取APPID

　

　　2.建立要填写的一些相关信息。受权LOGO地址，建议就放你网站的logo好啦。

 3.肯定以后就会生成APPID和appSecret，先放着。appSecret后面拿取钉钉的用户信息会用到。

3、按照开发文档的步骤，实现扫码登陆

　　1.在页面中先引入以下JS文件

<script src="http://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>

　　2.实例化JS对象

• 在html页面添加一个div

• <div id="login_container"></div>
  

• 实例化

• var obj = DDLogin({
       id:"login_container",
       goto: "https://oapi.dingtalk.com/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：“”，双引号里面的部分要总体作一个urlencode编码

3.如今能够实例化以后添加下面这段代码

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=""+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，接下来读取钉钉用户信息会用到这些东西。

4、拿到钉钉的用户信息

　　1.以get请求的方式，请求这个地址。

https://oapi.dingtalk.com/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请求，请求这个地址

https://oapi.dingtalk.com/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请求，请求这个地址

https://oapi.dingtalk.com/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请求，请求这个地址

https://oapi.dingtalk.com/sns/getuserinfo?sns_token=SNS_TOKEN

　　请求成功返回以下

5、补充

　　1.钉钉不支持前端跨域访问

　　　　第四步中全部的操做都是在postman接口测试得来的，信誓旦旦的准备把代码敲起来，结果实际在前端请求会遇到跨域问题。因此须要经过后端获取token后再返回前端。