一、閱讀開發(fā)文檔

　　首先閱讀釘釘官方的開發(fā)文檔，掃碼登錄其實(shí)用的是官方文檔描述的第二種方式，即將釘釘?shù)卿浂S碼內(nèi)嵌到自己頁面中，用戶使用釘釘掃碼登錄第三方網(wǎng)站，網(wǎng)站可以拿到釘釘?shù)挠脩粜畔ⅰ?/p>

二、準(zhǔn)備工作

　　你需要一個注冊釘釘?shù)馁~號，以獲取APPID；

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

　　具體步驟：

　　1.注冊成功后，登錄，進(jìn)行如下四步走，以獲取APPID

　

　　2.創(chuàng)建要填寫的一些相關(guān)信息。授權(quán)LOGO地址，建議就放你網(wǎng)站的logo好啦。

3.確定之后就會生成APPID和appSecret，先放著。appSecret后面拿取釘釘?shù)挠脩粜畔玫健?/p>

三、按照開發(fā)文檔的步驟，實(shí)現(xiàn)掃碼登錄

　　1.在頁面中先引入如下JS文件

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

　　2.實(shí)例化JS對象

在html頁面添加一個div

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

實(shí)例化

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就是你最后要跳轉(zhuǎn)的第三方登錄的網(wǎng)站的地址。回去取過來

還沒有完，替換完成之后，goto：“”，雙引號里面的部分要整體做一個urlencode編碼

3.現(xiàn)在可以實(shí)例化之后添加下面這段代碼

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后就可以在這里構(gòu)造跳轉(zhuǎn)鏈接進(jìn)行跳轉(zhuǎn)了
            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 的值，但是你要構(gòu)造的那個鏈接loginTmpCode是變量，要拼接一下，這里url不用進(jìn)行urlencode編碼。然后，你就可以測試一下頁面，可以在看到一個二維碼，用釘釘掃碼會讓你確認(rèn)登錄網(wǎng)頁版的XXX。當(dāng)你點(diǎn)擊確定的時候，控制臺會輸出loginTmpCode，并且頁面會跳轉(zhuǎn)到你的第三方網(wǎng)站。這個時候抬頭看看你的地址欄，會追加的有一個code和state。拿好loginTmpCode和code，接下來讀取釘釘用戶信息會用到這些東西。

四、拿到釘釘?shù)挠脩粜畔?/h1>

　　1.以get請求的方式，請求這個地址。

https://oapi.dingtalk.com/sns/gettoken?appid=APPID&appsecret=APPSECRET

　　APPID 和 APPSECRET 眼熟嗎？

　　2.好了，當(dāng)你請求成功時應(yīng)該返回如下，access_token 的值放好，我們會拿它接著獲取永久授權(quán)碼。還記得我們掃碼成功后，跳轉(zhuǎn)登錄到第三方網(wǎng)站的url嗎，它后面追加了臨時授權(quán)碼code，這個code和access_token 一起就可以獲得永久的授權(quán)碼了。

{
    "errcode": 0,
    "access_token": "7155d0dca6fa3a489462e4407699c339",
    "errmsg": "ok"
}

　　3.獲取永久授權(quán)碼。以post請求，請求這個地址

https://oapi.dingtalk.com/sns/get_persistent_code?access_token=ACCESS_TOKEN

　　post的參數(shù)如下

{
    "tmp_auth_code": "9282c00fed0a3e2a88fea069a9fe5be4"
}

　　tmp_auth_code 的值就是追加到url上的code參數(shù)的值。請求成功返回如下

{
    "errcode": 0,
    "errmsg": "ok",
    "unionid": "0wiiEFPtAF09FWcBg2iiygPwiEiE",
    "openid": "EmuvN1jpiPwiipLtiSHBUmvcwiEiE",
    "persistent_code": "oMOoqK0PEfTXvJSMlZIp8yU-IagK8-kJIVY5od8-8Y2ijlX367M9uRNUvisDAPtX"
}

　　請求到的這兩個紅色玩意的值，接下來要用來去獲取用戶授權(quán)的SNS_TOKEN

　　4.獲取用戶授權(quán)的SNS_TOKEN。以post請求，請求這個地址

https://oapi.dingtalk.com/sns/get_sns_token?access_token=ACCESS_TOKEN

　　這個 ACCESS_TOKEN 第一步的時候已經(jīng)取到過了

　　post的 傳遞參數(shù)如下

{
    "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

　　請求成功返回如下

五、補(bǔ)充

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

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

　

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。