一、閱讀開發文檔

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

二、準備工作

　　你需要一個注冊釘釘的賬號，以獲取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

　　請求成功返回如下

五、補充

　　1.釘釘不支持前端跨域訪問

　　　　第四步中所有的操作都是在postman接口測試得來的，信誓旦旦的準備把代碼敲起來，結果實際在前端請求會遇到跨域問題。所以需要通過后端獲取token后再返回前端。

　

?

轉載于:https://www.cnblogs.com/vicky1018/p/9086171.html

總結

以上是生活随笔為你收集整理的钉钉授权第三方WEB网站扫码登录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。