微信jsapi开发教程之如何获取jsapi_ticket(第二课)

本文详细介绍微信JS-SDK配置步骤及注意事项,包括必要参数解释、获取jsapi_ticket方法及代码示例。

我们在看微信jsapi开发文档发现,想要使用微信jsapi不仅要绑定已备案的域名,而且还需要一大堆接口注入权限验证。本人感觉有点麻烦,但是也没办法,谁让微信这么火呢。

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

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

上面就是微信官方文档的说明,本来要高高兴兴的去接入微信开发,这下傻眼了,特别是初学者完全蒙了,接下来我们看看微信官方文档给的代码示例:

1
2
3
4
5
6
7
8
wx.config({
     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
     appId: '', // 必填,公众号的唯一标识
     timestamp: , // 必填,生成签名的时间戳
     nonceStr: '', // 必填,生成签名的随机串
     signature: '',// 必填,签名,见附录1
     jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

timestamp,nonceStr,signature,尼玛 这三个参数什么鬼,appid尚可知道,这三个参数好吧,让我们看附录1,那就看附录1吧,请看下面微信官方文档的附录1说明

jsapi_ticket

生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket 。

1.参考以下文档获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token):../15/54ce45d8d30b6bf6758f68d2e95bc627.html

2.用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket):https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

看到这里是不是蒙了,什么鬼,预先了解timestamp,nonceStr,signature,还必须获取jsapi_ticket,算了,既然官方文档说要获取jsapi_ticket那么就获取吧,在这里呢我只展示java获取jsapi_ticket。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
package  com.test.util;
import  java.io.BufferedReader;
import  java.io.IOException;
import  java.io.InputStreamReader;
import  java.net.MalformedURLException;
import  java.net.URL;
import  java.net.URLConnection;
import  net.sf.json.JSONObject;
import  com.test.weixin.TestAcessToken;
/***
  * @author V型知识库  www.vxzsk.com
  *
  */
public  class  JsapiTicketUtil {
     
     /***
      * 模拟get请求
      * @param url
      * @param charset
      * @param timeout
      * @return
      */
      public  static  String sendGet(String url, String charset,  int  timeout)
       {
         String result =  "" ;
         try
         {
           URL u =  new  URL(url);
           try
           {
             URLConnection conn = u.openConnection();
             conn.connect();
             conn.setConnectTimeout(timeout);
             BufferedReader in =  new  BufferedReader( new  InputStreamReader(conn.getInputStream(), charset));
             String line= "" ;
             while  ((line = in.readLine()) !=  null )
             {
             
               result = result + line;
             }
             in.close();
           catch  (IOException e) {
             return  result;
           }
         }
         catch  (MalformedURLException e)
         {
           return  result;
         }
       
         return  result;
       }
      /***
       * 获取acess_token 
       * 来源www.vxzsk.com
       * @return
       */
      public  static  String getAccessToken(){
             String appid= "你公众号基本设置里的应用id" ; //应用ID
             String appSecret= "你公众号基本设置里的应用密钥" ; //(应用密钥)
             String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" +appid+ "&secret=" +appSecret+ "" ;
             String backData=TestAcessToken.sendGet(url,  "utf-8" 10000 );
             String accessToken = (String) JSONObject.fromObject(backData).get( "access_token" );  
             return  accessToken;
      }
     /***
       * 获取jsapiTicket
       * 来源 www.vxzsk.com
       * @return
       */
     public  static  String getJSApiTicket(){ 
         //获取token
         String acess_token= JsapiTicketUtil.getAccessToken();
           
         String urlStr =  "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" +acess_token+ "&type=jsapi" ;  
         String backData=TestAcessToken.sendGet(urlStr,  "utf-8" 10000 );  
         String ticket = (String) JSONObject.fromObject(backData).get( "ticket" );  
         return   ticket;  
           
     }  
      public  static  void  main(String[] args) {
         String jsapiTicket = JsapiTicketUtil.getJSApiTicket();
         System.out.println( "调用微信jsapi的凭证票为:" +jsapiTicket);
         }
}

把上面的代码直接复制到Eclipse或者myeclipse中只想main方法即可,但是这里有个梗?

第58行到65行这段代码是获取access_token的方法,因为要获取ticket需要这个参数,但是这里有两个参数需要读者填写,一个是appid,另一个是appSecret,代码的注释已经说得很明白了,我在这里就不在累述。

此文章本站原创,地址  http://www.vxzsk.com/77.html   转载请注明出处!谢谢!
### 使用JavaScript获取微信JSAPI Ticket 为了使用微信JSAPI功能,开发者需先获得`jsapi_ticket`。此过程通常涉及服务器端操作来请求`access_token`以及基于该令牌进一步取得`jsapi_ticket`。然而,在某些场景下,可以考虑利用服务端提供的API接口并通过前端调用来间接完成这一流程。 #### 前提条件 确保已经完成了如下设置: - 已经绑定了合法备案的域名到微信公众平台账号上[^1]。 - 完成了应用认证并获得了AppID和AppSecret用于后续的身份验证[^4]。 #### 实现方案概述 由于直接通过纯客户端(即浏览器环境下的JavaScript)无法安全地获取`jsapi_ticket`——因为这涉及到敏感信息如AppSecret的安全存储问题——推荐的做法是由后端提供一个HTTP API供前端调用,而后端负责处理与微信官方服务器之间的通信以保护凭证数据不暴露给最终用户的浏览器环境中。 #### 后端支持 假设存在这样一个由Node.js编写的简单RESTful API作为例子展示如何返回`jsapi_ticket`: ```javascript const express = require('express'); const axios = require('axios'); // 创建Express应用程序实例 let app = express(); app.get('/getJsApiTicket', async (req, res) => { try { const appId = 'YOUR_APP_ID'; const appSecret = 'YOUR_APP_SECRET'; // Step 1: Get access token from WeChat server. let accessTokenResponse = await axios({ method: 'GET', url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret}` }); let accessToken = accessTokenResponse.data.access_token; // Step 2: Use the obtained access token to get jsapi_ticket. let ticketResponse = await axios({ method: 'GET', url: `https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=${accessToken}`, }); if(ticketResponse.status === 200 && ticketResponse.data.errcode === 0){ res.json({success:true,ticket:ticketResponse.data.ticket}); }else{ throw new Error(`Failed to fetch jsapi_ticket`); } } catch(error){ console.error(error); res.status(500).send("Internal Server Error"); } }); // Start listening on port 3000 or any other available ports you prefer. app.listen(process.env.PORT || 3000, () => { console.log('Server is running...'); }); ``` 这段代码展示了怎样创建一个简单的Node.js Express应用,它接受来自前端的请求,并向微信服务器发起两个连续的HTTPS GET请求:首先是为获取`access_token`,接着再用这个token去换取`jsapi_ticket`[^2]。 #### 前端集成 一旦有了上述的服务端支持,就可以很容易地在网页中加入相应的逻辑来加载必要的配置参数了。这里给出一段HTML片段加上少量jQuery辅助函数的例子说明如何做这一点: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Document</title> <!-- Include jQuery library --> <script src="/libs/jquery/jquery-3.2.1.min.js"></script> <!-- Import wechat JS SDK --> <script src="//res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script type="text/javascript"> $(document).ready(function(){ $.getJSON("/getJsApiTicket", function(data){ wx.config({ debug: false, appId: 'YOUR_APP_ID', // 必填,公众号的唯一标识 timestamp: Date.now(), // 必填,生成签名的时间戳 nonceStr: Math.random().toString(36).substr(2), // 必填,生成签名的随机串 signature: '', // 必填,签名,见附录1 jsApiList: [] // 必填,需要使用的JS接口列表 }); // 这里应该填写实际计算得到的signature值, // 并且将jsApiList填充为你计划启用的功能名称数组 // 注意这里的signature应该是根据官方文档指导的方式计算出来的哈希字符串 // 而不是简单地把从后端拿到的ticket当作signature使用 }); }) </script> <body> ... </body> </html> ``` 需要注意的是,在真实的应用程序中,应当按照微信官方指南正确构建`signature`字段而不是像上面那样留空;同时也要记得更新`jsApiList`以便激活所需的具体JSAPI特性[^3]。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值