###关于钉钉H5微应用前端鉴权方法
1.安装包
npm install --save crypto-js // 加密，用于生成数字签名
npm install dingtalk-jsapi --save // 钉钉JSAPI
npm install axios --save // HTTP请求
2.前端获取code发送给后端,从而获取用户信息
你可以全局引入,也可以按需引入
import * as dd from "dingtalk-jsapi";
dd.ready(function() {
dd.runtime.permission.requestAuthCode({
corpId: "xxx",
onSuccess: function(result) {
console.log(result.code) //result.code就是获取到的临时code，只有五分钟的权限时间
},
onFail : function(err) {
console.log(err)
}
})
})
###.corpId 可以从开发者管理员后台中得到
### 当前请求只能在钉钉环境下使用,如果在正常浏览器下访问,会显示当前环境不符合,从而引发报错
3.获取鉴权方式(前端)
### (如果你非要在前端请求的话)
1.第一步:获取access_token,(这里需要appkey和appsecret)
appkey和appsecret实在开发者管理后台中可以得知
通过请求https://oapi.dingtalk.com/gettoken?appkey=xxxj&appsecret=xxx
### 但是切记这样有两个问题 1:安全性太低,这样很容易被人通过抓包获取到你的信息
2:这个请求需要跨域,如果靠前端做的话,开发模式还没问题,但是生产模式下,需要后端帮忙做反向代理,
### 最终这样会返回一个 access_token 给你
2.第二步:需要通过获取到的 access_token 再去获取 jsapi_ticket,
###请求地址:https://oapi.dingtalk.com/get_jsapi_ticket?access_token=${this.token}
最终会返回一个ticket给你
3.第三步:需要给ticket加密,这样钉钉那边会通过你的加密方式,进行解密(所以我怀疑钉钉后端用的也是这个加密方式)
### 引入加密的包
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
}
答疑解惑时间:
ticket:就是你获取到的ticket,
nonce:是用来加密的随机字符串, (需保存)
timeStamp:是当前时间戳 (需保存)
url:是你当前网页的url地址 可以通过window.location.href获取,切记#及其后面的不需要,
所以还需要对获取到的url地址进行截取 a.split('#')[0]
4.第四步: 钉钉鉴权申请请求api权限,
dd.config({
agentId: 'XXX', // 必填，微应用ID
corpId: 'XXX',//必填，企业ID
timeStamp: that.timeStamp, // 必填，生成签名的时间戳
nonceStr: that.nonce, // 必填，生成签名的随机串
signature: that.signature, // 必填，签名
type:0, //选填。0表示微应用的jsapi,1表示服务窗的jsapi；不填默认为0。该参数从dingtalk.js的0.8.3版本开始支持
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:"客户分享", //标题
corpId:"XXX", //企业的corpId
multiple:true, //是否多选
limitTips:"超出了", //超过限定人数返回提示
maxUsers:1000, //最大可选人数
pickedUsers:[], //已选用户
pickedDepartments:[], //已选部门
disabledUsers:[], //不可选用户
disabledDepartments:[], //不可选部门
requiredUsers:[], //必选用户（不可取消选中状态）
requiredDepartments:[], //必选部门（不可取消选中状态）
appId:XXX, //微应用的Id
permissionType:"GLOBAL", //可添加权限校验，选人权限，目前只有GLOBAL这个参数
responseUserOnly:true, //返回人，或者返回人和部门
startWithDepartmentId:0 , //仅支持0和-1
onSuccess: function(result) {
console.log(result)
let a = []
result.users.forEach(v=>{
a.push(v.emplId) //这个就是用户工号
})
},
onFail : function(err) {
console.log(err)
}
});
})
最终就可以实现鉴权成功，调用你在jsApiList中存入的api方法
切记切记：只能在钉钉客户端实现鉴权，在其他浏览器都会出现当前环境不允许的错误
