企业微信H5_网页jssdk调用,ticket签名config及示例
文章目录
- 一、验证域名归属校验
- 1. 阅读文档
- 2. 配置公网域名
- 3. 登录企业微信管控台
- 4. 选择自建应用
- 5. 网页授权及JS-SDK
- 6. 填写公网域名
- 7.下载校验文件
- 8. 校验文件移动
- 9. 启动前端项目
- 10. 浏览器校验
- 11. 域名校验
- 12. 应用主页
- 二、前端代码实战
- 2.1. 引入JS文件
- 2.2.权限验证配置
- 三、官网API阅读
- 3.1. 获取企业的jsapi_ticket
- 3.2. PM获取企业的jsapi_ticket
- 3.3. JS-SDK使用权限签名算法
- 四、后端代码实战
- 4.1. 实现流程
- 4.2. 签名生成入口
- 4.3. 获取企业jsticket
- 4.4. 签名生成
- 4.5. 参数封装
- 五、实战演练
- 5.1. 打开应用主页
- 5.2. 开启debug模式
- 5.3. 进行案例页面
- 5.4. 生成签名
- 5.5. 参数封装响应
- 5.6. 个人信息(手动)
- 5.7. 个人信息(自动)
企业微信H5_网页jssdk调用,ticket签名config及示例
一、验证域名归属校验
1. 阅读文档
验证域名归属校验
2. 配置公网域名
由于企业微信文档说需要公网域名,因此,这里演示采用内网穿透来做,前端项目地址为localhost:8800
内网穿透,将localhost:8800地址替换为公网4663588nl3.zicp.vip:80
3. 登录企业微信管控台
登录企业微信管控台
https://work.weixin.qq.com/wework_admin/loginpage_wx
4. 选择自建应用
手机扫码确认登录
【应用管理】-选择【自建应用】
5. 网页授权及JS-SDK
6. 填写公网域名
这里填写内网穿透的地址
4663588nl3.zicp.vip
填写完毕后,点击申请校验域名
7.下载校验文件
8. 校验文件移动
按照文档步骤1将WW_verify_yxkQbdA9BK2UiX81.txt
下载到本地,复制到前端项目的public目录下面
9. 启动前端项目
10. 浏览器校验
浏览器验证,是否可以访问此文件,由于企业微信会验证,这里咱们从浏览器自己先验证一下
http://4663588nl3.zicp.vip/WW_verify_yxkQbdA9BK2UiX81.txt
11. 域名校验
勾选√ 用于OAuth2.0回调的可信域名是否校验
,点击确定
12. 应用主页
由于企业微信会回调前端当前地址,因此,应该用主页地址需要和jssdk域名一致
http://4663588nl3.zicp.vip
二、前端代码实战
文档地址:https://developer.work.weixin.qq.com/document/path/90514
2.1. 引入JS文件
如果是npm webpack工程的话,上面引入方式需要验证是否生效。如果不生效,采用npm安装方式引入即可
npmjs官网:
https://www.npmjs.com/search?q=weixin-js-sdk
2.2.权限验证配置
通过config接口注入权限验证配置
前端代码
三、官网API阅读
3.1. 获取企业的jsapi_ticket
由于生成签名前需要获取企业的jsapi_ticket
官网文档:https://developer.work.weixin.qq.com/document/path/90506
3.2. PM获取企业的jsapi_ticket
由于获取企业的jsapi_ticket的企业微信API是一个get请求方式的接口,因此,咱们可以先用postman模拟调试,验证是否可以获取企业的jsapi_ticket,等会再用后端代码去通过工具类请求是一样的道理。
说明:这里只是演示先看效果,真正的获取企业的jsapi_ticket和签名生成都后端生成
3.3. JS-SDK使用权限签名算法
官网文档:https://developer.work.weixin.qq.com/document/path/90506
- 签名生成规则
- 参数个数
- 加密要求
四、后端代码实战
4.1. 实现流程
1.获取当前时间戳2.随机字符串3.获取Access_token4.获取企业jsticket5.对string1进行sha1签名,得到signature
string1的模板示例:
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value
4.2. 签名生成入口
4.3. 获取企业jsticket
4.4. 签名生成
4.5. 参数封装
五、实战演练
5.1. 打开应用主页
5.2. 开启debug模式
ctrl+shrit+alt+d开启debug模式
5.3. 进行案例页面
点击jssdk按钮就会进行入
前端代码
5.4. 生成签名
5.5. 参数封装响应
这里的弹框是因为debug: true,调试环境建议开启,可以看到企业微信返回的参数都有什么,正式环境建议关闭
5.6. 个人信息(手动)
调用企业微信内置【个人信息】功能
前端代码
这里演示方便,将数据提前写好了
重点,需要调用企业微信什么内置功能,需要在jsApiList: [‘openUserProfile’] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
5.7. 个人信息(自动)
我没有点击个人信息按钮,直接调用企业微信内置【个人信息】进行显示
企业微信H5_网页jssdk调用,ticket签名config及示例相关推荐
- 企业微信H5_网页jssdk调用 agentconfig选人选照片等案例演示
文章目录 一.验证域名归属校验 1. 阅读文档 2. 配置公网域名 3. 登录企业微信管控台 4. 选择自建应用 5. 网页授权及JS-SDK 6. 填写公网域名 7.下载校验文件 8. 校验文件移动 ...
- 企业微信H5_网页jssdk调用 判断当前客户端版本是否支持指定JS接口
接上一篇:企业微信H5_网页jssdk调用,ticket签名config及示例https://gblfy.blog.csdn.net/article/details/123170569 文章目录 一. ...
- 企业微信H5_网页jssdk调用 config和agentconfig的区别
文章目录 一.文档阅读 1. 企业微信JS-SDK作用 2. config 接口注入权限 3. agentConfig注入应用的权限 二.二者区别 1.引入js不同 2. 参数个数不一样 3. 获取应 ...
- 企业微信H5_消息推送概述,发送应用消息示例
文章目录 一.阅读和调试 1. 文档阅读 2. postman发送消息 二.实战演练 2.1. 发送消息 2.2. 前端代码 2.3. 后端代码 2.4. 发送文本消息 2.5. 接收消息 三.源码分 ...
- 企业微信系列之JSSDK文件预览对接
企业微信系列之JSSDK文件预览对接 企业微信JS-SDK是企业微信面向网页开发者提供的基于企业微信内的网页开发工具包. 通过使用企业微信JS-SDK,网页开发者可借助企业微信高效地使用拍照.选图.语 ...
- 企业微信H5_身份验证,PC网站企业微信扫码授权登录
企业微信H5_身份验证,PC网站企业微信扫码授权登录 文章目录 一.扫码登录配置 1. 企业微信扫码登录接入流程 2. 企业微信扫码登录接入流程拆解 3. 开启网页授权登录 二.实战演练 2.1. 用 ...
- SAP ABAP 添加企业微信群机器人并调用 API 发送消息
SAP ABAP 添加企业微信群机器人并调用 API 发送消息 引言: 这篇文章以我在个人开源项目"任务管理服务(ZTASK)"中的应用为例,通过讲述使用企业微信机器人实现任务的通 ...
- 服务器微信接口返回乱码,企业微信会话内容存档调用DecryptData返回中文出现乱码...
企业微信会话内容存档调用DecryptData返回中文出现乱码 问题类型 API/组件名称 终端类型 微信版本 基础库版本 Bug 企业微信会话存档sdk 工具 无 无 我用c#开发会话存档功能,调用 ...
- 企业微信SDK接口API调用-触发推送企业微信微信好友
企业微信SDK接口API调用-触发推送企业微信微信好友 /** * 触发企业微信推送微信好友列表 * @author wechat:happybabby110 * @bl ...
最新文章
- SAP 用户参数 ME_USE_GRID
- python从入门到精通视频(全60集)-【网盘下载】Python从入门到精通视频(全60集)...
- C语言中main函数的研究,以及对代码断点调试的研究(王爽老师 汇编语言)
- 点击panel滚动条滚动到底部
- loadrunner性能测试---添加windows多台压力机
- CF Vicious Keyboard 构造水题
- 360剑灵洪门崛起服务器维护,剑灵洪门崛起————【维护】8月1日更新维护公告...
- supermap试用许可过期如何重新申请
- 算法—二叉查找树的相关一些操作及总结
- 如何正确使用日志Log
- 【天池竞赛系列】阿里移动推荐算法思路解析
- Android两种获取IP地址的方式(使用WIFI和GPRS)
- java开源问卷调查系统源码_高效实用!开源调研问卷系统 DWSurvey,基于 JAVA WEB 开发...
- JDK 11 下载安装,配置idea
- hashcode值相同的字符串
- 计算机课第一节可以讲些什么,高职《大学计算机基础》第1节课讲点什么?
- php怎么查看当前地址,php二分法在IP地址查询中的应用
- 查询用户连续登录的天数
- 计算机专业的浪漫情话,计算机科学与技术表白情话
- c语言让数码管显示时间,请问51单片机肿么编写程序让8个数码管显示时间(时分秒)...