您现在的位置是:首页 > Javascript
当前栏目
vue项目对接钉钉企业内部H5微应用
2023-02-26 10:20:31 时间
公司项目需要接入钉钉 ?,所以做了钉钉的企业内部应用对接。
应用场景
将之前已经有的 H5 应用接入钉钉内,无需输入账号密码便可直接登录。
(福利推荐:阿里云、腾讯云、华为云服务器最新限时优惠活动,云服务器1核2G仅88元/年、2核4G仅698元/3年,点击这里立即抢购>>>)
准备工作
- 1.注册钉钉(废话)
-
2.负责开发的相关人员申请成为钉钉子管理员(找公司内的超管申请)
-
注意需要管理员赋予必要的权限,例如:
- 开发应用的数据权限
- 开发者权限
- 工作台管理
- 应用中心管理
-
-
3.登录钉钉开发者后台
只有管理员和子管理员可登录开发者后台
- 4.在应用开发页面,选择企业内部开发 > H5微应用,然后单击创建应用
- 5.填写应用的基本信息,然后单击确定创建
-
6.在应用信息页面,单击开发管理,然后单击修改
- 这里注意『开发模式』的选择。如果已有可接入的H5应用时,文档提示说选择『快捷链接』的方式,但是如果后端需要请求钉钉的话就要配置服务器出口IP(白名单)了,所以还是得选择『开发应用』,不然无法配置后端请求的白名单(坑)
- 7.单击凭证与基础信息获取应用的AppKey和AppSecret
- 8.如果需要获取通讯录权限,就要添加合适的接口权限
开发流程
-
1.获取免登授权码。
- H5微应用免登流程
-
2.获取access_token。
- 调用gettoken接口获取access_token。
-
3.获取用户userid。
- 调用user/getuserinfo接口获取用户的userid,通过免登码获取用户userid。
-
4.获取用户详情。
- 调用user/get接口获取用户详情信息。
-
5.根据手机号做登录。
- 视自己应用情况而定
项目修改
项目情况
技术栈
- vue 2.6.11
- vue-cli 2.9.6
接入步骤
依赖安装
更目录执行以下命令
npm install dingtalk-jsapi --save
获取微应用免登授权码方法封装
项目的 utils 目录下(当然也可以选择 common 组件目录)新建文件dd.js
import * as dd from 'dingtalk-jsapi' export function getCode(callback) { let corpId = 'your corpId' if (dd.env.platform !== 'notInDingTalk') { dd.ready(() => { //使用SDK 获取免登授权码 dd.runtime.permission.requestAuthCode({ corpId: corpId, onSuccess: info => { // 根据钉钉提供的api 获得code后,再次调用这个callback方法 // 由于是钉钉获取code是异步操作,不知道什么时候执行完毕 // callback 函数会等他执行完毕后在自己调用自己 callback(info.code) }, onFail: err => { alert('fail') alert(JSON.stringify(err)) } }) }) } }
corpId 可到后台 基本信息->开发信息(旧版)->企业自用账号信息 下查看。
应用入口页面修改
import { getCode } from '@/utils/dd' export default { data() { return { } }, methods: {}, created() { getCode(code => { // 登录处理 }) } }
对接感受
从 H5 微应用的对接来看没有特别复杂的配置,对接起来很流畅,基本没有卡壳的地方
- 官方文档有一处写的不够准确,已有H5应用时引导用户选择快捷链接开发模式,但是这种模式下如果后端需要请求钉钉接口的话就找不到配置IP白名单的地方了,比较尴尬。
- 权限管理的地方,涉及到通讯录权限时,基本信息与成员手机号、邮箱都是分开的权限需要手动添加,不然是获取不到相应信息的
- 参与测试人员需要在应用的版本管理与发布tab页单独设置可使用范围才能使相关开发人员在钉钉客户端上看见入口
参考资料
- 钉钉开发者后台
- H5微应用免登流程
- 通过免登码获取用户userid
- 获取用户详情信息
你还在原价购买阿里云、腾讯云、华为云、天翼云产品?那就亏大啦!现在申请成为四大品牌云厂商VIP用户,可以3折优惠价购买云服务器等云产品,并且可享四大云服务商产品终身VIP优惠价,还等什么?赶紧点击下面对应链接免费申请VIP客户吧:
相关文章
- JDK中内嵌JS引擎介绍及使用
- 49195,npm最后的疯狂?盘点10款最有前途JavaScript构建工具
- 译文:5个增强Node.js应用程序增强功能
- 4个例子,吃透 JavaScript 实现的二叉搜索树 BST
- Vue中使用XML和JSON格式互转插件
- JDK中Jshell简单使用(JDK9版本以上或者JDK9版本)
- shiro中的JSP标签支持
- Java技术点-json转对象,对象转json
- SpringBoot+SpringDataJpa @Query之 JPQL使用书写模板(模糊查询and条件查询)
- Spring Boot中的Freemarker模版引擎引用css和js的正确姿势
- Node.js解压版的环境配置及相关常用命令
- JSP学习笔记(6)—— 自定义MVC框架
- JSP学习笔记(5)——Servlet、监听器、过滤器、MVC模式介绍
- Jsp学习笔记(4)——分页查询
- APIJSON简单使用
- JSP学习笔记(3)——JSTL 标签库
- JSP学习笔记(1)——Jsp指令、动作元素和内置对象
- JavaScript ES6 Promise对象
- Web前端——JavaScript扩展补充
- Web前端——表单提交和Js添加选项