钉钉企业内部H5微应用、免登流程与真机调试

时间:2024-04-02 07:45:32

官方文档: https://ding-doc.dingtalk.com/

项目作为企业内部应用-H5微应用接入。

免登

官方免登流程文档:https://ding-doc.dingtalk.com/doc#/dev/ep7bpq

简单来说,前端通过钉钉提供的npm包dingtalk-jsapi,来获取钉钉的免登授权码(code),将免登授权码传给后端,后端就有办法得到钉钉的用户信息。

后端逻辑 https://ding-doc.dingtalk.com/doc#/serverapi2/clotub

后端逻辑简介:调用钉钉openApi获取access_token,使用这个accesss_token请求另一个openApi,带上前端传的免登授权码(code)得到钉钉的用户信息。

项目的登录页面也进行钉钉的适配,通过钉钉打开登录页面后,会自动向后端发送一次免登授权码(code)

后端通过免登授权码(code)获取到钉钉的用户唯一uid后,判断是否存在该uid关联的用户

  1. 不存在:返回给前端一个标志,前端显示登录表单,用户手动登录,将账号密码与code一同发送给后端,后端账号密码校验通过后,获取钉钉用户uid,存入数据库与系统用户形成一对一的关联关系。(一个uid对应一个系统用户。ps:多人登录一个系统用户,会不断更新关联关系,原可以免登的钉钉用户,将不能免登。)
  2. 存在:后端通过code获取钉钉用户uid后,查询到系统关联的用户,然后做一次“登录”操作(具体看后端实现)。

注意点:

1.必须要在钉钉的环境下打开网页,dingtalk-jsapi才会起作用,否则会报错不在钉钉环境

钉钉企业内部H5微应用、免登流程与真机调试

 

2.免登授权码(code)只能使用一次,理清楚请求逻辑,每次请求都需要重新获取code,防止后端获取不到用户信息。

 

JS-API

jsapi总览:https://ding-doc.dingtalk.com/doc#/dev/swk0bg

jsapi提供了有关钉钉应用的一些交互,有许多jsapi需要jsapi鉴权,需要鉴权的api别忘了在钉钉配置中增加jsapi的名称。

钉钉企业内部H5微应用、免登流程与真机调试

 

JS-API鉴权

https://ding-doc.dingtalk.com/doc#/dev/uwa7vs

主要需要后端配合计算出签名signature后,将计算签名所用的url,nonceStr,agentId,timeStamp,corpId和signature传递到前端页面,在前端HTML5页面使用dd.config接口进行签名校验(agentId和corpId前端其实有配置,不过后端返回更好)

dd.conf鉴权成功后,这些jsApi就和获取免登授权码一样使用就可以了

 

钉钉开发实机调试

使用安卓手机或者windows调试工具,但是有些jsapi不支持window环境,安卓调用的和windows上调用出来的结果会不一样,所以还是建议安卓来调试。

下面介绍使用安卓手机来进行调试。

https://ding-doc.dingtalk.com/doc#/kn6zg7/qg4y64

  • 下载钉钉dev版钉钉企业内部H5微应用、免登流程与真机调试

 

  • 下载安装完成后,打开安卓手机usb调试

打开usb调试举例:小米手机MIUI 11

钉钉企业内部H5微应用、免登流程与真机调试

 

进入设置-系统设置-开发者选项-打开USB调试

钉钉企业内部H5微应用、免登流程与真机调试

 

  • 进入钉钉dev版,设置-通用-开发者选项-打开微应用调试

钉钉企业内部H5微应用、免登流程与真机调试

 

 

  • 打开chome浏览器地址栏输入chrome://inspect(chromium内核的应该都可以,新edge浏览器的话输入edge://inspect) 过程中手机上可能会提示

钉钉企业内部H5微应用、免登流程与真机调试

 

  • 然后钉钉中打开发布的项目网页,找到对应的网页,点击inspect,之后就可以看到开发者控制台了钉钉企业内部H5微应用、免登流程与真机调试