C#微信網頁開發---JSSDK使用 通過config介面注入許可權驗證配置
阿新 • • 發佈：2019-02-01
1： 我們來看，下面的這個是開發需要配置的東西，我們通過開發文件來一個一個的配置
wx.config({ debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。 appId: '', // 必填，公眾號的唯一標識 timestamp: , // 必填，生成簽名的時間戳 nonceStr: '', // 必填，生成簽名的隨機串 signature: '',// 必填，簽名 jsApiList: [] // 必填，需要使用的JS介面列表 });
這個地方AppID，時間戳，隨機字串和js介面列表都很好得到，唯一比較難的就是簽名
2：獲取簽名
（1）：獲取簽名的第一步，需要獲得jsapi_ticket
這個地方需要使用到access_token，access_token獲取方法：http://blog.csdn.net/weixin_39462109/article/details/79438922private static void Getjsapi_ticket() { string url = string.Format("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={0}&type=jsapi",Access_token); string backStr=Common.Get_Request(url); //string backStr = "{ \"errcode\":0,\"errmsg\":\"ok\",\"ticket\":\"kgt8ON7yVITDhtdwci0qeZWDYY9llY5RrKsWxKD--zOUIRYqJ1XwMo305bwZhG22b5hOl-TZ-gZAXCbMMHwvCw\",\"expires_in\":7200}"; string str_ticket = backStr.Split(',')[2].Split(':')[1]; Jsapi_ticket= str_ticket.Substring(1,str_ticket.Length-2); }
3：建立一個WX_Web_Config類，類中封裝簽名方法/// <summary> /// 傳送Get請求，並且得到返回結果 /// </summary> /// <param name="url"></param> /// <returns></returns> public static string Get_Request(string url) { System.Net.WebRequest wrq = System.Net.WebRequest.Create(url); wrq.Method = "GET"; System.Net.WebResponse wrp = wrq.GetResponse(); System.IO.StreamReader sr = new System.IO.StreamReader(wrp.GetResponseStream(), System.Text.Encoding.GetEncoding("UTF-8")); return sr.ReadToEnd(); }
public class WX_Web_Config
{
private bool debug;
private string appId;
private string timestamp;
private string nonceStr;
private string signature;
private List<string> jsApiList=new List<string>();
private string url;
public WX_Web_Config(bool debug, string appId, string timestamp, string nonceStr, string url)
{
this.debug = debug;
this.appId = appId;
this.timestamp = timestamp;
this.nonceStr = nonceStr;
this.url = url;
this.signature = GetSignature();
}
/// <summary>
/// 是否開啟除錯模式
/// </summary>
public bool Debug
{
get
{
return debug;
}
set
{
debug = value;
}
}
/// <summary>
/// 必填，公眾號的唯一標識
/// </summary>
public string AppId
{
get
{
return appId;
}
set
{
appId = value;
}
}
/// <summary>
/// 必填，生成簽名的時間戳
/// </summary>
public string Timestamp
{
get
{
return timestamp;
}
set
{
timestamp = value;
}
}
/// <summary>
/// 必填，生成簽名的隨機串
/// </summary>
public string NonceStr
{
get
{
return nonceStr;
}
set
{
nonceStr = value;
}
}
/// <summary>
/// 必填，簽名
/// </summary>
public string Signature
{
get
{
return signature;
}
set
{
signature = value;
}
}
/// <summary>
/// 必填，需要使用的JS介面列表
/// </summary>
public List<string> JsApiList
{
get
{
return jsApiList;
}
set
{
jsApiList = value;
}
}
public string Url
{
get
{
return url;
}
set
{
url = value;
}
}
/// <summary>
/// 得到簽名
/// </summary>
/// <returns></returns>
private string GetSignature()
{
Hashtable hs = new Hashtable();
hs.Add("jsapi_ticket", MvcApplication.Jsapi_ticket);//獲取的
hs.Add("noncestr", NonceStr);
hs.Add("timestamp", Timestamp);
hs.Add("url", Url);
//得到string1
string string1= formatParameters(hs);
//對string1進行sha1簽名
Signature = HashCode(string1);
return Signature;
}
/// <summary>
/// 引數名ASCII碼從小到大排序（字典序）
/// </summary>
/// <param name="parameters"></param>
/// <returns></returns>
private string formatParameters(Hashtable parameters)
{
StringBuilder sb = new StringBuilder();
ArrayList akeys = new ArrayList(parameters.Keys);
akeys.Sort();
foreach (string k in akeys)
{
string v = (string)parameters[k];//防止引數不是字串
sb.Append(k.ToLower() + "=" + v + "&");
}
//去掉最後一個&
if (sb.Length > 0)
{
sb.Remove(sb.Length - 1, 1);
}
return sb.ToString();
}
/// <summary>
/// 進行sha1簽名
/// </summary>
/// <param name="str"></param>
/// <returns></returns>
public static string HashCode(string str)
{
string rethash = "";
try
{
System.Security.Cryptography.SHA1 hash = System.Security.Cryptography.SHA1.Create();
System.Text.ASCIIEncoding encoder = new System.Text.ASCIIEncoding();
byte[] combined = encoder.GetBytes(str);
hash.ComputeHash(combined);
rethash = Convert.ToBase64String(hash.Hash);
}
catch (Exception ex)
{
string strerr = "Error in HashCode : " + ex.Message;
}
return rethash;
}
}4：建立一個列舉，用來儲存所有的js介面名稱
public enum WX_Web_Js_Interface
{
onMenuShareTimeline,
onMenuShareAppMessage,
onMenuShareQQ,
onMenuShareWeibo,
onMenuShareQZone,
startRecord,
stopRecord,
onVoiceRecordEnd,
playVoice,
pauseVoice,
stopVoice,
onVoicePlayEnd,
uploadVoice,
downloadVoice,
chooseImage,
previewImage,
uploadImage,
downloadImage,
translateVoice,
getNetworkType,
openLocation,
getLocation,
hideOptionMenu,
showOptionMenu,
hideMenuItems,
showMenuItems,
hideAllNonBaseMenuItem,
showAllNonBaseMenuItem,
closeWindow,
scanQRCode,
chooseWXPay,
openProductSpecificView,
addCard,
chooseCard,
openCard
}6：在載入頁面的時候呼叫WX_Web_Config建構函式
namespace 微信開發2018.Controllers
{
public class WebController : Controller
{
// GET: Web
public ActionResult Index()
{
WX_Web_Config config = new WX_Web_Config(true,WebConfigurationManager.AppSettings.Get("AppID"),DateTime.Now.ToLongDateString(),"tangjie", "http://116.21.25.73/Web/Index");
config.JsApiList.Add(WX_Web_Js_Interface.addCard.ToString());
config.JsApiList.Add(WX_Web_Js_Interface.chooseCard.ToString());
return View(config);
}
}
}7：前端介面顯示
@model 微信開發2018.WxCode.WX_Web.WX_Web_Config
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/Menu_LayoutPage.cshtml";
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
}
<h2>載入JSSDK</h2>
<script type="text/javascript">
wx.config({
debug:true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
appId: '@Model.AppId', // 必填，公眾號的唯一標識
timestamp:'@Model.Timestamp' , // 必填，生成簽名的時間戳
nonceStr:'@Model.NonceStr', // 必填，生成簽名的隨機串
signature:' @Model.Signature',// 必填，簽名
jsApiList: @Html.Raw(Json.Encode(Model.JsApiList)), // 必填，需要使用的JS介面列表
});
wx.ready(function(){
// config資訊驗證後會執行ready方法，所有介面呼叫都必須在config介面獲得結果之後，config是一個客戶端的非同步操作，所以如果需要在頁面載入時就呼叫相關介面，則須把相關介面放在ready函式中呼叫來確保正確執行。對於使用者觸發時才呼叫的介面，則可以直接呼叫，不需要放在ready函式中。
console.log("配置成功了");
});
wx.error(function(res){
// config資訊驗證失敗會執行error函式，如簽名過期導致驗證失敗，具體錯誤資訊可以開啟config的debug模式檢視，也可以在返回的res引數中檢視，對於SPA可以在這裡更新簽名。
console.log("配置失敗了");
console.log(res);
});
</script>
8：結果
