掃碼登錄第三方網站
使用釘釘客戶端掃碼並確認登錄您的web系統，在您的系統內獲得正在訪問用戶的釘釘身份，而用戶無需輸入賬戶密碼。
注意：此功能與企業自建應用/第三方企業應用無關，只能用掃碼登錄打開第三方網站，並且不是釘釘內的應用免登，此流程只能做到獲取到用戶身份（無手機號和企業相關信息）。
獲取appId及appSecret
點擊進入釘釘開發者平台 的頁面，點擊左側菜單的【移動接入應用-登錄】，然后點擊右上角的【創建掃碼登錄應用授權】，創建用於免登過程中驗證身份的appId及appSecret，創建后即可看到appId和appSecret。
點擊創建掃碼登錄應用授權
確定之后就會生成APPID和appSecret，先放着。appSecret后面拿取釘釘的用戶信息會用到。
按照開發文檔的步驟，實現掃碼登錄
- 在頁面中先引入如下js文件
<script src="http://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
2.實例化JS對象
<template>
<div id="login_container"></div> // 存放二維碼的div
</template>
<script>
export default {
mounted(){
let appId = '******' // appId 點擊創建掃碼登錄應用授權生成
let baseUrl = encodeURIComponent('****') // 回調域名：掃碼成功跳轉的url，需要進行編碼
let url = encodeURIComponent(
`https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appId}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${baseUrl}`
) // goto參數,需要進行編碼
var obj = DDLogin({
id: "login_container", //這里需要你在自己的頁面定義一個HTML標簽並設置id，例如<div id="login_container"></div>或<span id="login_container"></span>
goto: url, // 轉碼后的url
style: "border:none;background-color:#FFFFFF;", // 二維碼的樣式
width: "365", // 二維碼的寬度
height: "400" // 二維碼的高度
});
// **width和height不代表二維碼的大小，二維碼大小是固定的210px210px。
var hanndleMessage = function (event) {
let {origin} = event;
if (origin == "https://login.dingtalk.com") { //判斷是否來自ddLogin掃碼事件。
let {data:loginTmpCode} = event; //拿到loginTmpCode后就可以在這里構造跳轉鏈接進行跳轉了
// 通過JS獲取到loginTmpCode后，需要由你構造並跳轉到如下鏈接：
// `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=APPID&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=REDIRECT_URI&loginTmpCode=loginTmpCode`
// 此鏈接處理成功后，會302跳轉到你goto參數指定的redirect_uri，並向url參數中追加臨時授權碼code及state兩個參數。
window.location.href=`https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appId}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${baseUrl}&loginTmpCode=${loginTmpCode}` //
}
};
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', hanndleMessage, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onmessage', hanndleMessage);
}
}
}
</script>
參數說明
| 參數 | 說明 |
|---|---|
| goto | goto參數結構：https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=APPID&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=REDIRECT_URI，並且要將goto參數urlencode編碼。 |
| style | 渲染二維碼的區域的樣式，可以自定義去除背景顏色和邊框 |
| width | 表示顯示二維碼的區域的寬 |
| height | 表示顯示二維碼的區域的高 |
拿到釘釘的用戶信息
1.以get請求的方式，請求這個地址。
https://oapi.dingtalk.com/sns/gettoken?appid=APPID&appsecret=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
請求成功返回如下
