钉钉H5微应用调用钉钉api,如何实现鉴权

###关于钉钉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方法
【钉钉H5微应用调用钉钉api,如何实现鉴权】切记切记:只能在钉钉客户端实现鉴权,在其他浏览器都会出现当前环境不允许的错误

    推荐阅读