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

已于 2022-02-28 10:17:16 修改
阅读量2.5k 收藏 20
点赞数 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
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 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（#号后不要）
微信JS-SDK获取signature签名以及config配置(微信转发分享页面需要)
qq_36627509的博客
03-29 3万+
Js代码wx.config({      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。      appId: '', // 必填，公众号的唯一标识      timestamp: , // 必填，生成签名的时间戳      nonceStr: '', // 必...
企微获取access_token、jsapi_ticket、JS-SDK-signature
最新发布
Ronin6665的博客
04-10 1078
本篇主要叙述Java对接企微必要信息等，后续接口根据各接口需求来获取企微必要信息（access_token、jsapi_ticket等），此处附上。
微信企业号开发之获取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 592
String accessTokenUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET"; accessTokenUrl = accessTokenUrl.replace("APPID", Configure.app...
微信开发中access_token,js_ticket,时间戳,签名工具
挨踢学霸
03-08 1372
1.      Access_token生成工具工具地址：https://mp.weixin.qq.com/debug这个工具主要用来验证和生成微信公众号access_token，主要有正确的app_id和app_secret就可以生成access_token，界面比较简单，如下图：其实这个工具还有很多别的接口测试功能，因为目前只用到了access_token的生成，所以先记录一下。通过这个工具我...
微信 H5分享 下载jssdk文件-附件资源
03-02
微信 H5分享 下载jssdk文件-附件资源
asp版jssdk.zip_asp 微信jssdk_asp微信_asp支持js吗_jssdk_微信
07-15
官方没有asp的demo，弄了个asp版的微信jssdk
微信开发 获取accesstoken、jsapi_ticket、配置jssdk、调用扫一扫
04-08
获取accesstoken、获取jsapi_ticket、配置jssdk、调用扫一扫。里面写了一个类、参数配置好直接调用就行。包括全局缓存，定时获取accesstoken和jsapi_ticket
分享朋友圈等——jssdk.zip_jssdk_微信jssdk_联合开发
09-20
微信分享朋友圈的JS代码，代码简介使用简单！
微信开发之微信jssdk录音功能开发示例
01-19
用户长按录音，松手后直接结束录音，结束录音后，用户可以选择重新录音、播放刚才的录音，上传录音（这里的上传录音指上传到自己服务器，上传步骤是，前端调用wx.uploadVoice，后台再到微信服务器下载音频文件，上传...
企业微信调用JSSDK wx.agentConfig 签名 安卓正常，IOS失败
G_wendy的博客
10-18 478
企业微信调用JSSDK wx.agentConfig 签名 安卓正常，IOS失败
微信获取access_token和jsapi_ticket
小郇的博客
07-13 1614
之前在解决微信小程序获取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 203
我在 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 2146
Java微信开发之JS-SDK，Ticket签名WeiXinJsApiTicketUtil.java 工具类HTTPutil 工具类ProjectConst.java 放一些微信接口URLWeiXinJsapiTicket.properties 文件JsApiTicket.java 实体类TicketSignature.java 生成签名wxProject.propertiesHTML页面Java...
企业微信jssdk使用
qq_54397092的博客
03-06 859
按客户需求做一个企业微信的h5，需要用到企业微信的jssdk，以下是使用企业微信jssdk的步骤
【记录】微信录音开发（企业微信JSSDK-下载到自己的服务器-ffmpeg转码h5播放）
m0_37461895的博客
10-27 3554
前段时间公司要求做一个录音功能。没有头绪，到网上查了下，发现微信的api提供的jssdk能满足我的需求，就决定用这个开发了。先后查了不少资料加上自己琢磨和问前辈的经验，花了大概一个多星期总算完成了，这边记录一下过程。 首先贴一篇教程出来，这篇教程前期省了我不少时间。 微信JSSDK中Config配置：http://blog.csdn.net/zhaojiacan/article/det
H5使用企业微信jssdk录音、上传、下载、播放
热门推荐
万物皆可学
06-27 5万+
微信js-sdk语音开发 企业微信官方API：音频接口地址 step1：登录企业微信新建应用程序并记录你的Secret step2：在我的企业最下面找出你的企业ID也就是你的appId step3：在网页授权及JS-SDK设置你页面所放在服务器的域名验证，会生成下面一个.TXT文件下载下来放在你的服务器根目录才能授权成功。 step4：页面引入js <script src="http...
【企业微信】JS-SDK的使用
qq_45888932的博客
07-13 3589
JS-SDK的使用，选人和个人信息的处理
游戏发行平台支付jsSDK实现第三方平台调用微信H5支付步骤
07-14
要在游戏发行平台中使用第三方支付平台的 JS SDK 实现微信 H5 支付，可以按照以下步骤进行操作： 1. 注册和配置：首先，你需要在第三方支付平台上注册并获得商户身份和密钥，同时配置微信支付相关的参数，如商户号、密钥等。确保你已经在微信支付平台注册并通过了相关的认证。 2. 引入 SDK：在你的游戏中，需要引入第三方支付平台提供的 JS SDK 文件。通常，你可以通过在 HTML 中引入外部 JS 文件的方式来实现。具体引入方式可能因支付平台而异，可参考相关文档。 3. 初始化 SDK：根据第三方支付平台提供的文档，调用相应的初始化方法来初始化支付功能。这通常包括设置商户号、密钥等支付参数，并监听支付结果的回调函数。 4. 创建订单：在游戏中，用户选择商品并点击支付时，你需要调用第三方支付平台的创建订单接口，传递商品信息、价格等参数。该接口会返回一个预支付订单号或者其他必要的支付信息。 5. 调起微信支付：使用第三方支付平台提供的方法，传入预支付订单号等必要参数，调起微信 H5 支付页面。 6. 处理支付结果：用户在微信 H5 支付页面完成支付后，微信会返回支付结果。你需要在支付结果的回调函数中处理返回的支付结果，例如更新用户账户信息、解锁游戏内容等。 需要注意的是，具体的实现步骤和代码将根据你所选择的第三方支付平台和其提供的 SDK 进行调整。你需要参考相关文档和示例代码来了解具体的实现细节，并按照其要求进行开发。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

gblfy

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

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

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

打赏作者

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

抵扣说明：

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

余额充值