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

已于 2022-02-28 10:17:16 修改
阅读量2.6k 收藏 21
点赞数 2
分类专栏： 企业微信 文章标签： 微信
于 2022-02-27 22:07:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40816738/article/details/123170569
版权

在这里插入图片描述

文章目录


企业微信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_token
 4.获取企业jsticket
 5.对string1进行sha1签名，得到signature

string1的模板示例：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=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. 个人信息（自动）

在这里插入图片描述

在这里插入图片描述
我没有点击个人信息按钮，直接调用企业微信内置【个人信息】进行显示

在这里插入图片描述

gblfy
关注
  • 2
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信获取jsapi_ticket详细接口代码
06-22
ignature 的值是用多个参数 sha1 加密的结果，详细流程即： 1， 通过 appid + appsecert 获取公众号的 access_token（不是用户的 access_token） 2， 根据 1 的access_token 来获取 jsapi_ticket 3， 生成一个随机字符串 nonceStr（16）位 4， 生成一当前时间缀 timestamp 5， 获取当前网页 URL（#号后不要）
企微获取access_token、jsapi_ticket、JS-SDK-signature
Ronin6665的博客
04-10 2080
本篇主要叙述Java对接企微必要信息等，后续接口根据各接口需求来获取企微必要信息（access_token、jsapi_ticket等），此处附上。
企业微信内部应用开发 WECOM-JSSDK 调用扫一扫
最新发布
OnMyWaySc的博客
07-17 236
【代码】企业微信内部应用开发 WECOM-JSSDK 调用扫一扫。
微信JS-SDK获取signature签名以及config配置(微信转发分享页面需要)
热门推荐
qq_36627509的博客
03-29 3万+
Js代码wx.config({      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。      appId: '', // 必填，公众号的唯一标识      timestamp: , // 必填，生成签名的时间戳      nonceStr: '', // 必...
微信企业号开发之获取jsapi_ticket并生成JS-SDK权限验证签名
冰咖啡的专栏
06-05 2万+
在做企业号开发的时候，很有可能会调用微信提供的js接口（JS-SDK）， 那么使用JS-SDK必须生成权限验证签名，而生成权限验证签名又必须依赖jsapi_ticket， 而获取jsapi_ticket又必须依赖AccessToken，在上一篇文章介绍了获取AccessToken的方法， 本章就介绍一下如何获取jsapi_ticket并且怎样生成JS-SDK权限验证签名。 注：以...
获取jsapi_ticket
weixin_34082789的博客
09-01 602
String accessTokenUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET"; accessTokenUrl = accessTokenUrl.replace("APPID", Configure.app...
微信 H5分享 下载jssdk文件-附件资源
03-02
微信 H5分享 下载jssdk文件-附件资源
asp版jssdk.zip_asp 微信jssdk_asp微信_asp支持js吗_jssdk_微信
07-15
官方没有asp的demo，弄了个asp版的微信jssdk
分享朋友圈等——jssdk.zip_jssdk_微信jssdk_联合开发
09-20
微信分享朋友圈的JS代码，代码简介使用简单！
微信开发 获取accesstoken、jsapi_ticket、配置jssdk、调用扫一扫
04-08
获取accesstoken、获取jsapi_ticket、配置jssdk、调用扫一扫。里面写了一个类、参数配置好直接调用就行。包括全局缓存，定时获取accesstoken和jsapi_ticket
微信开发之微信jssdk录音功能开发示例
01-19
用户长按录音，松手后直接结束录音，结束录音后，用户可以选择重新录音、播放刚才的录音，上传录音（这里的上传录音指上传到自己服务器，上传步骤是，前端调用wx.uploadVoice，后台再到微信服务器下载音频文件，上传...
微信开发之获取JSAPI TICKET
12-20
一、获取流程 1、获取 access_token 2、通过access_token换取 jsapi_ticket 3、签名算法 签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL
微信开发中access_token,js_ticket,时间戳,签名工具
挨踢学霸
03-08 1448
1.      Access_token生成工具工具地址：https://mp.weixin.qq.com/debug这个工具主要用来验证和生成微信公众号access_token，主要有正确的app_id和app_secret就可以生成access_token，界面比较简单，如下图：其实这个工具还有很多别的接口测试功能，因为目前只用到了access_token的生成，所以先记录一下。通过这个工具我...
企业微信调用JSSDK wx.agentConfig 签名 安卓正常，IOS失败
G_wendy的博客
10-18 597
企业微信调用JSSDK wx.agentConfig 签名 安卓正常，IOS失败
微信获取access_token和jsapi_ticket
小郇的博客
07-13 1687
之前在解决微信小程序获取access_token和jsapi_ticket时在网上找资料，没一下找到我想要的，所以自己记录下。 获取accessToken 微信官方网页：https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html public String getAccessToken() { String accessToken = null; //判断redis中是否有access_t
微信ticket获取php,企业微信获取ticket回调页面无法通过测试
weixin_39969006的博客
03-28 224
我在 https://github.com/sbzhu/weworkapi_php/tree/master/callback 下载了callback 的 PHP 所有代码放到服务器上，把callbackverify.php中token,encodingAesKey,receiveid替换成了在后台找到的我司对应的数值。返回结果：Notice: Undefined offset: 0 in /hom...
Java微信开发之JS-SDK，Ticket签名
weixin_37928789的博客
11-05 2160
Java微信开发之JS-SDK，Ticket签名WeiXinJsApiTicketUtil.java 工具类HTTPutil 工具类ProjectConst.java 放一些微信接口URLWeiXinJsapiTicket.properties 文件JsApiTicket.java 实体类TicketSignature.java 生成签名wxProject.propertiesHTML页面Java...
企业微信jssdk使用
qq_54397092的博客
03-06 969
按客户需求做一个企业微信的h5，需要用到企业微信的jssdk，以下是使用企业微信jssdk的步骤
【记录】微信录音开发（企业微信JSSDK-下载到自己的服务器-ffmpeg转码h5播放）
m0_37461895的博客
10-27 3614
前段时间公司要求做一个录音功能。没有头绪，到网上查了下，发现微信的api提供的jssdk能满足我的需求，就决定用这个开发了。先后查了不少资料加上自己琢磨和问前辈的经验，花了大概一个多星期总算完成了，这边记录一下过程。 首先贴一篇教程出来，这篇教程前期省了我不少时间。 微信JSSDK中Config配置：http://blog.csdn.net/zhaojiacan/article/det
引入企业微信jssdk并创建外部群完整示例
05-11
好的，下面是一个完整的示例，包括如何引入企业微信 JSSDK 和如何创建外部群。 首先，我们需要在企业微信后台中创建一个应用，并获取到应用的 `corpId` 和 `agentId`。然后在前端页面中引入 JSSDK： ```html <script src="https://qydev.weixin.qq.com/sdk/js/qywx.js"></script> ``` 接下来，我们需要初始化 JSSDK，代码如下： ```javascript wx.config({ beta: true, debug: true, appId: 'YOUR_APP_ID', timestamp: new Date().getTime(), nonceStr: Math.random().toString(36).substr(2), signature: 'YOUR_SIGNATURE', jsApiList: [ 'on', 'ready', 'invoke', 'selectExternalContact' ] }); ``` 注意，需要替换 `appId` 和 `signature` 为实际的值。其中 `signature` 是通过后端接口获取的，用于验证身份和权限。 接下来，我们需要监听 JSSDK 的 `ready` 事件，代码如下： ```javascript wx.ready(function () { console.log('JSSDK is ready'); }); ``` 在 JSSDK 准备好之后，我们就可以使用 JSSDK 提供的 API 来创建外部群了。首先，我们需要通过 `selectExternalContact` API 来选择外部联系人，代码如下： ```javascript wx.invoke('selectExternalContact', { filterType: 0, selectMode: 0, selectedExternalUserIds: [] }, function (res) { if (res.err_msg === 'selectExternalContact:ok') { console.log('Selected external contact:', res); var externalUserId = res.selectedExternalUserIds[0]; createChat(externalUserId); } else { console.error('Failed to select external contact:', res); } }); ``` 其中，`filterType` 表示过滤类型，0 表示不过滤；`selectMode` 表示选择模式，0 表示单选；`selectedExternalUserIds` 表示已选的外部联系人 ID，这里我们设置为空数组。 当选择外部联系人成功之后，我们就可以调用 `createChat` 方法来创建外部群了，代码如下： ```javascript function createChat(externalUserId) { wx.invoke('createChat', { name: 'External Chat', userIds: [], externalUserIds: [externalUserId] }, function (res) { if (res.err_msg === 'createChat:ok') { console.log('Created external chat:', res); } else { console.error('Failed to create external chat:', res); } }); } ``` 其中，`name` 表示群聊名称，`userIds` 表示企业成员的 ID（这里设置为空数组），`externalUserIds` 表示外部联系人的 ID。 至此，我们已经完成了通过 JSSDK 创建外部群的示例。完整代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>External Chat Example</title> </head> <body> <h1>External Chat Example</h1> <button id="create-chat-btn">Create External Chat</button> <script src="https://qydev.weixin.qq.com/sdk/js/qywx.js"></script> <script> wx.config({ beta: true, debug: true, appId: 'YOUR_APP_ID', timestamp: new Date().getTime(), nonceStr: Math.random().toString(36).substr(2), signature: 'YOUR_SIGNATURE', jsApiList: [ 'on', 'ready', 'invoke', 'selectExternalContact', 'createChat' ] }); wx.ready(function () { console.log('JSSDK is ready'); }); document.getElementById('create-chat-btn').addEventListener('click', function () { wx.invoke('selectExternalContact', { filterType: 0, selectMode: 0, selectedExternalUserIds: [] }, function (res) { if (res.err_msg === 'selectExternalContact:ok') { console.log('Selected external contact:', res); var externalUserId = res.selectedExternalUserIds[0]; createChat(externalUserId); } else { console.error('Failed to select external contact:', res); } }); }); function createChat(externalUserId) { wx.invoke('createChat', { name: 'External Chat', userIds: [], externalUserIds: [externalUserId] }, function (res) { if (res.err_msg === 'createChat:ok') { console.log('Created external chat:', res); } else { console.error('Failed to create external chat:', res); } }); } </script> </body> </html> ``` 希望这个示例可以帮助你理解如何使用企业微信 JSSDK 来创建外部群。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gblfy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值