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文件配置

 wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp:,// 必填,后台生成的时间戳
nonceStr: '',//必填,后台生成的随机字符串
signature: '',//必填,后台根据token,ticket,时间戳,和随机字符串生成签名
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'translateVoice',
'startRecord',
'stopRecord',
'onVoiceRecordEnd',
'playVoice',
'onVoicePlayEnd',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard'
]
});

config配置信息

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.
     public static class WeHelper
{
public static string appId
{
get
{
return "";//微信开发者appId
}
}
private static string secret
{
get
{
return "";//微信开发者secret
}
} private static readonly string tokenUrl = "https://api.weixin.qq.com/cgi-bin/token"; private static readonly string ticket = "https://api.weixin.qq.com/cgi-bin/ticket/getticket"; /// <summary>
/// 获取Token
/// </summary>
/// <returns></returns>
public static string GetAccessToken()
{
if (HttpRuntime.Cache.Get("AccessToken") == null)
{
StringBuilder sbUrl = new StringBuilder();
sbUrl.AppendFormat(tokenUrl);
sbUrl.AppendFormat("?grant_type=client_credential");
sbUrl.AppendFormat("&appid={0}", appId);
sbUrl.AppendFormat("&secret={0}", secret);
using (WebClient client = new WebClient())
{
client.Encoding = Encoding.UTF8;
string data = client.UploadString(sbUrl.ToString(), string.Empty);
var result = JObject.Parse(data);
if (result["access_token"] != null && result["access_token"].Value<string>() != string.Empty)
{
string token = result["access_token"].Value<string>();
HttpRuntime.Cache.Insert("AccessToken", token, null, DateTime.Now.AddSeconds(), System.Web.Caching.Cache.NoSlidingExpiration);
return token;
}
else
throw new Exception(data);
}
}
else
{
return HttpRuntime.Cache.Get("AccessToken").ToString();
}
}
/// <summary>
/// 获取token
/// </summary>
/// <param name="accessToken"></param>
/// <returns></returns>
public static string GetTicket(string accessToken)
{
if (HttpRuntime.Cache.Get("Ticket") == null)
{
StringBuilder sbUrl = new StringBuilder();
sbUrl.AppendFormat(ticket);
sbUrl.AppendFormat("?access_token={0}", accessToken);
sbUrl.AppendFormat("&type=jsapi");
using (WebClient client = new WebClient())
{
client.Encoding = Encoding.UTF8;
string data = client.UploadString(sbUrl.ToString(), string.Empty);
var result = JObject.Parse(data);
if (result["ticket"] != null && result["ticket"].Value<string>() != string.Empty)
{
string ticket = result["ticket"].Value<string>();
HttpRuntime.Cache.Insert("Ticket", ticket, null, DateTime.Now.AddSeconds(), System.Web.Caching.Cache.NoSlidingExpiration);
return ticket;
}
else
throw new Exception(data);
}
}
else
{
return HttpRuntime.Cache.Get("Ticket").ToString();
}
}
/// <summary>
/// 获取签名
/// </summary>
/// <param name="timestamp"></param>
/// <param name="noncestr"></param>
/// <param name="url"></param>
/// <returns></returns>
public static string GetSignature(string timestamp,string noncestr,string url)
{
string string1 = "jsapi_ticket=" + GetTicket(GetAccessToken()) + "&noncestr=" + noncestr + "&timestamp=" + timestamp + "&url=" + url;
//使用sha1加密这个字符串
return SHA1(string1);
}
#region 工具类
/// <summary>
/// 生成随机字符串
/// </summary>
/// <returns></returns>
public static string CreateNonceStr()
{
int length = ;
string chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
string str = "";
var rad = new Random();
for (int i = ; i < length; i++)
{
str += chars.Substring(rad.Next(, chars.Length - ), );
}
return str;
} /// <summary>
/// 加密
/// </summary>
/// <param name="str"></param>
/// <returns></returns>
public static string SHA1(string str)
{
str = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(str, "SHA1").ToString();
return str.ToLower();
} /// <summary>
/// 生成时间戳
/// </summary>
/// <returns></returns>
public static string CreateTimestamp()
{
TimeSpan ts = DateTime.UtcNow - new DateTime(, , , , , , );
string timestamp = Convert.ToInt64(ts.TotalSeconds).ToString();
return timestamp;
}
#endregion
}

微信helper生成签名

         /// <summary>
/// 获取微信信息
/// </summary>
/// <returns></returns>
public ActionResult GetWeInfo()
{
string timpstamp = WeHelper.CreateTimestamp();
string nonceStr = WeHelper.CreateNonceStr();
string url = Request.Url.ToString();
string sig = WeHelper.GetSignature(timpstamp, nonceStr, url); return Json(new
{
appId= WeHelper.appId,
timpstamp = timpstamp,
noncestr = nonceStr,
signature = WeHelper.SHA1(sig)
});
}

后台接口

5前台页面

首先要将微信的config信息写入。可以ajax调用。或者后台输出到前台。这里使用ajax调用。

     $(function () {
$.ajax({
type: "post",
dataType: "json",
url: "/Home/GetWeInfo",
success: function (data) {
wx.config({
debug: false,
appId: data.appId,//微信开发者appId
timestamp: data.timestamp,//后台生成的时间戳
nonceStr: data.noncestr,//随机字符串
signature: data.signature,//后台生成的签名
jsApiList: ['checkJsApi', 'scanQRCode']//要调用的微信接口
});
}
});
});

微信config信息写入

    <a class="btn btn-default" onclick="scan()">点击扫一扫</a>

  function scan() {
wx.scanQRCode({
needResult: 1,
scanType: ["qrCode"],
desc: 'scanQRCode desc',
success: function (res) {
alert(JSON.stringify(res));//这里可以获取到扫描得到的内容。
}
});
}

点击按钮扫一扫

备注:

要注意的是token与ticketd在微信端都有7200秒的缓存。并且第一步的URL和第四部的URL都要按照微信要求的格式填写,不要写成局域网的地址。

在微信端调试非常费劲,因为每次都要发布到正式环境。

建议后台多用日志,前台多用log输出或者alert输出,也可以使用微信开发者工具。

如果一切都配置成功的话,返回结果如下:

.Net 调用微信公众号扫一扫的更多相关文章

  1. asp.net core 微信公众号支付(扫码支付,H5支付,公众号支付,app支付)之3

    在微信公众号中访问手机网站,当需要调用支付时候无法使用H5支付,只有使用微信公众号支付,使用公众号支付用户必须关注该公众号同时该公众号必须开通公众号支付功能. 1.获取用户的OpenId ,参考之前写 ...

  2. 调用微信公众平台扫一扫示例及解决接口报错 { "errMsg": "config:invalid signature" }

    一.解决报错问题 单从报错信息 invalid signature 就可以看出是 签名signature 有问题, 查了很多资料,终于知道了问题点, 后台让我直接调接口是不对的,签名是根据请求接口的页 ...

  3. 通过程序调用微信公众号发消息api返回48001

    自己的订阅号,尝试通过写程序来给用户发消息.结果呢,接口返回报错:errcode=48001,errmsg = api unauthorized hint: [ZlPULa02942276!] 去微信 ...

  4. 微信公众号开发之网页中及时获取当前用户Openid及注意事项

    目录 (一)微信公众号开发之VS远程调试 (二)微信公众号开发之基础梳理 (三)微信公众号开发之自动消息回复和自定义菜单 (四)微信公众号开发之网页授权获取用户基本信息 (五)微信公众号开发之网页中及 ...

  5. 微信小程序和微信公众号的id是一个吗

    首先,简单说下我遇到的问题是我们的程序调用微信小程序得到openid,然后通过openID得到用户的唯一标识,用户得以登录,然而,当我们调用微信公众号也同样的到openid,同一以用户两个不同的ope ...

  6. 微信小程序与微信公众号同一用户登录问题

    微信小程序与微信公众号同一用户登录问题 最近在做微信小程序与微信公众号登录合并的接口.整理相关资料以及个人认识的心得写了这篇文章与大家一起分享. 首先,简单说下我遇到的问题是我们的程序调用微信小程序得 ...

  7. 微信公众号开发系统入门教程(公众号注册、开发环境搭建、access_token管理、Demo实现、natapp外网穿透)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/a1786223749/article/ ...

  8. 【原创】微信公众号与HTML 5混合模式揭秘4——jssdk调用微信扫一扫

    微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK 微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片 微信公众号与HTML 5混合模式揭秘3——JSSDK获取地理位置   在JS ...

  9. 微信公众号支付|微信H5支付|微信扫码支付|小程序支付|APP微信支付解决方案总结

    最近负责的一些项目开发,都用到了微信支付(微信公众号支付.微信H5支付.微信扫码支付.APP微信支付).在开发的过程中,在调试支付的过程中,或多或少都遇到了一些问题,今天总结下,分享,留存. 先说注意 ...

随机推荐

  1. 搭建arm交叉工具链

    1.将arm-linux-gcc-4.4.3压缩包,拷到home/armtoolchain下,进行压缩. 2.压缩命令:tar -xzvf arm-linux-gcc-4.4.3.tgz,解压后得到了 ...

  2. myeclipse导入项目时出现Exploded location overlaps an existing deployment错误解决方法

    版权声明:本文为博主原创文章,转载时请注明原文链接. 今天拿别人的项目,在自己的软件上配置,通过tomcat添加项目时出现了 Exploded location overlaps an existin ...

  3. 用 BeautifulSoup爬取58商品信息

    最近对Python爬虫比较迷恋,看了些爬虫相关的教程 于是乎跟着一起爬取了58上面的一些商品信息,并存入到xlsx文件中,并通过xlsxwirter的方法给表格设置了一些格式.好了,直接贴代码吧~ # ...

  4. ASP.NET MVC5(四):数据注解和验证

    前言 用户输入验证的工作,不仅要在客户端浏览器中执行,还要在服务端执行.主要原因是客户端验证会对输入数据给出即时反馈,提高用户体验:服务器端验证,主要是因为不能完全信任用户提供的数据.ASP.NET ...

  5. JAVA WEBSERVICE服务端&客户端的配置及调用(基于JDK)

    前言:我之前是从事C#开发的,因公司项目目前转战JAVA&ANDROID开发,由于对JAVA的各种不了解,遇到的也是重重困难.目前在做WEBSERVICE提供数据支持,看了网上相关大片的资料也 ...

  6. 一劳永逸的解决AFNetworking3.0网络请求问题(面向对象封装大法,block回调)

    AFNetworking在iOS网络请求第三方库中占据着半壁江山,前段时间将AFNetworking进行了3.0版本的迁移,运用面向对象的设计将代码进行封装整合,这篇文章主要为还在寻找AFNetwor ...

  7. js移动端/H5同时选择多张图片上传并使用canvas压缩图片

    最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...

  8. node.js如何制作命令行工具(一)

    之前使用过一些全局安装的NPM包,安装完之后,可以通过其提供的命令,完成一些任务.比如Fis3,可以通过fis3 server start 开启fis的静态文件服务,通过fis3 release开启文 ...

  9. 关于cas-client单点登录客户端拦截请求和忽略/排除不需要拦截的请求URL的问题(不需要修改任何代码,只需要一个配置)

    前言:今天在网上无意间看到cas单点登录排除请求的问题,发现很多人在讨论如何通过改写AuthenticationFilter类来实现忽略/排除请求URL的功能:突发奇想搜了一下,还真蛮多人都是这么干的 ...

  10. CoolBlog开发笔记第4课:数据库模型设计

    教程目录 1.1 CoolBlog开发笔记第1课:项目分析 1.2 CoolBlog开发笔记第2课:搭建开发环境 1.3 CoolBlog开发笔记第3课:创建Django应用 前言 我新书<Py ...