钉钉对接

发表于 | 分类于
钉钉对接

前言

开放平台地址

https://open-dev.dingtalk.com/

开发模式分为三种

  1. 企业内部开发 企业内部使用
  2. 第三方企业应用 可上架市场 需要成为产品方案服务商
  3. 第三方个人应用 不能上架市场

应用的几种模式

  • 钉钉搭
  • 小程序
  • 微应用
  • 酷应用

对比

方式 技术 位置
钉钉搭 无需开发 工作台
小程序 小程序 工作台
微应用 WEB 工作台
酷应用 WEB 聊天界面

微应用开发

https://open.dingtalk.com/document/resourcedownload/local-development-tools-for-microapplications

1)执行以下命令，安装DingTalk-Design-CLI。

1
npm i dingtalk-design-cli@0.20.4 -g

2)执行以下命令，查看是否已经成功安装DingTalk-Design-CLI。

1
ding -v

3)执行以下命令，初始化代码模版到本地。

1
ding init -o h5Test -a h5 -t h5_jsapi_component_demo_vue -l javascript

启动本地开发、调试

1
2
cd h5Test
ding dev web

前端框架使用的是vant

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

JS-API

官方示例网址

https://open-dev.dingtalk.com/apiExplorer?spm=ding_open_doc.document.0.0.74454945j0lPmD#/jsapi?api=device.notification.extendModal

添加依赖

1
2
3
4
5
6
7
"dependencies": {
    "core-js": "^3.6.5",
    "dingtalk-jsapi": "^2.13.71",
    "vant": "^2.12.38",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
},

引用

1
import * as dd from 'dingtalk-jsapi'

使用

1
2
3
dd.biz.calendar.chooseDateTime({
    default: 1522022400000,
});

免密登录

https://open.dingtalk.com/document/tutorial/dingtalk-logon-free-third-party-websites?spm=ding_open_doc.21783679.J_8506627640.4.72994ce9LF07Cj

部署模式

前端和后台都部署到自有的服务器上

开发管理中设置访问的地址

image-20230324100408924

修改地址后，在钉钉开放平台中的部署与发布中发布即可。

内网穿透

打开命令行工具，执行以下命令，下载内网穿透工具。

1
git clone https://github.com/open-dingtalk/pierced.git

开启

1
2
cd ./pierced/windows_64
ding -config=ding.cfg -subdomain=psvmc 8080

启动完客户端后，你访问http://psvmc.vaiwan.cn/login都会映射到http://127.0.0.1:8080/login

测试

http://psvmc.vaiwan.cn/login

服务端

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const Koa = require('koa')
const Router = require('koa-router')
var bodyParser = require('koa-bodyparser');

const app = new Koa()
const router = new Router()

//routes()返回路由器中间件，它调度与请求匹配的路由。
//allowedMethods()处理的业务是当所有路由中间件执行完成之后,若ctx.status为空或者404的时候,丰富response对象的header头.
app.use(router.routes()).use(router.allowedMethods());
app.use(bodyParser());

router.get('/', (ctx, next) => { //.get就是发送的get请求
  ctx.response.body = '<h1>首页</h1>'
})
router.get('/login', (ctx, next) => {
  ctx.response.body = '{"code":0}'
})

router.get('/user/:id', (ctx) => {
  ctx.body = `<h1>这是用户 ${ctx.params.id}</h1>`
})

app.listen(8080)

安装依赖

1
2
3
npm i koa --save
npm install koa-router --save
npm install --save koa-bodyparser

运行

1
node main.js

我们就可以访问

http://localhost:8080/login

测试

1
https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingfrgjr2hnzpy6ubzu&response_type=code&scope=snsapi_auth&state=STATE&redirect_uri=http://psvmc.vaiwan.cn/login