记一次公司内部应用集成至钉钉的需求

520 阅读2分钟

第一步:首先我们应该登录钉钉开发者后台:

login.dingtalk.com/oauth2/chal…进行登录

QQ图片20220217112807.png

第二步:选择个人应用:

QQ图片20220217112955.png 这是自己重新创建的一个企业组织,开发者模式必须自己是管理者才可以有权限进行管理

第三步:创建个人组织:(此处如果你是公司组织管理者权限的话,可以直接进行第四步啦)

如何创建一个自己的个人组织呢:①:打开钉钉pc端登录自己的钉钉点击左上角图标

QQ图片20220217113137.png 按步骤一步一步操作

QQ图片20220217113141.png 完善信息:

QQ图片20220217113232.png 组织组建完成后的页面:

QQ图片20220217113351.png

第四步:选择个人企业组织

现在就可以回到钉钉开发者后台去选择自己的企业组织了,当然咱们如果是企业工作的话则需要自己该企业的管理员权限就可以进行开发了

QQ图片20220217113313.png 选择自己的组织进入之后

第五步:查看个人应用

进去之后看到的是我已经创建好了的应用,记住CorpId:组织id很重要,后面会用到钉钉免登录的

QQ图片20220217113512.png

第六步:创建应用:

①如图:

1OAUB6NH(E0}CR9F7D`$Y~A.png

②:选择创建

{_ICV)49{ROE`X%%CI6ZAO7.png 按步骤红框中所选执行:

点击确定创建之后出现如下页面: V]DP7K%BA5TFKWPQZ0KPV.png

第七步:修改应用信息:

QQ图片20220217114934.png 这两个就是服务器得地址以及我们应用首页的地址,记得路由名写全

QQ图片20220217114941.png

第八步:去钉钉客户端将个人应用存放到工作台首页

去钉钉客户端将个人应用存放到工作台首页

这样我们就把自己的h5微应用挂载到了自己手机钉钉工作台上了,我们可以去钉钉工作台l里查找新创建的应用了

FIK26MB@N(ZC$$I0S7PLI14.png

点击进去就可以进去我们自己的应用首页去了

第九步:安装钉钉插件

现在我们该做什么呢,就是我们虽然可以在钉钉上打开自家的应用了,但我们如果在自家应用当中获取钉钉用户信息怎么办呢,那就得回到我刚刚说的企业组件CorpId了

接下来就是代码了:

第一步首先我们要安装钉钉插件

npm i dingtalk-jsapi 

第二步:钉钉集成实现接通钉钉插件

①:钉钉集成实现接通钉钉插件

import dd from "dingtalk-jsapi";

②:将其挂载到vue上:

Vue.prototype.$dd = dd;

③:钉钉集成实现接通钉钉插件

import dd from "dingtalk-jsapi";

将其挂载到vue上:

④:Vue.prototype.$dd = dd;

第十步:在我们的应用首页組件當中当中去获取code码:

在我们的应用首页組件當中当中去获取code码:

QQ图片20220217123941.png 代码如下:

getCode() {\
      let vm = this;\
      vm.$dd.ready(function () {\
        vm.$dd.runtime.permission.requestAuthCode({\
          corpId""// 企业id\
          onSuccessfunction (info) {\
            console.log(info.code"获取用户信息钉钉的code值");\
            // vm.dingCode = info.code;\
            vm.GetUserInfo(info.code);\
          },\
          onFailfunction (err) {\
            console.log(err, "钉钉的code值失败");\
          },\
        });\
      });\
    },

这里为什么要加个判断呢是因为会报错,这里涉及到一个问题,就是我们这一段代码只能在钉钉工作台打开之后跳转到自己微应用页面之后才会执行,否则会报错,因为涉及到了钉钉环境的问题了;所以不好调试,所以就得自己去实现钉钉真机调试等问题了,不然就只能自己手机去一步一步操作,很麻烦

QQ图片20220217124139.png

if (this.$dd.env.platform !== "notInDingTalk") {\
      //进行钉钉免登录操作\
      this.getCode();\
    }

我们获取到钉钉免登录code值之后就要和公司自己的后端接接口,来获取用户信息了,具体操作就是公司内部需求了,因为我们获取到的钉钉code码是要传给后端的,之后一切就是获取用户信息了,所以钉钉集成微应用就到此结束了。谢谢各位的观看,如有疑惑可联系本人,如有错误也望指教,在此拜谢