一、閱讀開發文檔

　　首先閱讀釘釘官方的開發文檔，掃碼登錄其實用的是官方文檔描述的第二種方式，即將釘釘登錄二維碼內嵌到自己頁面中，用戶使用釘釘掃碼登錄第三方網站，網站可以拿到釘釘的用戶信息。

二、準備工作

　　你需要一個註冊釘釘的賬號，以獲取APPID；

　　你還需要你要登錄的第三方網站的網址，以及一張網站logo圖片的地址；

　　具體步驟：

　　1.註冊成功後，登錄，進行如下四步走，以獲取APPID

　　2.創建要填寫的一些相關信息。授權LOGO地址，建議就放你網站的logo好啦。

3.確定之後就會生成APPID和appSecret，先放著。appSecret後面拿取釘釘的用戶信息會用到。

三、按照開發文檔的步驟，實現掃碼登錄

　　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，接下來讀取釘釘用戶信息會用到這些東西。

四、拿到釘釘的用戶信息

　　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

　　請求成功返回如下

釘釘授權第三方WEB網站掃碼登錄