釘釘授權第三方WEB網站掃碼登錄
一、閱讀開發文檔
首先閱讀釘釘官方的開發文檔,掃碼登錄其實用的是官方文檔描述的第二種方式,即將釘釘登錄二維碼內嵌到自己頁面中,用戶使用釘釘掃碼登錄第三方網站,網站可以拿到釘釘的用戶信息。
二、準備工作
你需要一個註冊釘釘的賬號,以獲取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
- 註意上面代碼紅色字體部分,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網站掃碼登錄