您现在的位置是:网站首页> 编程资料编程资料
钉钉企业内部H5微应用开发详解html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
2021-08-29
1526人已围观
简介 这篇文章主要介绍了钉钉企业内部H5微应用开发详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
企业内部H5微应用开发 分为 服务端API和前端API的开发,主要涉及到进入应用免登流程和JSAPI鉴权。
JSAPI鉴权开发步骤:
1、创建H5微应用
登入钉钉开放平台(https://open-dev.dingtalk.com/),进入“应用开发”->企业内部开发H5微应用->创建应用,并填写基本信息和配置开发信息

2、JSAPI鉴权服务端API的开发:
(1)通过appKey 和 appSecret 获取调用接口凭证AccessToken(https://oapi.dingtalk.com/gettoken?appkey=appKey&appsecret=appSecret)
(2)通过AccessToken 获取用于JSAPI的临时票据Ticket(https://oapi.dingtalk.com/get_jsapi_ticket?access_token=ACCESS_TOKEN)
(3)ticket(JSAPI的临时票据),nonceStr(随机串),timeStamp(时间戳),url(当前网页的URL,不包含#及其后面部分)计算签名信息
计算签名参数
/* *ticket(JSAPI的临时票据),nonceStr(随机串),timeStamp(时间戳),url(当前网页的URL,不包含#及其后面部分)计算签名信息 * */ public static function sign($ticket, $nonceStr, $timeStamp, $url) { $plain = 'jsapi_ticket=' . $ticket . '&noncestr=' . $nonceStr . '×tamp=' . $timeStamp . '&url=' . $url; return sha1($plain); }(4)通过AccessToken 获取用于JSAPI的临时票据Ticket(说明:由于会牵涉到多个企业,企业的appKey 和 appSecret的一些信息都是写在JSON配置文件中,前端传企业ID到服务端,服务端就会从JSON配置文件中获取企业信息)
/* * 根据企业ID corpid 返回 JSAPI 鉴权配置信息 * */ public static function getConfig($corpid) { $_config = self::getApiConfig($corpid); $appkey = $_config["AppKey"]; $appsecret = $_config["AppSecret"]; $agentid = $_config["AgentId"]; $nonceStr = 'flywong'; $timeStamp = time(); //$url = self::getCurrentUrl(); $url = $_config["AppUrl"]; $accessToken = self::getAccessToken($appkey,$appsecret); $ticket = self::getTicket($accessToken); $signature = self::sign($ticket, $nonceStr, $timeStamp, $url); $config = array( 'agentId' => $agentid, 'corpId' => $corpid, 'timeStamp' => $timeStamp, 'nonceStr' => $nonceStr, 'signature' => $signature, 'url' => $url, 'type'=>0 ); return json_encode($config, JSON_UNESCAPED_SLASHES); } /* * 根据企业ID corpid 从api_config.json配置文件中找到 企业对应的信息,并返回企业应用开发信息 * */ public static function getApiConfig($corpid) { $json_string = file_get_contents(__DIR__ .'/../api_config.json'); //从文件中读取数据到PHP变量 $arrs = json_decode($json_string, true); foreach($arrs as $key => $value) { if($value["CorpId"] == $corpid) { return $value; } } }企业的配置文件api_config.json

3、JSAPI鉴权前端API的开发:
前端发送GET请求获取服务端的JSAPI 鉴权配置信息
// 异步获取dd.config async getDDConfig({commit, state},callback) { // 发送异步ajax请求 const result = await reqDDConfig(state.CorpId) // 提交一个mutation const ddconfig = result ddconfig.jsApiList= state.jsApiList dd.config(ddconfig); commit(RECEIVE_DDCONFIG, {ddconfig}) // 数据更新了, 通知一下组件 callback && callback() } let that = this; //获取 JSAPI 鉴权配置信息 that.$store.dispatch('getDDConfig', () => {// that.$nextTick(() => {// 数据ddconfig state 更新后执行 that.$store.dispatch('getUserinfo')//获取登入用户信息 that.$store.dispatch('getGeolocation')//获取地图定位信息 }) }) /* 状态管理*/ export default { CorpId:'dingb0bd5c5a3ba53e1231232378f',//企业ID ddconfig:{},//钉钉签权配置信息 jsApiList:[ 'runtime.info', 'biz.contact.choose', 'device.notification.confirm', 'device.notification.alert', 'device.notification.prompt', 'biz.ding.post', 'biz.util.openLink', 'device.geolocation.get', 'biz.util.scanCard' ],//需要签权的JSAPI userinfo:{}, //用户信息 geolocation:{} //地图定位信息 }4、H5微应用的免登
“免登”是指用户进入应用后,无需输入钉钉用户名和密码,应用程序可自动获取当前用户身份,进而登录系统的流程。
1、前端去获取微应用免登授权码,然后把授权码发送到服务端api得到当前用户信息
// 异步获取userinfo getUserinfo({commit, state}) { dd.runtime.permission.requestAuthCode({ corpId: state.CorpId, // 企业id onSuccess: async function (info) { let code = info.code // 通过该免登授权码可以获取用户身份 // 发送异步ajax请求 const result = await reqUserinfo(code,state.CorpId) // 提交一个mutation const userinfo = result commit(RECEIVE_USERINFO, {userinfo}) } }) }2、服务端API获取用户信息
/* * 通过免登授权码code和access_token获取用户的userid * */ public static function getUserInfo($accessToken, $code) { $response = \util\Http::get("/user/getuserinfo",array("access_token" => $accessToken, "code" => $code)); $userinfo = json_decode(json_encode($response),true); $userid = $userinfo["userid"]; return self::getuser($accessToken,$userid); } /* * 通过access_token 和 userid 获取用户详情 * */ private static function getuser($accessToken,$userid) { $response = \util\Http::get("/user/get",array("access_token" => $accessToken, "userid" => $userid)); return json_encode($response); }提醒:钉钉的信息获取必须在钉钉应用环境中运行。(我是在电脑上安装安卓模拟器然后安装钉钉APP进行调试的)
到此这篇关于钉钉企业内部H5微应用开发详解的文章就介绍到这了,更多相关钉钉企业内部H5微应用内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
相关内容
- html5 横向滑动导航栏的方法示例使用HTML+Css+transform实现3D导航栏的示例代码html+css+js实现导航栏滚动渐变效果Html5导航栏吸顶方案原理与对比实现html+css 实现简易导航栏功能基于html和CSS3制作简单侧边导航栏基于html和CSS3制作酷炫的导航栏使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
- HTML5触摸事件(touchstart、touchmove和touchend)的实现html5触摸事件判断滑动方向的实现HTML5触摸事件实现移动端简易进度条的实现方法整理HTML5移动端开发的常用触摸事件HTML5触摸事件演化tap事件介绍
- 浅析HTML5中的download属性使用HTML5中的强制下载属性download使用实例解析详解HTML5中download属性的应用HTML5的download属性详细介绍和使用实例
- 手把手教你实现一个canvas智绘画板的方法JavaScript+Canvas实现自定义画板的示例代码几何画板怎么利用弧绘制三角形折叠?几何画板怎么制作旋转的正六边形课件?几何画板怎么一只飞舞的蝴蝶动画?ai怎么设置画板属性? ai画板设置属性的教程金排物理画板 V2019 中文免费安装版socket.io 和canvas 实现的共享画板功能
- 详解h5页面在不同ios设备上的问题总结浅谈Html5移动端ios/Android兼容性总结详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android
- 小程序瀑布流解决左右两边高度差距过大的问题html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- h5网页水印SDK的实现代码示例前端canvas水印快速制作(附完整代码)手摸手教你用canvas实现给图片添加平铺水印的实现html5 canvas实现给图片添加平铺水印canvas 下载二维码和图片加水印的方法清除网页文字水印的两种简单方法前端水印的简单实现代码示例
- html5中canvas图表实现柱状图的示例基于HTML5 Canvas的3D动态Chart图表的示例canvas如何绘制钟表的方法
- 浅谈HTML5 FileReader分布读取文件以及其方法简介HTML与XHTML、以及HTML4与HTML5标签之间的区别简介HTML5的一个显示电池状态的API简介HTML5是什么 HTML5是什么意思 HTML5简介HTML5安全介绍之内容安全策略(CSP)简介HTML5的标签的代码的简单介绍 HTML5标签的简介html5新增的定时器requestAnimationFrame实现进度条功能HTML5新增加的功能详解iPhone5和iOS6上HTML5开发的新增功能html5简介及新增功能介绍
- 如何避免常见的6种HTML5错误用法html5各种页面切换效果和模态对话框用法总结HTML5中drawImage用法分析HTML5 embed标签定义和用法详解HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常html5基础标签(html5视频标签 html5新标签用法)html5跨域通讯之postMessage的用法总结Html5新标签解释及用法
