企业微信H5_网页jssdk调用 agentconfig选人选照片等案例演示

在这里插入图片描述

文章目录

- - - - 一、验证域名归属校验
      - 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_token4.获取应用的jsapi_ticket5.对string1进行sha1签名，得到signature6.获取agentid

string1的模板示例：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

在这里插入图片描述