Vue3 对接钉钉开发平台近期公司的办公平台从飞书更换成钉钉，之前开发的企业内部应用登录等一些用户操作就需要同步迁移到钉

近期公司的办公平台从飞书更换成钉钉，之前开发的企业内部应用登录等一些用户操作就需要同步迁移到钉钉平台。本文记录下此次迁移流程以及碰到的一些bug。我们开发的是 h5 微应用，同时需要支持免登、三方登录、唤起钉钉打开微应用、会话通知等功能，开始的平台配置就不做过多描述，这些跟着钉钉开放平台应用开发文档走就可以。

引入钉钉api

1. npm 下载

npm install dingtalk-jsapi
import * as dd from 'dingtalk-jsapi';  // 引入钉钉api

2. cdn 引入

可以在开发文档找最新的

<script type="text/javascript" src="https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.3/dingtalk.open.js"></script>

1.钉钉免登

钉钉免登无需鉴权可直接调用，前提条件是在钉钉环境内。

a.判断是否在钉钉环境

let isDingTalk = dd.env.platform !== 'notInDingTalk'

b.免登

钉钉的获取设备信息不支持提供当前是移动端还是pc端，所以需要根据navigator.userAgent去判断。onFail方法必须写上，这样可以获取失败信息。

dd.ready(function () {
  dd.runtime.permission.requestAuthCode({
    corpId: import.meta.env.VITE_DING_TALK_CORP_ID, //企业id
    onSuccess: function (data) {
      // 通过该免登授权码可以获取用户身份
      console.log('免登code', data.code)
      login(data.code)
      // 判断是手机端还是 pc 端登录
      const isMobile = /Mobile/i.test(navigator.userAgent)
      if (isMobile) {
        localStorage.setItem('platform', 'mobile')
      } else {
        localStorage.setItem('platform', 'desktop')
      }
    },
    onFail: function (err) { }
  });
})

免登实现就这两步，还是很简单。需要注意一点，钉钉新老版本免登的 api 不一样，runtime.permission.requestAuthCode是老版本的，getAuthCode是新版本，参数名字不一样，其他的不变。

2.三方网站登录

a.在判断当前非钉钉环境，则代表需实现钉钉登录三方网站。

b.前端只需要关注 4, 6, 7。首先在应用平台的安全设置中配置重定向 URL，注意在微应用中所有可能用的到鉴权的页面必须全部加上，如果是 hash 路由可以忽略。

c.三方登录有两种模式。第一种是钉钉提供的页面登录授权，第二种是### 内嵌二维码方式登录授权。本项目使用的是第一种。

https://login.dingtalk.com/oauth2/auth? redirect_uri=https%3A%2F%2Fwww.aaaaa.com%2Fauth 
&response_type=code 
&client_id=dingxxxxxxx //应用的AppKey 
&scope=openid //此处的openId保持不变 
&state=dddd 
&prompt=consent

d.用户点击同意之后触发请求步骤四设置的第三方网站的回调域名，钉钉在url返回authCode.根据返回的 authCode调用接口去获取用户 token，实现获取用户个人信息

3.微应用内联系用户

需求是点击按钮直接跳转聊天界面，这里有一个大坑。钉钉移动端有会话 api 支持打开与某个用户的聊天页面，但是不支持pc端！！！。

a.移动端实现

在 h5 微应用中实现，必须完成鉴权后使用，注意入参大小写

// 配置JSAPI鉴权，基本设置信息都是由接口返回
dd.config({
  agentId: res.data.agentId,
  corpId: res.data.corpId,
  timeStamp: res.data.timeStamp,
  nonceStr: res.data.noceStr,
  signature: res.data.signature,
  jsApiList: ['openChatByUserId']
});
dd.error(function (err) {
  console.log('dd error: ' + JSON.stringify(err));
})
dd.ready(function () {
  dd.openChatByUserId({
    corpId: res.data.corpId,
    userId: resUser.data,
    success: () => {
      console.log('dd ready');
    },
    fail: (error) => {
      console.log('dd fail',error);
    }
  });
})

b.pc端实现

由于openChatByUserId不支持pc端，在查阅文档后，找到几个曲线救国的办法。

1： AppLink 协议

在 AppLink 协议中提供了一个打开个人详情页的方法。点击打开与 TA 联系后，会弹出弹框，点击发消息可以跳转过去

window.location.href = `https://applink.dingtalk.com/page/profile?phone=`

用户选择联系人，可支持多选；需要提供默认发送信息

 const url_params = {"sengMsgScene":true,"defaultMsg":"你好"}
 window.location.href = `https://applink.dingtalk.com/page/open_user_select?wnd_caption=请选择&url_param=${encodeURIComponent(JSON.stringify(url_params))}`

2：创建群会话

这个需要后端配合，因为会生成新的会话。创建群

Vue3 对接钉钉开发平台