钉钉JSAPI 前端鉴权
钉钉⼆次开发分为如下表所⽰三种类型的开发，只有企业内部应⽤才需要对JSAPI 鉴权。
类型开发⽅式JSAPI 鉴权应⽤场景
第三⽅企业应⽤E 应⽤开发不需要⽤于发布到钉钉应⽤市
场，供⼴⼤⽤户下载，应
⽤可选收费或免费，需要
收取保证⾦，并进⾏应⽤
审核
企业内部应⽤H5开发，8⽉中旬也开始⽀持E 应⽤开发需要只能企业内部应⽤，不能
发布到钉钉市场
第三⽅个⼈应⽤E 应⽤开发需要
应⽤与企业不挂钩，服务
于个⼈先来看⼀下钉钉官⽹给出的JSAPI 鉴权的流程，它分为四个步骤：
1. 获取token
2. 获取ticket
3. 获取数字签名
4.
设置权限
查看钉钉开发⽂档，它给出了两个JSAPI 的鉴权demo ，分别是java 和php 的，需要前后端配合，⽽本⽂讲述的是纯前端JSAPI 鉴权，完全实现前后端分离。
import CryptoJS from 'crypto-js'; // 加密，⽤于⽣成数字签名
import * as dd from "dingtalk-jsapi"; // 钉钉JSAPI
import axios from "axios"; // HTTP请求
提⽰：下⾯的代码，⽤了ES6和ES7的⼀些语法，没接触过的朋友，可⾃⾏百度
1、获取token
⾸先根据corpid和corpsecret参数，从钉钉服务器获取token。
/**
* 获取token信息
* @param {Object} params {corpid, corpsecret}
*/
async function getToken(params) {
return ('/proxy/gettoken', {
params
})
.then(function(response) {
return response.data.access_token;
});
}
细⼼的朋友会发现，axios请求的URL并没有直接指定 oapi.dingtalk/gettoken，这是因为直接写这个URL，会存在跨域问题，因此，这⾥我们⽤了代理。
代理可以采⽤nginx代理或者node代理，这⾥推荐⽤node代理。
因为需要代理的请求是https请求，本⼈也没跑通nginx代理https请求，如果有哪位朋友跑通了nginx代理的，⿇烦告知⼀声，也学习以下。
2、设置代理
如果采⽤vue-cli创建的项⽬，可以直接在proxyTable中配置，如下：
　proxyTable: {
'/proxy': {
target: 'oapi.dingtalk',
secure: false,
// 设置跨域
changeOrigin: true,
pathRewrite: {
'^/proxy': ''
}
}
}
不过上⾯的配置只能在dev开发环境中使⽤，如果需要在⽣产环境中使⽤，还是需要⾃⼰写nodejs代码实现，如下：
var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();
app.use('/proxy', proxy({
target: 'oapi.dingtalk',
changeOrigin: true,
pathRewrite: {
'^/proxy': ''
}
}));
app.listen(3000);
这代码量是不是很少，随便百度下都搞定。
3、获取ticket
根据上⾯获取的access_token，从钉钉服务器获取ticket。
/**
* 获取ticket信息
* @param {Object} params {access_token}
*/
async function getJsticket(params) {
return ('/proxy/get_jsapi_ticket', {
})
.then(function(response) {
return response.data.ticket;
});
}
4、获取数字签名
钉钉官⽹的demo是后台实现⽣成数字签名，通过crypto-js前端加密库就可以将这个功能移植到前端来。
ticket是上⾯⽣成的；
nonce可以是任何字符串；
nginx部署前端项目timeStamp是当前时间戳；
url是当前访问的URL地址，不包括#及后⾯的部分，特别注意这个参数，别搞错了。如果设置错了，可以通过下⾯的dd.error输出查看钉钉服务器获取的URL地址
/**
* 获取签名信息
* @param {*} ticket
* @param {*} nonce
* @param {*} timeStamp
* @param {*} url
*/
function getJsApiSingnature(ticket, nonce, timeStamp, url) {
let plainTex = "jsapi_ticket=" + ticket + "&noncestr=" + nonce + "×tamp=" + timeStamp + "&url=" + url;
let signature = CryptoJS.SHA1(plainTex).toString();
return signature;
}
5、设置权限
通过dd.config设置需要的权限
// 步骤4：设置权限
agentId: agentId,
corpId: corpid, //必填，企业ID
timeStamp: timeStamp, // 必填，⽣成签名的时间戳
nonceStr: nonce, // 必填，⽣成签名的随机串
signature: signature, // 必填，签名
jsApiList: jsApiList // 必填，需要使⽤的jsapi列表，注意：不要带dd。
});
jsApiList是权限列表，如：
var jsApiList = [
'',
'',
'biz.util.uploadImage'
];
6、验证
上⾯配置成功之后，就能调⽤JSAPI中需要鉴权的功能了，下⾯以获取当前地理位置为例说明：
/
**
* 测试代码，通过调⽤位置服务，测试鉴权是否正确
*/
function testJsApi() {
// 获取位置
({
targetAccuracy: 200,
coordinate: 1,
withReGeocode: false,
useCache: true, //默认是true，如果需要频繁获取地理位置，请设置false,
onSuccess: result => {
/* ⾼德坐标 result 结构
longitude : Number,
latitude : Number,
accuracy : Number,
address : String,
province : String,
city : String,
district : String,
road : String,
netType : String,
operatorType : String,
errorMessage : String,
errorCode : Number,
isWifiEnabled : Boolean,
isGpsEnabled : Boolean,
isFromMock : Boolean,
provider : wifi|lbs|gps,
accuracy : Number,
isMobileEnabled : Boolean
}
*/
console.log(result)
alert("success: " + JSON.stringify(result))
},
onFail: err => {
console.log(err)
alert("error: " + JSON.stringify(err))
}
});
});
// 查看鉴权错误信息
<(function(err) {
alert('dd error: ' + JSON.stringify(err));
});
}
如果鉴权失败，则dd.error将输出钉钉服务器采⽤的数字签名参数，可以与⾃⼰采⽤的参数做⽐较
附：串起来的代码
async function getAccessToken() {
// 步骤1：获取token
let access_token = await getToken({
corpid,
corpsecret
});
/
/ 步骤2：获取ticket
let ticket = await getJsticket({
access_token
});
// 步骤3：获取数字签名
let signature = getJsApiSingnature(ticket, nonce, timeStamp, url);
// 步骤4：设置权限
agentId: agentId,
corpId: corpid, //必填，企业ID
timeStamp: timeStamp, // 必填，⽣成签名的时间戳
nonceStr: nonce, // 必填，⽣成签名的随机串
signature: signature, // 必填，签名
jsApiList: jsApiList // 必填，需要使⽤的jsapi列表，注意：不要带dd。
});
// 测试定位功能
testJsApi();
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。