第一步:首先我们应该登录钉钉开发者后台:
login.dingtalk.com/oauth2/chal…进行登录
第二步:选择个人应用:
这是自己重新创建的一个企业组织,开发者模式必须自己是管理者才可以有权限进行管理
第三步:创建个人组织:(此处如果你是公司组织管理者权限的话,可以直接进行第四步啦)
如何创建一个自己的个人组织呢:①:打开钉钉pc端登录自己的钉钉点击左上角图标
按步骤一步一步操作
完善信息:
组织组建完成后的页面:
第四步:选择个人企业组织
现在就可以回到钉钉开发者后台去选择自己的企业组织了,当然咱们如果是企业工作的话则需要自己该企业的管理员权限就可以进行开发了
选择自己的组织进入之后
第五步:查看个人应用
进去之后看到的是我已经创建好了的应用,记住CorpId:组织id很重要,后面会用到钉钉免登录的
第六步:创建应用:
①如图:
②:选择创建
按步骤红框中所选执行:
点击确定创建之后出现如下页面:
第七步:修改应用信息:
这两个就是服务器得地址以及我们应用首页的地址,记得路由名写全
第八步:去钉钉客户端将个人应用存放到工作台首页
去钉钉客户端将个人应用存放到工作台首页
这样我们就把自己的h5微应用挂载到了自己手机钉钉工作台上了,我们可以去钉钉工作台l里查找新创建的应用了
点击进去就可以进去我们自己的应用首页去了
第九步:安装钉钉插件
现在我们该做什么呢,就是我们虽然可以在钉钉上打开自家的应用了,但我们如果在自家应用当中获取钉钉用户信息怎么办呢,那就得回到我刚刚说的企业组件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码:
代码如下:
getCode() {\
let vm = this;\
vm.$dd.ready(function () {\
vm.$dd.runtime.permission.requestAuthCode({\
corpId: "", // 企业id\
onSuccess: function (info) {\
console.log(info.code, "获取用户信息钉钉的code值");\
// vm.dingCode = info.code;\
vm.GetUserInfo(info.code);\
},\
onFail: function (err) {\
console.log(err, "钉钉的code值失败");\
},\
});\
});\
},
这里为什么要加个判断呢是因为会报错,这里涉及到一个问题,就是我们这一段代码只能在钉钉工作台打开之后跳转到自己微应用页面之后才会执行,否则会报错,因为涉及到了钉钉环境的问题了;所以不好调试,所以就得自己去实现钉钉真机调试等问题了,不然就只能自己手机去一步一步操作,很麻烦
if (this.$dd.env.platform !== "notInDingTalk") {\
//进行钉钉免登录操作\
this.getCode();\
}
我们获取到钉钉免登录code值之后就要和公司自己的后端接接口,来获取用户信息了,具体操作就是公司内部需求了,因为我们获取到的钉钉code码是要传给后端的,之后一切就是获取用户信息了,所以钉钉集成微应用就到此结束了。谢谢各位的观看,如有疑惑可联系本人,如有错误也望指教,在此拜谢