1.绑定域名
去微信公众号平台中设置js接口安全域名,要注意的是不填写http://, 只填写域名即可,如 www.baidu.com。
一个月只能修改三次,要谨慎填写。
2.引入JS文件
在页面中引入微信js脚本文件。 <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
3.写入config文件配置
1 wx.config({config配置信息
2 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
3 appId: '', // 必填,公众号的唯一标识
4 timestamp:,// 必填,后台生成的时间戳
5 nonceStr: '',//必填,后台生成的随机字符串
6 signature: '',//必填,后台根据token,ticket,时间戳,和随机字符串生成签名
7 jsApiList: [
8 'checkJsApi',
9 'onMenuShareTimeline',
10 'onMenuShareAppMessage',
11 'onMenuShareQQ',
12 'onMenuShareWeibo',
13 'onMenuShareQZone',
14 'hideMenuItems',
15 'showMenuItems',
16 'hideAllNonBaseMenuItem',
17 'showAllNonBaseMenuItem',
18 'translateVoice',
19 'startRecord',
20 'stopRecord',
21 'onVoiceRecordEnd',
22 'playVoice',
23 'onVoicePlayEnd',
24 'pauseVoice',
25 'stopVoice',
26 'uploadVoice',
27 'downloadVoice',
28 'chooseImage',
29 'previewImage',
30 'uploadImage',
31 'downloadImage',
32 'getNetworkType',
33 'openLocation',
34 'getLocation',
35 'hideOptionMenu',
36 'showOptionMenu',
37 'closeWindow',
38 'scanQRCode',
39 'chooseWXPay',
40 'openProductSpecificView',
41 'addCard',
42 'chooseCard',
43 'openCard'
44 ]
45 });
4.调用接口
(1)首先要知道微信给你生成的AppID和AppSecret,
(2)根据AppId和AppSecret到https://api.weixin.qq.com/cgi-bin/token获取AccessToken。
access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token)
(3)然后拿着Token到https://api.weixin.qq.com/cgi-bin/ticket/getticket获取ticket。
用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket)
(4)然后根据ticket和随机字符串和时间戳和当前页面的url生成Signature(签名)。
签名算法:签名生成规则如下:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。
(a){对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。
(b)对string1进行sha1签名,得到signature.
1 public static class WeHelper微信helper生成签名
2 {
3 public static string appId
4 {
5 get
6 {
7 return "";//微信开发者appId
8 }
9 }
10 private static string secret
11 {
12 get
13 {
14 return "";//微信开发者secret
15 }
16 }
17
18 private static readonly string tokenUrl = "https://api.weixin.qq.com/cgi-bin/token";
19
20 private static readonly string ticket = "https://api.weixin.qq.com/cgi-bin/ticket/getticket";
21
22 /// <summary>
23 /// 获取Token
24 /// </summary>
25 /// <returns></returns>
26 public static string GetAccessToken()
27 {
28 if (HttpRuntime.Cache.Get("AccessToken") == null)
29 {
30 StringBuilder sbUrl = new StringBuilder();
31 sbUrl.AppendFormat(tokenUrl);
32 sbUrl.AppendFormat("?grant_type=client_credential");
33 sbUrl.AppendFormat("&appid={0}", appId);
34 sbUrl.AppendFormat("&secret={0}", secret);
35 using (WebClient client = new WebClient())
36 {
37 client.Encoding = Encoding.UTF8;
38 string data = client.UploadString(sbUrl.ToString(), string.Empty);
39 var result = JObject.Parse(data);
40 if (result["access_token"] != null && result["access_token"].Value<string>() != string.Empty)
41 {
42 string token = result["access_token"].Value<string>();
43 HttpRuntime.Cache.Insert("AccessToken", token, null, DateTime.Now.AddSeconds(7200), System.Web.Caching.Cache.NoSlidingExpiration);
44 return token;
45 }
46 else
47 throw new Exception(data);
48 }
49 }
50 else
51 {
52 return HttpRuntime.Cache.Get("AccessToken").ToString();
53 }
54 }
55 /// <summary>
56 /// 获取token
57 /// </summary>
58 /// <param name="accessToken"></param>
59 /// <returns></returns>
60 public static string GetTicket(string accessToken)
61 {
62 if (HttpRuntime.Cache.Get("Ticket") == null)
63 {
64 StringBuilder sbUrl = new StringBuilder();
65 sbUrl.AppendFormat(ticket);
66 sbUrl.AppendFormat("?access_token={0}", accessToken);
67 sbUrl.AppendFormat("&type=jsapi");
68 using (WebClient client = new WebClient())
69 {
70 client.Encoding = Encoding.UTF8;
71 string data = client.UploadString(sbUrl.ToString(), string.Empty);
72 var result = JObject.Parse(data);
73 if (result["ticket"] != null && result["ticket"].Value<string>() != string.Empty)
74 {
75 string ticket = result["ticket"].Value<string>();
76 HttpRuntime.Cache.Insert("Ticket", ticket, null, DateTime.Now.AddSeconds(7200), System.Web.Caching.Cache.NoSlidingExpiration);
77 return ticket;
78 }
79 else
80 throw new Exception(data);
81 }
82 }
83 else
84 {
85 return HttpRuntime.Cache.Get("Ticket").ToString();
86 }
87 }
88 /// <summary>
89 /// 获取签名
90 /// </summary>
91 /// <param name="timestamp"></param>
92 /// <param name="noncestr"></param>
93 /// <param name="url"></param>
94 /// <returns></returns>
95 public static string GetSignature(string timestamp,string noncestr,string url)
96 {
97 string string1 = "jsapi_ticket=" + GetTicket(GetAccessToken()) + "&noncestr=" + noncestr + "×tamp=" + timestamp + "&url=" + url;
98 //使用sha1加密这个字符串
99 return SHA1(string1);
100 }
101 #region 工具类
102 /// <summary>
103 /// 生成随机字符串
104 /// </summary>
105 /// <returns></returns>
106 public static string CreateNonceStr()
107 {
108 int length = 16;
109 string chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
110 string str = "";
111 var rad = new Random();
112 for (int i = 0; i < length; i++)
113 {
114 str += chars.Substring(rad.Next(0, chars.Length - 1), 1);
115 }
116 return str;
117 }
118
119 /// <summary>
120 /// 加密
121 /// </summary>
122 /// <param name="str"></param>
123 /// <returns></returns>
124 public static string SHA1(string str)
125 {
126 str = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(str, "SHA1").ToString();
127 return str.ToLower();
128 }
129
130 /// <summary>
131 /// 生成时间戳
132 /// </summary>
133 /// <returns></returns>
134 public static string CreateTimestamp()
135 {
136 TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);
137 string timestamp = Convert.ToInt64(ts.TotalSeconds).ToString();
138 return timestamp;
139 }
140 #endregion
141 }
1 /// <summary>后台接口
2 /// 获取微信信息
3 /// </summary>
4 /// <returns></returns>
5 public ActionResult GetWeInfo()
6 {
7 string timpstamp = WeHelper.CreateTimestamp();
8 string nonceStr = WeHelper.CreateNonceStr();
9 string url = Request.Url.ToString();
10 string sig = WeHelper.GetSignature(timpstamp, nonceStr, url);
11
12 return Json(new
13 {
14 appId= WeHelper.appId,
15 timpstamp = timpstamp,
16 noncestr = nonceStr,
17 signature = WeHelper.SHA1(sig)
18 });
19 }
5前台页面
首先要将微信的config信息写入。可以ajax调用。或者后台输出到前台。这里使用ajax调用。
1 $(function () {微信config信息写入
2 $.ajax({
3 type: "post",
4 dataType: "json",
5 url: "/Home/GetWeInfo",
6 success: function (data) {
7 wx.config({
8 debug: false,
9 appId: data.appId,//微信开发者appId
10 timestamp: data.timestamp,//后台生成的时间戳
11 nonceStr: data.noncestr,//随机字符串
12 signature: data.signature,//后台生成的签名
13 jsApiList: ['checkJsApi', 'scanQRCode']//要调用的微信接口
14 });
15 }
16 });
17 });
1 <a class="btn btn-default" onclick="scan()">点击扫一扫</a>点击按钮扫一扫
2
3 function scan() {
4 wx.scanQRCode({
5 needResult: 1,
6 scanType: ["qrCode"],
7 desc: 'scanQRCode desc',
8 success: function (res) {
9 alert(JSON.stringify(res));//这里可以获取到扫描得到的内容。
10 }
11 });
12 }
备注:
要注意的是token与ticketd在微信端都有7200秒的缓存。并且第一步的URL和第四部的URL都要按照微信要求的格式填写,不要写成局域网的地址。
在微信端调试非常费劲,因为每次都要发布到正式环境。
建议后台多用日志,前台多用log输出或者alert输出,也可以使用微信开发者工具。
如果一切都配置成功的话,返回结果如下: