企业内部H5微应用开发 分为 服务端API和前端API的开发,主要涉及到进入应用免登流程和JSAPI鉴权。

JSAPI鉴权开发步骤:

1、创建H5微应用

登入钉钉开放平台(https://open-dev.dingtalk.com/#/index),进入“应用开发”->企业内部开发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 .'&timestamp=' . $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)// 提交一个mutationconst ddconfig = resultddconfig.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',//企业IDddconfig:{},//钉钉签权配置信息
  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'],//需要签权的JSAPIuserinfo:{}, //用户信息geolocation:{} //地图定位信息
}

4、H5微应用的免登

“免登”是指用户进入应用后,无需输入钉钉用户名和密码,应用程序可自动获取当前用户身份,进而登录系统的流程。

1、前端去获取微应用免登授权码,然后把授权码发送到服务端api得到当前用户信息

// 异步获取userinfo
  getUserinfo({commit, state}) {dd.runtime.permission.requestAuthCode({corpId: state.CorpId, // 企业idonSuccess: async function (info) {let code = info.code // 通过该免登授权码可以获取用户身份// 发送异步ajax请求const result = await reqUserinfo(code,state.CorpId)// 提交一个mutationconst userinfo = resultcommit(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进行调试的)

转载于:https://www.cnblogs.com/flywong/p/10862933.html

钉钉企业内部H5微应用开发相关推荐

  1. h5应用 vue 钉钉_钉钉企业内部H5微应用开发

    企业内部H5微应用开发 分为 服务端API和前端API的开发,主要涉及到进入应用免登流程和JSAPI鉴权. JSAPI鉴权开发步骤: 1.创建H5微应用 登入钉钉开放平台(https://open-d ...

  2. vue项目对接钉钉企业内部H5微应用

    最近公司项目又需要接入钉钉啦

  3. 钉钉通知-调用钉钉发送企业内部消息开发

    首先,我们要明确需求:自己的系统需要发送通知消息到用户,接收消息用户为同一企业内的人员,选用短信可能涉及到费用问题,故可以选用钉钉或者企业微信,在此我使用钉钉进行发送消息. 调用钉钉发送企业内部消息: ...

  4. 钉钉H5微应用开发免登以及接口调试

    钉钉H5微应用开发以及接口调试 企业内部应用免登 https://open.dingtalk.com/document/orgapp-server/enterprise-internal-applic ...

  5. 浙里办H5微应用开发流程

    一.代码开发 1.   源代码准备: 由于源代码需要能够部署到政务中台,即要支持npm run build构建源码.(解释:把源代码上传政务中台后,它会后台自动编译构建项目并取build文件夹下的产物 ...

  6. 如何在钉钉上开发自己的应用_快速上手——钉钉H5微应用开发接入

    创建钉钉H5应用 顾名思义,钉钉H5应用,和微信WEB应用一样,本质都是一个有前端有后端的网站,由平台本身对网站基础功能进行扩充,提供专用接口满足开发者各式各样的和平台相关的需求.开发者平台:http ...

  7. 浙政钉h5微应用开发vue

    浙政钉h5开发简单总结 1.在页面引入专有钉钉 JSAPI npm install --save gdt-jsapi import dd from 'gdt-jsapi'; /在使用页面导入 Vue. ...

  8. 使用钉钉创建企业内部机器人

    目录 玩转钉钉机器人 创建钉钉机器人: 如何创建钉钉机器人 如何调用机器人api 支持的消息格式 text类型 markdown类型 整体跳转actionCard类型 feedCard类型 使用钉钉机 ...

  9. 记录:实现钉钉(企业内部应用)登录第三方网站

    由于后台无法配合前端配置路由为history模式,故vue路由采用hash模式.但是钉钉扫码成功后会导致重定向地址格式错误: 错误格式:https://xxx.com/?authCode=xxxx#/ ...

  10. 钉钉企业内部H5应用IOS点击下载pdf附件后乱码问题

    IOS点击下载pdf附件按钮后会出现如下问题,安卓会跳转到浏览器页面下载pdf文件不会出现乱码问题 前端的下载操作按钮 ExportPDF(){postAction(this.exportPdfUrl ...

最新文章

  1. Java程序员的日常—— 《编程思想》关于类的使用常识
  2. ubuntu 终端批量复制文件_《卡死你3000》批量文件复制命令详解
  3. 2018刑侦推理 java_2018年刑侦科目推理试题
  4. 6-1 数组元素的区间删除
  5. php定时红包,PHP随机红包和等额红包的简单实现
  6. Android开发 ---多线程操作:Handler对象,消息队列,异步任务下载
  7. 在Kotlin中使用libGDX
  8. 【计算机网络复习 数据链路层】3.5.4 CSMA-CD协议
  9. 不要低估AI面临的困境
  10. 飞鸽传书系统上开发是一件多么惬意的事情
  11. readfile读取串口数据_谈一谈使用字体库加密数据仿58同城
  12. ormlite更改数据库默认位置
  13. Datadog Agent是啥?它消耗什么资源?
  14. 独家专访@爱可可-爱生活:如何做好科学研究(干货满满)
  15. 转:不同的行业和工作的真实情况是怎样的?
  16. java界面跳转代码_java软件里面的跳转页面代码实现
  17. JZOJ7月18日提高组T1 Family
  18. rap韵脚大全(包含各种诗词歌曲的韵脚等)
  19. GB与CE标准对照表-转载
  20. 谷歌邮箱lmap服务器填什么_Gmail IMAP的应用技巧

热门文章

  1. TableViewCell分割线消失的问题
  2. line-height学习与总结
  3. Android layoutInflate.inflate 方法具体解释,removeView()错误解决
  4. 支持ipv6类型的ddos测试工具thc-ipv6
  5. 防火墙配置十大任务之五,有NAT的两个接口的配置
  6. mysql left join 耗时_性能调优:mysql之left join
  7. netlink 0010 -- Generic Netlink 实现通信
  8. 如何利用systrace分析Android App的死锁问题
  9. 深入解读Linux进程调度系列(1)——调度的初始化
  10. Win10环境下使用VS2015编译PJProject