钉钉二次开发分为如下表所示三种类型的开发，只有企业内部应用才需要对JSAPI鉴权。

类型	开发方式	JSAPI鉴权	应用场景
第三方企业应用	E应用开发	不需要	用于发布到钉钉应用市场，供广大用户下载，应用可选收费或免费，需要收取保证金，并进行应用审核
企业内部应用	H5开发，8月中旬也开始支持E应用开发	需要	只能企业内部应用，不能发布到钉钉市场
第三方个人应用	E应用开发	需要	应用与企业不挂钩，服务于个人

先来看一下钉钉官网给出的JSAPI鉴权的流程，它分为四个步骤：

获取token
获取ticket
获取数字签名
设置权限

查看钉钉开发文档，它给出了两个JSAPI的鉴权demo，分别是java和php的，需要前后端配合，而本文讲述的是纯前端JSAPI鉴权，完全实现前后端分离。

下面的代码将用到以下三个js依赖包：

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 await axios.get('/proxy/gettoken', {params}).then(function(response) {return response.data.access_token;});
}

细心的朋友会发现，axios请求的URL并没有直接指定 https://oapi.dingtalk.com/gettoken，这是因为直接写这个URL，会存在跨域问题，因此，这里我们用了代理。

代理可以采用nginx代理或者node代理，这里推荐用node代理。

因为需要代理的请求是https请求，本人也没跑通nginx代理https请求，如果有哪位朋友跑通了nginx代理的，麻烦告知一声，也学习以下。

2、设置代理

如果采用vue-cli创建的项目，可以直接在proxyTable中配置，如下：

　proxyTable: {'/proxy': {target: 'https://oapi.dingtalk.com',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: 'https://oapi.dingtalk.com',changeOrigin: true,pathRewrite: {'^/proxy': ''}}));
app.listen(3000);

这代码量是不是很少，随便百度下都搞定。

3、获取ticket

根据上面获取的access_token，从钉钉服务器获取ticket。

/*** 获取ticket信息* @param {Object} params {access_token}*/
async function getJsticket(params) {return await axios.get('/proxy/get_jsapi_ticket', {params}).then(function(response) {return response.data.ticket;});
}

4、获取数字签名

钉钉官网的demo是后台实现生成数字签名，通过crypto-js前端加密库就可以将这个功能移植到前端来。

ticket是上面生成的；

nonce可以是任何字符串；

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 + "&timestamp=" + timeStamp + "&url=" + url;let signature = CryptoJS.SHA1(plainTex).toString();return signature;
}

5、设置权限

通过dd.config设置需要的权限

// 步骤4：设置权限
    dd.config({agentId: agentId,corpId: corpid, //必填，企业IDtimeStamp: timeStamp, // 必填，生成签名的时间戳nonceStr: nonce, // 必填，生成签名的随机串signature: signature, // 必填，签名jsApiList: jsApiList // 必填，需要使用的jsapi列表，注意：不要带dd。});

jsApiList是权限列表，如：

var jsApiList = ['biz.user.get','device.geolocation.get','biz.util.uploadImage'
];

6、验证

上面配置成功之后，就能调用JSAPI中需要鉴权的功能了，下面以获取当前地理位置为例说明：

/*** 测试代码，通过调用位置服务，测试鉴权是否正确*/
function testJsApi() {// 获取位置dd.ready(() => {dd.device.geolocation.get({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))}});});// 查看鉴权错误信息dd.error(function(err) {alert('dd error: ' + JSON.stringify(err));});
}

如果鉴权失败，则dd.error将输出钉钉服务器采用的数字签名参数，可以与自己采用的参数做比较

附：串起来的代码

async function getAccessToken() {// 步骤1：获取tokenlet access_token = await getToken({corpid,corpsecret});// 步骤2：获取ticketlet ticket = await getJsticket({access_token});// 步骤3：获取数字签名let signature = getJsApiSingnature(ticket, nonce, timeStamp, url);// 步骤4：设置权限
    dd.config({agentId: agentId,corpId: corpid, //必填，企业IDtimeStamp: timeStamp, // 必填，生成签名的时间戳nonceStr: nonce, // 必填，生成签名的随机串signature: signature, // 必填，签名jsApiList: jsApiList // 必填，需要使用的jsapi列表，注意：不要带dd。
    });// 测试定位功能
    testJsApi();
}

钉钉JSAPI前端鉴权相关推荐

前端面试查漏补缺--(十) 前端鉴权
前言本系列最开始是为了自己面试准备的.后来发现整理越来越多,差不多有十二万字符,最后决定还是分享出来给大家. 为了分享整理出来,花费了自己大量的时间,起码是只自己用的三倍时间.如果喜欢的话,欢迎收藏 ...
前端鉴权必须了解的 5 个兄弟：cookie、session、token、jwt、单点登录
编辑:前端妹 | 来源:HenryLulu_几木链接:juejin.cn/post/6898630134530752520 本文你将看到: 基于 HTTP 的前端鉴权背景 cookie 为什么是最方 ...
鉴权html5服务器,前端鉴权知识学习
1.Cookie 指某些网站为了辨别用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密). HTTP是一种无状态传输协议,它不能以状态来区分和管理请求和响应.也就是说,服务器 ...
前端鉴权的10种方式
鉴权鉴权(Authentication) 在信息安全领域是指对于一个声明者所声明的身份权利,对其所声明的真实性进行鉴别确认的过程. 在it领域:校验session.cookie.token的合法性和 ...
前端开发：关于鉴权的使用总结
前言前端开发过程中,关于鉴权(权限的控制)是非常重要的内容,尤其是前端和后端之间数据传递时候的请求鉴权校验.前端鉴权的本质就是控制前端视图层的显示和前端向后台所发送的请求,但是只有前端鉴权,没有后端 ...
DingTalk「开发者说」第8期钉钉微应用开发实战
分享人:悦铭,钉钉H5微应用前端开发链路负责人视频地址:一键回看目录: 一.初识钉钉H5微应用二.H5微应用原理解析三.钉钉JSAPI使用与鉴权四.H5微应用开发五.H5的性能优化建议六 ...
钉钉轻应用PC免登5步曲
注意:使用钉钉js-api提供的获取免登授权码接口获取CODE,此jsapi无需鉴权,也就是说不必调用DingTalkPC.config鉴权了!!!(因为没太注意官方文档,被如此简单的东西困扰了大半天 ...
钉钉微应用php代码示例,钉钉微应用踩坑记录
一.要解决的问题: 钉钉微应用开发,应对未来可能的PC端使用场景:PC访问网页,工作台登陆后,通过钉钉服务端接口完成自身业务. 二.开发前准备: 根据官方文档,钉钉微应用PC端开发和移动端开发已经统一 ...
利用钉钉云盘实现业务系统需要的附件上传、下载和预览
本文主要记录自己在工作学习中遇到的坑和解决思路,仅供大家参考目录前言一.钉盘是什么? 二.为什么要使用钉盘? 三.JSAPI鉴权 1.鉴权的时机 2.鉴权的时效 3.鉴权的代码 3.1.获取ac ...

钉钉JSAPI前端鉴权