关于钉钉集成的踩坑记录
开发准备
因为近期有一个项目要集成到钉钉上面去，所有做了一下钉钉对接方案的验证，总体来说官方的文档写得挺简单的，但是有些地方有些小坑，话不多说，直接开干。（钉钉官方文档：https://open-doc.dingtalk.com/microapp/dev）
在钉钉上的应用主要有三种：E应用、微应用、快捷链接，下面是他们的区别，快捷链接就是直接链接到你的系统或是网页，E应用需要下载官方的开发软件，该软件和微信小程序的开发软件类似，语法也类似。由于老大的要求，本次主要使用vue开发H5微应用
E应用微应用对比
E应用和微应用对比
E应用官方开发软件
E应用官方软件
接下来我们正式开始，首先在钉钉开放平台>应用开发 创建一个微应用
创建微应用
输入基本信息进入下一步，这里要注意服务器出口IP，就是调用服务端api的白名单ip，没有在这儿加上调用服务端api时就会没有权限，除了开发模式和开发应用类型，其他的后面都是可以改的
创建微应用
这个时候我们的微应用就创建成功了，我们可以进入微应用管理里拿到应用的基本信息
微应用详情
demo代码
到这里我们的准备工作就已经做完了，正式进入写代码阶段，首先就是进入一个微应用就是免登拿到用户信息的问题，首先来看看下面的官方文档
获取免登授权码
官方文档说的是获取免登授权码时，不需要进行鉴权，然而实测之后，==必须要鉴权之后才能进入dd.ready==,下面就直接上前端demo代码（其实代码都很简单，注意一些小坑就可以了，后端代码就不上了，一些简单的服务端api的调用也没有做具体的介绍，详情见官方文档微应用的免登流程）
<template>
<div class="wrapper">
微应用首页测试页面
</div>
</template>
<script>
import { mapActions } from "vuex";
import * as dd from "dingtalk-jsapi";
export default {
name: "",
data() {
return {
jsticket: 1,
code: null,
config: {}
};
},
mounted() {
this.getToken();
// alert(location.href)
const that = this
this.getConfig().then(data => {
this.config = eval("(" + data + ")");
console.log(that.config);
this.jsticket = that.config.agentid;
dd.config({
agentId: that.config.agentid, // 必填，微应用ID
corpId: that.config.corpId, //必填，企业ID
timeStamp: that.config.timeStamp, // 必填，生成签名的时间戳
nonceStr: that.config.nonceStr, // 必填，生成签名的随机串
signature: that.config.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"
]
})
dd.ready(function() {
alert('鉴权成功')
/*
*获得免登授权码，需要的参数为corpid，也就是企业的ID
*成功调用时返回onSuccess,返回值在function的参数info中，具体操作可以在function中实现
*返回失败时调用onFail
*/
alert(that.config.corpId)
dd.runtime.permission.requestAuthCode({
corpId: that.config.corpId,
onSuccess: function(info) {
alert(info.code)
const params = {
code: info.code
}
that.getUserDetail(params).then((data) => {
alert(JSON.stringify(data))
})
},
onFail: function(err) {
//获得code值失败
alert("fail: " + JSON.stringify(err));
}
});
});
// 在dd.that.config函数验证没有通过下执行这个函数
dd.error(function(err) {
alert("dd.config error: " + JSON.stringify(err));
});
});
},
methods: {
...mapActions(["getToken", "getConfig", "getUserDetail"])
}
};
</script>
<style lang="scss" scoped>
</style>
dd.config就是用来鉴权用的，鉴权所需要的参数agentId和corpId就是微应用里面的信息，签名信息需要后台调用服务端api获取，这里需要注意的是调用服务端api时所传的url，这里的==url是前端鉴权代码所在的页面的url==，前端可以通过location.href获取传给后端，或者定好之后后台直接写,不过直接写的话就会涉及到后面上线时要地址变化时就要更改，否者鉴权就不能通过。
后端获取签名信息
授权通过之后，就可以调用前端jsapi获取到临时授权码，而后端就可以通过临时授权码code和access_token拿到用户的usrid，再通过access_token和userid就可以拿到用户具体的详细数据，不过要注意，有些数据是需要通过授权才能拿到的，具体授权位置和原来的位置发生了变化，现在权限管理是在应用管理里面
微应用权限管理
总结
其他的像是消息推送和登录第三方网站就和上面类似了，主要需要注意下面几点
- 鉴权的url为前端的url，鉴权通过后才能进入dd.ready获取到临时授权码。
- 调用前端jsapi时只能在钉钉上测试，网页上不行。
- 服务端api若是调用不成功，要注意服务端ip地址是不是在白名单中，本地服务器测试的话，重启路由器后ip是会变的（这个坑踩得深）。
- 钉钉登录第三方网站时有两种方式：扫码登录、账号密码登录，但是它提供的账号密码登录是移动端的页面，不适合pc端，参考了一下其他的网站，例如：阿里云，pc端都只用了扫码登陆。
- 如果服务端api调用正确，返回‘没有权限’，那就去微应用管理看看权限哪些没给到。
PS：初次发文，可能会有些错误和不足，欢迎大家指出
