###關(guān)于釘釘H5微應(yīng)用前端鑒權(quán)方法
1.安裝包
npm install --save crypto-js? // 加密，用于生成數(shù)字簽名
npm install dingtalk-jsapi --save? // 釘釘JSAPI
npm install axios --save? ? // HTTP請(qǐng)求
2.前端獲取code發(fā)送給后端,從而獲取用戶信息
你可以全局引入,也可以按需引入
import * as dd from "dingtalk-jsapi";
dd.ready(function() {
? dd.runtime.permission.requestAuthCode({
corpId: "xxx",
onSuccess: function(result) {
console.log(result.code)? ? ? ? ? ? ? ? ? ? //result.code就是獲取到的臨時(shí)code，只有五分鐘的權(quán)限時(shí)間
},
onFail : function(err) {
? console.log(err)
}?
? })
})
###.corpId 可以從開(kāi)發(fā)者管理員后臺(tái)中得到
### 當(dāng)前請(qǐng)求只能在釘釘環(huán)境下使用,如果在正常瀏覽器下訪問(wèn),會(huì)顯示當(dāng)前環(huán)境不符合,從而引發(fā)報(bào)錯(cuò)
3.獲取鑒權(quán)方式(前端)
### (如果你非要在前端請(qǐng)求的話)
1.第一步:獲取access_token,(這里需要appkey和appsecret)
appkey和appsecret實(shí)在開(kāi)發(fā)者管理后臺(tái)中可以得知
通過(guò)請(qǐng)求https://oapi.dingtalk.com/gettoken?appkey=xxxj&appsecret=xxx
### 但是切記這樣有兩個(gè)問(wèn)題? 1:安全性太低,這樣很容易被人通過(guò)抓包獲取到你的信息
2:這個(gè)請(qǐng)求需要跨域,如果靠前端做的話,開(kāi)發(fā)模式還沒(méi)問(wèn)題,但是生產(chǎn)模式下,需要后端幫忙做反向代理,
### 最終這樣會(huì)返回一個(gè) access_token 給你
2.第二步:需要通過(guò)獲取到的 access_token 再去獲取 jsapi_ticket,
###請(qǐng)求地址:https://oapi.dingtalk.com/get_jsapi_ticket?access_token=${this.token}
最終會(huì)返回一個(gè)ticket給你
3.第三步:需要給ticket加密,這樣釘釘那邊會(huì)通過(guò)你的加密方式,進(jìn)行解密(所以我懷疑釘釘后端用的也是這個(gè)加密方式)
### 引入加密的包
import CryptoJS from 'crypto-js';
getJsApiSingnature(ticket, nonce, timeStamp ,url) {??
let plainTex = "jsapi_ticket=" + ticket + "&noncestr=" + nonce + "×tamp=" + timeStamp + "&url=" + url;
let signature = CryptoJS.SHA1(plainTex).toString();
console.log(signature)
this.signature = signature
}
答疑解惑時(shí)間:
ticket:就是你獲取到的ticket,
nonce:是用來(lái)加密的隨機(jī)字符串, (需保存)
timeStamp:是當(dāng)前時(shí)間戳? (需保存)
url:是你當(dāng)前網(wǎng)頁(yè)的url地址? 可以通過(guò)window.location.href獲取,切記#及其后面的不需要,
所以還需要對(duì)獲取到的url地址進(jìn)行截取? a.split('#')[0]
4.第四步: 釘釘鑒權(quán)申請(qǐng)請(qǐng)求api權(quán)限,
dd.config({
agentId: 'XXX', // 必填，微應(yīng)用ID
corpId: 'XXX',//必填，企業(yè)ID
timeStamp: that.timeStamp, // 必填，生成簽名的時(shí)間戳
nonceStr: that.nonce, // 必填，生成簽名的隨機(jī)串
signature: that.signature, // 必填，簽名
type:0,? //選填。0表示微應(yīng)用的jsapi,1表示服務(wù)窗的jsapi；不填默認(rèn)為0。該參數(shù)從dingtalk.js的0.8.3版本開(kāi)始支持
jsApiList : [
'runtime.info',
'biz.contact.choose',
'device.notification.confirm',
'device.notification.alert',
'device.notification.prompt',
'biz.ding.post',
'biz.util.openLink',
'biz.contact.complexPicker'
] // 必填，需要使用的jsapi列表，注意：不要帶dd。
});
const that = this
dd.ready(function(){
dd.biz.contact.complexPicker({
title:"客戶分享",? ? ? ? ? ? //標(biāo)題
corpId:"XXX",? ? ? ? ? ? ? //企業(yè)的corpId
multiple:true,? ? ? ? ? ? //是否多選
limitTips:"超出了",? ? ? ? ? //超過(guò)限定人數(shù)返回提示
maxUsers:1000,? ? ? ? ? ? //最大可選人數(shù)
pickedUsers:[],? ? ? ? ? ? //已選用戶
pickedDepartments:[],? ? ? ? ? //已選部門
disabledUsers:[],? ? ? ? ? ? //不可選用戶
disabledDepartments:[],? ? ? ? //不可選部門
requiredUsers:[],? ? ? ? ? ? //必選用戶（不可取消選中狀態(tài)）
requiredDepartments:[],? ? ? ? //必選部門（不可取消選中狀態(tài)）
appId:XXX,? ? ? ? ? ? ? //微應(yīng)用的Id
permissionType:"GLOBAL",? ? ? ? ? //可添加權(quán)限校驗(yàn)，選人權(quán)限，目前只有GLOBAL這個(gè)參數(shù)
responseUserOnly:true,? ? ? ? //返回人，或者返回人和部門
startWithDepartmentId:0 ,? //僅支持0和-1
onSuccess: function(result) {
console.log(result)
let a = []
result.users.forEach(v=>{
????????a.push(v.emplId) //這個(gè)就是用戶工號(hào)
})
},
onFail : function(err) {
console.log(err)
}
});
})
最終就可以實(shí)現(xiàn)鑒權(quán)成功，調(diào)用你在jsApiList中存入的api方法
切記切記：只能在釘釘客戶端實(shí)現(xiàn)鑒權(quán)，在其他瀏覽器都會(huì)出現(xiàn)當(dāng)前環(huán)境不允許的錯(cuò)誤
