想在微站里面实现分享帖子给朋友和朋友圈，显示图片和简介，就这么简单的功能折腾了1星期。。。主要是微信官方文档没看清楚，怪自己了。
官方文档在这里，https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
参考 http://www.cnblogs.com/stoneniqiu/p/6286599.html 这篇文章。
遇到invalid signature签名错误。找了半天，各种调试，终于找到问题了，每个新闻的id是变动的，
url需要传入完整的地址，在微信官方手册里面查到的。
比如页面是http://www.baidu.com/wx.aspx?id=111,需要完整传入，不能仅仅在url里面传入http://www.baidu.com/wx.aspx
下面是 stoneniqiu 的具体做法，大家可以参考一下。
内嵌在微信中的网页，右上角都会有一个默认的分享功能。如下图所示，第一个为自定义的效果，第二个为默认的效果。实现了自定义的分享链接是不是更让人有点击的欲望？下面讲解下开发的过程。
一、准备，设置js接口安全域名
这需要使用微信的jssdk，先需要在微信公众号后台进行设置：公众号设置–>功能设置–>JS接口安全域名。打开这个页面之后你会看到下面的提示。需要先下载这个文件并上传到指定域名的根目录。
这个文件里面是一个字符串，从名称看是用来校验用的。先上传了这个文件，你才能保存成功。这样你就可以使用jssdk了。
二、前端配置
首先要说明的是分享功能是一个配置功能，绑定在按钮的click事件中是没有效果的。也就是说只有点击右上角的分享才有效果(有的文字内容分享不知道是怎么实现的)。官方的js有四个步骤，首先是引入jssdk：
<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
根据官方的配置参数，我们可以定义一个WXShareModel对象:
public class WXShareModel
{
public string appId { get; set; }
public string nonceStr { get; set; }
public long timestamp { get; set; }
public string signature { get; set; }
public string ticket { get; set; }
public string url { get; set; }
public void MakeSign()
{
var string1Builder = new StringBuilder();
string1Builder.Append("jsapi_ticket=").Append(ticket).Append("&")
.Append("noncestr=").Append(nonceStr).Append("&")
.Append("timestamp=").Append(timestamp).Append("&")
.Append("url=").Append(url.IndexOf("#") >= 0 ? url.Substring(0, url.IndexOf("#")) : url);
var string1 = string1Builder.ToString();
signature = Util.Sha1(string1, Encoding.Default);
}
}
然后是进行配置：
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '@Model.appId', // 必填，公众号的唯一标识
timestamp: '@Model.timestamp', // 必填，生成签名的时间戳
nonceStr: '@Model.nonceStr', // 必填，生成签名的随机串
signature: '@Model.signature',// 必填，签名，见附录1
jsApiList: ["checkJsApi", "onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareQZone"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function () {
document.querySelector('#checkJsApi').onclick = function () {
wx.checkJsApi({
jsApiList: [
'getNetworkType',
'previewImage'
],
success: function (res) {
alert(JSON.stringify(res));
}
});
};
//朋友圈
wx.onMenuShareTimeline({
title: '暖木科技', // 分享标题
link: 'http://www.warmwood.com/home/lampindex', // 分享链接
imgUrl: 'http://www.warmwood.com/images/s1.jpg',
success: function (res) {
alert('已分享');
},
cancel: function (res) {
alert('已取消');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
//朋友
wx.onMenuShareAppMessage({
title: '暖木科技', // 分享标题
desc: '宝宝的睡眠很重要，你的睡眠也很重要', // 分享描述
link: 'http://www.warmwood.com/home/lampindex', // 分享链接
imgUrl: 'http://www.warmwood.com/images/s1.jpg', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
alert("分享");
},
cancel: function () {
// 用户取消分享后执行的回调函数
alert("取消分享");
}
});
});
然后剩下就是后端的事情了。后端的关键是获取access_token和jsapi_ticket以及生成正确的签名。另外如果要统计分享的数量，最好就是在success方法中进行统计了。
三、生成签名
1.access_token
获取access_token方法全平台都是一致的。
public const string AccessTokenUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={0}&secret={1}";
public TokenResult GetAccessToken()
{
var url = string.Format(WxDeviceConfig.AccessTokenUrl, WxDeviceConfig.AppId, WxDeviceConfig.APPSECRET);
var res = SendHelp.Send<TokenResult>(null, url, null, CommonJsonSendType.GET);
return res;
}
access_token的超时时间是7200秒，所以先可以缓存起来。SendHelp文章末尾可下载
2.获取jsapi_ticket
access_token的作用就是为了获取jsapi_ticket。用get方式获取，url:https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi,返回的JSON对象如下。
{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200
}
所以可以定义一个模型：
public class jsapiTicketModel
{
public string errcode { get; set; }
public string errmsg { get; set; }
public string ticket { get; set; }
public string expires_in { get; set; }
}
再完成获取ticket的方法：
public jsapiTicketModel GetJsApiTicket(string accessToken)
{
var url = string.Format(WxPayConfig.Jsapi_ticketUrl, accessToken);
return SendHelp.Send<jsapiTicketModel>(accessToken, url, "", CommonJsonSendType.GET);
}
ticket过期时间也是7200秒，并且不能频繁的请求，所以也需要再服务端缓存起来。
private void setCacheTicket(string cache)
{
_cacheManager.Set(tokenKey, cache, 7200);
}
MemoryCacheManager：
View Code
3.签名
终于到这一步了，然后你在文档中看到让你失望的一幕：
么有C#的demo，支付那边都提供了，为啥jssdk没有提供，好吧先不吐槽了。官方也说明白签名的规则。一开始我使用的是https://github.com/night-king/weixinSDK中的签名：
public static string Sha1(string orgStr, string encode = "UTF-8")
{
var sha1 = new SHA1Managed();
var sha1bytes = System.Text.Encoding.GetEncoding(encode).GetBytes(orgStr);
byte[] resultHash = sha1.ComputeHash(sha1bytes);
string sha1String = BitConverter.ToString(resultHash).ToLower();
sha1String = sha1String.Replace("-", "");
return sha1String;
}//错误示例
得出的结果和官方校验的不一致，一直提示签名错误。
正确的写法是：
public static string Sha1(string orgStr, Encoding encode)
{
SHA1 sha1 = new SHA1CryptoServiceProvider();
byte[] bytes_in = encode.GetBytes(orgStr);
byte[] bytes_out = sha1.ComputeHash(bytes_in);
sha1.Dispose();
string result = BitConverter.ToString(bytes_out);
result = result.Replace("-", "");
return result;
}
和官方校验的结果一直后，就ok了（忽略大小写）。另外一个需要注意的地方是签名中的url。如果页面有参数，model中的url也需要带参数，#号后面的不要。不然也是会报签名错误。
public ActionResult H5Share()
{
var model = new WXShareModel();
model.appId = WxPayConfig.APPID;
model.nonceStr = WxPayApi.GenerateNonceStr();
model.timestamp = Util.CreateTimestamp();
model.ticket = GetTicket();
model.url = "http://www.warmwood.com/AuthWeiXin/share";// domain + Request.Url.PathAndQuery;
model.MakeSign();
Logger.Debug("获取到ticket:" + model.ticket);
Logger.Debug("获取到签名:" + model.signature);
return View(model);
}
四、小结
wx.config中的debug为true会alert各种操作结果。参数正确之后界面会提示：
至此，分享的功能就ok了。也就打开了调用其他jssdk的大门。另外文中的SendHelp对象是用的Senparc (基于.net4.5)的dll。
参考资料：
签名校验：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
官方文档：https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
我的核心代码
[System.Web.Services.WebMethod]
public static WXShareModel GetKey(string str)
{
WXShareModel aModel = new WXShareModel();
WXToolsHelper tb = new WXToolsHelper();
string AppId = "你的APPID";
string secret = "你的secret";
string access_token = tb.GetAccess_Token(AppId, secret);
aModel.appId = AppId;
aModel.nonceStr = tb.CreatenNonce_str();
aModel.timestamp = tb.CreatenTimestamp();
aModel.ticket = tb.GetTicket(access_token);
aModel.url = str;
aModel.MakeSign();
return aModel;
}
public class WXShareModel
{
public string appId { get; set; }
public string nonceStr { get; set; }
public long timestamp { get; set; }
public string ticket { get; set; }
public string url { get; set; }
public string signature { get; set; }
public void MakeSign()
{
var string1Builder = new StringBuilder();
string1Builder.Append("jsapi_ticket=").Append(ticket).Append("&")
.Append("noncestr=").Append(nonceStr).Append("&")
.Append("timestamp=").Append(timestamp).Append("&")
.Append("url=").Append(url.IndexOf("#") >= 0 ? url.Substring(0, url.IndexOf("#")) : url);
var string1 = string1Builder.ToString();
signature = Sha1(string1, Encoding.Default);
}
public static string Sha1(string orgStr, Encoding encode)
{
SHA1CryptoServiceProvider sha1 = new SHA1CryptoServiceProvider();
byte[] bytes_in = encode.GetBytes(orgStr);
byte[] bytes_out = sha1.ComputeHash(bytes_in);
sha1.Dispose();
string result = BitConverter.ToString(bytes_out);
result = result.Replace("-", "");
return result;
}
public class WXToolsHelper
{
/// <summary>
/// 获取全局的access_token,程序缓存
/// </summary>
/// <param name="AppId">第三方用户唯一凭证</param>
/// <param name="AppSecret">第三方用户唯一凭证密钥，即appsecret</param>
/// <returns>得到的全局access_token</returns>
public string GetAccess_Token(string AppId, string AppSecret)
{
try
{
//先查缓存数据
if (HttpContext.Current.Cache["access_token"] != null)
{
return HttpContext.Current.Cache["access_token"].ToString();
}
else
{
return GetToken(AppId, AppSecret);
}
}
catch
{
return GetToken(AppId, AppSecret);
}
}
/// <summary>
/// 获取全局的access_token
/// </summary>
/// <param name="AppId">第三方用户唯一凭证</param>
/// <param name="AppSecret">第三方用户唯一凭证密钥，即appsecret</param>
/// <returns>得到的全局access_token</returns>
public string GetToken(string AppId, string AppSecret)
{
var client = new System.Net.WebClient();
client.Encoding = System.Text.Encoding.UTF8;
var url = string.Format("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={0}&secret={1}", AppId, AppSecret);
var data = client.DownloadString(url);
var jss = new JavaScriptSerializer();
var access_tokenMsg = jss.Deserialize<Dictionary<string, object>>(data);
//放入缓存中
HttpContext.Current.Cache.Insert("access_token", access_tokenMsg["access_token"], null, DateTime.Now.AddSeconds(7100), TimeSpan.Zero, CacheItemPriority.Normal, null);
//清除jsapi_ticket缓存
HttpContext.Current.Cache.Remove("ticket");
//获取jsapi_ticket,为了同步
GetTicket(access_tokenMsg["access_token"].ToString());
return access_tokenMsg["access_token"].ToString();
}
/// <summary>
/// 获取jsapi_ticket,程序缓存
/// </summary>
/// <param name="access_token">全局的access_token</param>
/// <returns>得到的jsapi_ticket</returns>
public string GetJsapi_Ticket(string access_token)
{
try
{
//先查缓存数据
if (HttpContext.Current.Cache["ticket"] != null)
{
return HttpContext.Current.Cache["ticket"].ToString();
}
else
{
return GetTicket(access_token);
}
}
catch
{
return GetTicket(access_token);
}
}
/// <summary>
/// 获取jsapi_ticket
/// </summary>
/// <param name="access_token">全局的access_token</param>
/// <returns>得到的jsapi_ticket</returns>
public string GetTicket(string access_token)
{
var client = new System.Net.WebClient();
client.Encoding = System.Text.Encoding.UTF8;
var url = string.Format("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={0}&type=jsapi", access_token);
var data = client.DownloadString(url);
var jss = new JavaScriptSerializer();
var ticketMsg = jss.Deserialize<Dictionary<string, object>>(data);
try
{
//放入缓存中
HttpContext.Current.Cache.Insert("ticket", ticketMsg["ticket"], null, DateTime.Now.AddSeconds(7100), TimeSpan.Zero, CacheItemPriority.Normal, null);
return ticketMsg["ticket"].ToString();
}
catch (Exception ex)
{
return ex.Message;
}
}
/// <summary>
/// 微信权限签名的 sha1 算法
/// 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同
/// </summary>
/// <param name="jsapi_ticket">获取到的jsapi_ticket</param>
/// <param name="noncestr">生成签名的随机串</param>
/// <param name="timestamp">生成签名的时间戳</param>
/// <param name="url">签名用的url必须是调用JS接口页面的完整URL</param>
/// <returns></returns>
public string GetShal(string jsapi_ticket, string noncestr, long timestamp, string url)
{
string strSha1 = string.Format("jsapi_ticket={0}&noncestr={1}×tamp={2}&url={3}", jsapi_ticket, noncestr, timestamp, url);
return System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(strSha1, "sha1").ToLower();
}
/// <summary>
/// 微信权限签名( sha1 算法 )
/// 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同
/// </summary>
/// <param name="AppId">第三方用户唯一凭证</param>
/// /// <param name="AppSecret">第三方用户唯一凭证密钥，即appsecret</param>
/// <param name="noncestr">生成签名的随机串</param>
/// <param name="timestamp">生成签名的时间戳</param>
/// <param name="url">签名用的url必须是调用JS接口页面的完整URL</param>
/// <returns></returns>
public string Get_Signature(string AppId, string AppSecret, string noncestr, long timestamp, string url)
{
string access_token = GetAccess_Token(AppId, AppSecret); //获取全局的access_token
string jsapi_ticket = GetJsapi_Ticket(access_token); //获取jsapi_ticket
string strSha1 = string.Format("jsapi_ticket={0}&noncestr={1}×tamp={2}&url={3}", jsapi_ticket, noncestr, timestamp, url);
return System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(strSha1, "sha1").ToLower();
}
/// <summary>
/// 微信权限签名( sha1 算法 )
/// 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同
/// </summary>
/// <param name="AppId">第三方用户唯一凭证</param>
/// /// <param name="AppSecret">第三方用户唯一凭证密钥，即appsecret</param>
/// <param name="noncestr">生成签名的随机串</param>
/// <param name="timestamp">生成签名的时间戳</param>
/// <param name="url">签名用的url必须是调用JS接口页面的完整URL</param>
/// <returns></returns>
public void signatureOut(string AppId, string AppSecret, string noncestr, long timestamp, string url, out string access_token, out string jsapi_ticket, out string signature)
{
access_token = GetAccess_Token(AppId, AppSecret); //获取全局的access_token
jsapi_ticket = GetJsapi_Ticket(access_token); //获取jsapi_ticket
string strSha1 = string.Format("jsapi_ticket={0}&noncestr={1}×tamp={2}&url={3}", jsapi_ticket, noncestr, timestamp, url);
signature = System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(strSha1, "sha1").ToLower();
}
private string[] strs = new string[]
{
"a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z",
"A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"
};
/// <summary>
/// 创建随机字符串
/// </summary>
/// <returns></returns>
public string CreatenNonce_str()
{
Random r = new Random();
var sb = new StringBuilder();
var length = strs.Length;
for (int i = 0; i < 15; i++)
{
sb.Append(strs[r.Next(length - 1)]);
}
return sb.ToString();
}
/// <summary>
/// 创建时间戳
/// </summary>
/// <returns></returns>
public long CreatenTimestamp()
{
return (DateTime.Now.ToUniversalTime().Ticks - 621355968000000000) / 10000000;
}
}
前段调用
var strUrl = location.href.split('#')[0];
$.ajax({
type: "Post",
url: "config.aspx/GetKey",
//方法传参的写法一定要对，strUrl为形参的名字
data: "{'str':'" + strUrl + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
//返回的数据用data.d获取内容
$("#wx-share-sign").val(data.d.signature);
wxconifg(data.d);
},
error: function (err) {
alert('55');
}
});
function wxconifg(WXDate) {
wx.config({
debug: false,
appId: '你的APPID',
timestamp: WXDate.timestamp,
nonceStr: WXDate.nonceStr,
signature: WXDate.signature,
jsApiList: ["checkJsApi", "onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareQZone"]
});
wx.ready(function () {
wx.onMenuShareAppMessage({
title: $("#wx-share-title").val(),
desc: $("#wx-share-desc").val(),
link: strUrl,
imgUrl: $("#wx-share-img").val(),
trigger: function (res) {
},
success: function (res) {
},
cancel: function (res) {
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
//分享到朋友圈
wx.onMenuShareTimeline({
title: 'XX新闻|'+$("#wx-share-desc").val(),
desc: $("#wx-share-desc").val(),
link: $("#wx-share-link").val(),
imgUrl: $("#wx-share-img").val(),
type: 'link',
dataUrl: strUrl,
trigger: function (res) {
},
success: function (res) {
},
cancel: function (res) {
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
});
}
首页
点击拨打 18150366706(微信同号)