文章目录
- 一、验证域名归属校验
- 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. 获取应用的jsapi_ticket
- 4.4. 签名生成
- 4.5. 参数封装
- 五、实战演练
- 5.1. 打开应用主页
- 5.2. 开启debug模式
- 5.3. 进行案例页面
- 5.4. 生成签名
- 5.5. 参数封装响应
- 5.6. 外部联系人选人接口
- 5.7. 外部联系人选人接口
- 5.8. 图像接口
- 六、源码分享
- 6.1. 后端源码
- 6.2. 前端源码
企业微信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/94313
2.1. 引入JS文件
2.2.权限验证配置
通过config接口注入权限验证配置
前端代码
三、官网API阅读
说明：agentConfig与config的签名算法完全一样，但是jsapi_ticket的获取方法不一样，请特别注意，查看"获取应用身份的ticket".
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，等会再用后端代码去通过工具类请求是一样的道理。
先获取access_token
获取应用的jsapi_ticket
- config获取企业的jsapi_ticket与上图对比
- 从postman测试截图，可以看出 config获取企业的jsapi_ticket比获取应用的jsapi_ticket的长度短了很多，小伙伴们要做好区分哈
说明：这里只是演示先看效果，真正的获取应用的jsapi_ticket和签名生成都后端生成
3.3. JS-SDK使用权限签名算法
说明：config获取企业的jsapi_ticket和获取应用的jsapi_ticket使用的权限签名算法是一样的。
官网文档：https://developer.work.weixin.qq.com/document/path/90506
- 签名生成规则
- 参数个数
- 加密要求
四、后端代码实战
4.1. 实现流程
1.获取当前时间戳
2.随机字符串
3.获取Access_token
4.获取应用的jsapi_ticket
5.对string1进行sha1签名，得到signature
6.获取agentid
string1的模板示例：
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value
4.2. 签名生成入口
4.3. 获取应用的jsapi_ticket
4.4. 签名生成
4.5. 参数封装
五、实战演练
5.1. 打开应用主页
5.2. 开启debug模式
ctrl+shrit+alt+d开启debug模式
5.3. 进行案例页面
点击jssdk按钮就会进行入
先执行wx.config，执行成功后执行wx.agentConfig，这是官网说的
前端代码
5.4. 生成签名
5.5. 参数封装响应
这里的弹框是因为debug: true，调试环境建议开启，可以看到企业微信返回的参数都有什么，正式环境建议关闭
5.6. 外部联系人选人接口
调用企业微信内置【外部联系人选人接口】功能
5.7. 外部联系人选人接口
调用企业微信内置【外部联系人选人接口】功能
5.8. 图像接口
调用企业微信内置【图像接口-拍照或从手机相册中选图接口】功能
由于调试在PC的企业微信，因此，就会弹框选择图片，按照官网文档：拍照或从手机相册中选图接口
六、源码分享
6.1. 后端源码
后端：https://gitee.com/gblfy/qywx-inner-java
6.2. 前端源码
前端：https://gitee.com/gblfy/qywx-vuejs
tee.com/gblfy/qywx-vuejs)
