企业微信H5_网页jssdk调用，ticket签名config及示例

admin管理员组

文章数量:1566678

文章目录

• • • • • 一、验证域名归属校验
        • • 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/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/document/path/90514

2.1. 引入JS文件

如果是npm webpack工程的话，上面引入方式需要验证是否生效。如果不生效，采用npm安装方式引入即可

npmjs官网：
https://www.npmjs/search?q=weixin-js-sdk

2.2.权限验证配置

通过config接口注入权限验证配置

前端代码

三、官网API阅读

3.1. 获取企业的jsapi_ticket

由于生成签名前需要获取企业的jsapi_ticket
官网文档：https://developer.work.weixin.qq/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/document/path/90506

• 签名生成规则
• 参数个数
• 加密要求
  
  

四、后端代码实战

4.1. 实现流程

 1.获取当前时间戳
 2.随机字符串
 3.获取Access_token
 4.获取企业jsticket
 5.对string1进行sha1签名，得到signature

string1的模板示例：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq?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. 个人信息（自动）

我没有点击个人信息按钮，直接调用企业微信内置【个人信息】进行显示

本文标签： 示例网页企业jssdkticket