釘釘受權第三方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後再返回前端。