C# MVC 微信支付教程系列之公眾號支付代碼
今天,我們接著講微信支付的系列教程,前面,我們講了這個微信紅包和掃碼支付?,F(xiàn)在,我們講講這個公眾號支付。公眾號支付的應(yīng)用環(huán)境常見的用戶通過公眾號,然后再通過公眾號里面的菜單鏈接,進(jìn)入公眾號的商城,然后在里面完成購買和支付功能,我們可以看看官方對這個公眾號支付的場景的解釋,鏈接:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_1,通過這個官方的解釋,那我們大概清楚這個公眾號的用途了,下面,我就說說,做這個公眾號支付的準(zhǔn)備工作有哪些了。
1、下載微信web開發(fā)者工具,工具的使用方式,也看鏈接,地址:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140&token=&lang=zh_CN
2、配置“微信支付”環(huán)境,如下圖:
3、授權(quán)獲取用戶信息,如下圖:
下面開始,一步一步往下走。
一、我們先開發(fā)程序,首先,新建一個MVC工程(asp.net的話,官方給的demo就是asp.net的,可以下載來參考:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1),名為:微信支付之公眾號支付,如下圖:
然后右鍵項目,我們修改一下屬性,如下圖:
然后我們再把程序自動生成的HomeController.cs和View里面的刪掉,再新建一個HomeController.cs和添加View,代碼如下:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace Web.Controllers { public class HomeController : Controller { // GET: Home public ActionResult Index() { return View(); } } }
View代碼:
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <div> </div> </body> </html>
嗯,沒錯,目前還是空的,現(xiàn)在我們開始寫前臺,代碼如下(我先貼上代碼,后續(xù)再解釋為啥這么做,因為如果一步步的寫下去,按照前面兩個的篇幅來,我覺得都可以開課了,所以,我先上代碼,然后再一步步解釋。):
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>電表充值服務(wù)</title> <link href="~/Scripts/jquery-easyui-1.4.5/themes/bootstrap/easyui.css" rel="stylesheet" /> <link href="~/Scripts/jquery-easyui-1.4.5/themes/mobile.css" rel="stylesheet" /> <link href="~/Scripts/jquery-easyui-1.4.5/themes/icon.css" rel="stylesheet" /> <style type="text/css"> body{ margin:0; padding:0; } .logo { width: 100%; height: 70px; background: url(/Images/EleLogo.png) 0 0 no-repeat; background-size: 100% 100%; padding: 0; margin: 0; } .line { width: 100%; float: left; height: auto; text-align: center; margin-top: 10px; } .lineText { width: 100%; float: left; height: auto; text-indent: 5%; text-align: left; font-size: x-large; margin: 0; } .function { height: 60pt; line-height: 60pt; width: 45%; float: left; border-radius: 10px; background-color: #990000; margin-left: 8pt; } .title { font-family: "微軟雅黑"; font-size: x-large; color: white; } a { text-decoration: none; color: white; } input { vertical-align: central; } label { vertical-align: central; } .lbBlock { border: 1px solid #808080; background-color: grey; width: 90%; margin-left: 5%; font-size: x-large; border-radius: 10px; text-align: left; text-indent: 10pt; height: 30pt; padding-top: 5pt; } .btn { width: 90%; height: 35pt; font-size: x-large; background-color: #990000; color: white; background: url(/Images/red.png) 0 0 repeat; border: none; border-radius: 10px; margin: 10px 0 0 0; } .input { height: 30pt; width: 90%; font-size: x-large; border-radius: 10px; margin: 0; padding: 0; } </style> </head> <body> <div class="logo"> </div> <form id="ChargeForm"> <div class="line"> <div class="lineText"> 充值金額: </div> </div> <div class="line"> <input type="number" id="ChargeVal" name="ChargeVal" class="input" placeholder="單位:元" /> </div> </form> <div class="line"> <input type="button" class="btn" value="立即充值" onclick="fCharge()" style="margin-top: 20px;" /> </div> <div class="line"> <input type="button" id="btnHome" class="btn" value="返回主頁" onclick="fBackHome()" /> </div> <script src="~/Scripts/jquery-easyui-1.4.5/jquery.min.js"></script> <script src="~/Scripts/jquery-easyui-1.4.5/jquery.easyui.min.js"></script> <script src="~/Scripts/jquery-easyui-1.4.5/jquery.easyui.mobile.js"></script> <script src="~/Scripts/jquery-easyui-1.4.5/easyloader.js"></script> <script type="text/javascript"> $(function () { var vCode = getQueryString("code"); if (vCode != "" && vCode != null) { //alert(vCode); $.ajax({ type: 'post', data: { code: vCode }, url: '/Home/getWxInfo', success: function (sjson) { //alert(sjson); //var vData = JSON.stringify(sjson); //alert(vData); $.messager.show({ title: '提示', msg: '歡迎您來到微信端充值中心。' }); } }) } else { $.ajax({ type: 'post', url: '/Home/getCode', success: function (sjson) { //alert(sjson); location.href = sjson; } }) } }) //獲取url的參數(shù) function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; } //初始化微信支付環(huán)境 function fCharge() { if (typeof WeixinJSBridge == "undefined") { if (document.addEventListener) { document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); } else if (document.attachEvent) { document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); } } else { fPostCharge(); } } //提交充值數(shù)據(jù) function fPostCharge() { var vChargeVal = $("#ChargeVal").val(); vChargeVal = parseFloat(vChargeVal); if (vChargeVal > 0) { $.messager.progress({ title: "", msg: "正在調(diào)用微信支付接口,請稍后..." }); $.ajax({ type: "post", data: "totalfee=" + vChargeVal, url: "/Home/MeterRecharge", success: function (json) { $.messager.progress('close');//記得關(guān)閉 //var json = eval("(" + msg + ")");//轉(zhuǎn)換后的JSON對象 onBridgeReady(json); }, error: function () { $.messager.progress('close');//記得關(guān)閉 $.messager.alert("提示", '調(diào)用微信支付模塊失敗,請稍后再試。', 'info') } }) } else { alert("房間名或者充值金額不可以為空或者為負(fù)數(shù),請確認(rèn)后再試.") } } //調(diào)用微信支付模塊 function onBridgeReady(json) { WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId": json.appId, //公眾號名稱,由商戶傳入 "timeStamp": json.timeStamp, //時間戳,自1970年以來的秒數(shù) "nonceStr": json.nonceStr, //隨機(jī)串 "package": json.packageValue, "signType": "MD5", //微信簽名方式: "paySign": json.paySign //微信簽名 }, function (res) { if (res.err_msg == "get_brand_wcpay_request:ok") { //alert("支付成功,請稍后查詢余額,如有疑問,請聯(lián)系管理員."); fAlreadyPay(); } // 使用以上方式判斷前端返回,微信團(tuán)隊鄭重提示:res.err_msg將在用戶支付成功后返回 ok,但并不保證它絕對可靠。 } ); } function fBackHome() { location.href = "/"; } </script> </body> </html>
后臺代碼如下:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Web.Models; using WxPayAPI; namespace Web.Controllers { public class HomeController : Controller { JsApiPay jsApiPay = new JsApiPay(); // GET: Home public ActionResult Index() { if (Session["openid"] == null) { try { //調(diào)用【網(wǎng)頁授權(quán)獲取用戶信息】接口獲取用戶的openid和access_token GetOpenidAndAccessToken(); } catch (Exception ex) { //Response.Write(ex.ToString()); //throw; } } return View(); } /** * * 網(wǎng)頁授權(quán)獲取用戶基本信息的全部過程 * 詳情請參看網(wǎng)頁授權(quán)獲取用戶基本信息:http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html * 第一步:利用url跳轉(zhuǎn)獲取code * 第二步:利用code去獲取openid和access_token * */ public void GetOpenidAndAccessToken() { if (Session["code"] != null) { //獲取code碼,以獲取openid和access_token string code = Session["code"].ToString(); Log.Debug(this.GetType().ToString(), "Get code : " + code); jsApiPay.GetOpenidAndAccessTokenFromCode(code); } else { //構(gòu)造網(wǎng)頁授權(quán)獲取code的URL string host = Request.Url.Host; string path = Request.Path; string redirect_uri = HttpUtility.UrlEncode("http://" + host + path); //string redirect_uri = HttpUtility.UrlEncode("http://gzh.lmx.ren"); WxPayData data = new WxPayData(); data.SetValue("appid", WxPayConfig.APPID); data.SetValue("redirect_uri", redirect_uri); data.SetValue("response_type", "code"); data.SetValue("scope", "snsapi_base"); data.SetValue("state", "STATE" + "#wechat_redirect"); string url = "https://open.weixin.qq.com/connect/oauth2/authorize?" + data.ToUrl(); Log.Debug(this.GetType().ToString(), "Will Redirect to URL : " + url); Session["url"] = url; } } /// <summary> /// 獲取code /// </summary> /// <returns></returns> [HttpPost] public ActionResult getCode() { object objResult = ""; if (Session["url"] != null) { objResult = Session["url"].ToString(); } else { objResult = "url為空。"; } return Json(objResult); } /// <summary> /// 通過code換取網(wǎng)頁授權(quán)access_token和openid的返回數(shù)據(jù) /// </summary> /// <returns></returns> [HttpPost] public ActionResult getWxInfo() { object objResult = ""; string strCode = Request.Form["code"]; if (Session["access_token"] == null || Session["openid"] == null) { jsApiPay.GetOpenidAndAccessTokenFromCode(strCode); } string strAccess_Token = Session["access_token"].ToString(); string strOpenid = Session["openid"].ToString(); objResult = new { openid = strOpenid, access_token = strAccess_Token }; return Json(objResult); } /// <summary> /// 充值 /// </summary> /// <returns></returns> [HttpPost] public ActionResult MeterRecharge() { object objResult = ""; string strTotal_fee = Request.Form["totalfee"]; string strFee = (double.Parse(strTotal_fee) * 100).ToString(); //若傳遞了相關(guān)參數(shù),則調(diào)統(tǒng)一下單接口,獲得后續(xù)相關(guān)接口的入口參數(shù) jsApiPay.openid = Session["openid"].ToString(); jsApiPay.total_fee = int.Parse(strFee); //JSAPI支付預(yù)處理 try { string strBody = "南宮蕭塵微信支付";//商品描述 WxPayData unifiedOrderResult = jsApiPay.GetUnifiedOrderResult(strBody); WxPayData wxJsApiParam = jsApiPay.GetJsApiParameters();//獲取H5調(diào)起JS API參數(shù),注意,這里引用了官方的demo的方法,由于原方法是返回string的,所以,要對原方法改為下面的代碼,代碼在下一段 ModelForOrder aOrder = new ModelForOrder() { appId = wxJsApiParam.GetValue("appId").ToString(), nonceStr = wxJsApiParam.GetValue("nonceStr").ToString(), packageValue = wxJsApiParam.GetValue("package").ToString(), paySign = wxJsApiParam.GetValue("paySign").ToString(), timeStamp = wxJsApiParam.GetValue("timeStamp").ToString(), msg = "成功下單,正在接入微信支付." }; objResult = aOrder; } catch (Exception ex) { ModelForOrder aOrder = new ModelForOrder() { appId = "", nonceStr = "", packageValue = "", paySign = "", timeStamp = "", msg = "下單失敗,請重試,多次失敗,請聯(lián)系管理員." }; objResult = aOrder; } return Json(objResult); } } }
這里就是上面修改了的代碼,童鞋們請注意
/** * * 從統(tǒng)一下單成功返回的數(shù)據(jù)中獲取微信瀏覽器調(diào)起jsapi支付所需的參數(shù), * 微信瀏覽器調(diào)起JSAPI時的輸入?yún)?shù)格式如下: * { * "appId" : "wx2421b1c4370ec43b", //公眾號名稱,由商戶傳入 * "timeStamp":" 1395712654", //時間戳,自1970年以來的秒數(shù) * "nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //隨機(jī)串 * "package" : "prepay_id=u802345jgfjsdfgsdg888", * "signType" : "MD5", //微信簽名方式: * "paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名 * } * @return string 微信瀏覽器調(diào)起JSAPI時的輸入?yún)?shù),json格式可以直接做參數(shù)用 * 更詳細(xì)的說明請參考網(wǎng)頁端調(diào)起支付API:http://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7 * */ public WxPayData GetJsApiParameters() { Log.Debug(this.GetType().ToString(), "JsApiPay::GetJsApiParam is processing..."); WxPayData jsApiParam = new WxPayData(); jsApiParam.SetValue("appId", unifiedOrderResult.GetValue("appid")); jsApiParam.SetValue("timeStamp", WxPayApi.GenerateTimeStamp()); jsApiParam.SetValue("nonceStr", WxPayApi.GenerateNonceStr()); jsApiParam.SetValue("package", "prepay_id=" + unifiedOrderResult.GetValue("prepay_id")); jsApiParam.SetValue("signType", "MD5"); jsApiParam.SetValue("paySign", jsApiParam.MakeSign()); string parameters = jsApiParam.ToJson(); Log.Debug(this.GetType().ToString(), "Get jsApiParam : " + parameters); return jsApiParam; }
ModelForOrder類的代碼:
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace Web.Models { public class ModelForOrder { public string appId { get; set; } public string timeStamp { get; set; } public string nonceStr { get; set; } public string packageValue { get; set; } public string paySign { get; set; } public string msg { get; set; } } }
還有一個地方需要注意,修改一下的就是這里WxLib/business/JsApiPay.cs,如下圖:
最后,把程序發(fā)布出來,這次咱們把Web發(fā)布在http://gzh.lmx.ren上 ,然后再把接口權(quán)限,改為這樣的,如下圖:
注意,這里面的域名和上面我們發(fā)布的域名要一致。
除此以外,我們還需要改這里:
就是一定要授權(quán)這里,否則,支付的時候,會提示其他錯誤,具體,我就不測試了。
另外,這里其實已經(jīng)完成了這個公眾號的支付的流程了,但是,我們頁面上,會友善的提醒(其實不友善,提示是紅色的,在頭部,提示別輸入密碼什么),這是因為,我們還沒把咱們這個http://gzh.lmx.ren域名設(shè)置為安全域名,設(shè)置之后,就不會在提示了。設(shè)置方法如下圖:
在這里面加入咱們的域名,就完美了。。。
我的代碼都盡量精簡,多余的,我都會丟掉,就是為了避免混淆視聽。如果代碼里面,有寫的不清楚的,可以私信問我,或群里來問我,群號在文章末端。
現(xiàn)在,我開始一一解釋我上面的做法。
首先,在后端,頁面加載的時候,他會先執(zhí)行
public ActionResult Index() { if (Session["openid"] == null) { try { //調(diào)用【網(wǎng)頁授權(quán)獲取用戶信息】接口獲取用戶的openid和access_token GetOpenidAndAccessToken(); } catch (Exception ex) { //Response.Write(ex.ToString()); //throw; } } return View(); }
這里面就是為了獲取用戶的Openid和Access_token,這個用途很大,還有就是,我們通過代碼可以知道,我們通過這個方法,可以獲取到微信的一些相關(guān)信息,獲取完了之后,他會返回到我們的頁面上來,url就存在一個session里面,如下:
Session["url"] = url;
接著,在前端:
當(dāng)頁面加載完畢之后,會執(zhí)行以下JS方法,如下:
$(function () { var vCode = getQueryString("code"); if (vCode != "" && vCode != null) { //alert(vCode); $.ajax({ type: 'post', data: { code: vCode }, url: '/Home/getWxInfo', success: function (sjson) { //alert(sjson); //var vData = JSON.stringify(sjson); //alert(vData); $.messager.show({ title: '提示', msg: '歡迎您來到微信端充值中心。' }); } }) } else { $.ajax({ type: 'post', url: '/Home/getCode', success: function (sjson) { //alert(sjson); location.href = sjson; } }) } })
他會先獲取瀏覽器的url,然后獲取code,就是一般url后面的xxx.com?code=xxx,這里面就是首先判斷有無code,如果沒有code,則,我們?nèi)ズ笈_請求這個code。為什么請求這個code呢?我們來看這個方法: getWxInfo,如下圖:
/// <summary> /// 獲取code /// </summary> /// <returns></returns> [HttpPost] public ActionResult getCode() { object objResult = ""; if (Session["url"] != null) { objResult = Session["url"].ToString(); } else { objResult = "url為空。"; } return Json(objResult); }
他就會返回url到前端,前端通過js去訪問那個網(wǎng)址,那個網(wǎng)址就是微信端獲取到我們的信息之后,給我們按照規(guī)則再返回一個url,這rul就是我們后面需要后去的code的url。這個code對我們至關(guān)重要,因為后面我們要做跟支付有關(guān)的工作,都用到的。有了code,我們才能拿到openid和access_token。具體看代碼邏輯也可以明了。
好,走到這一步,我們已經(jīng)知道openid和access_token了,這個時候,我們就負(fù)責(zé)處理前端的東西。
前端,我就一個金額輸入框,然后一個提交,實際應(yīng)用中,我們肯定還需要傳入商品的參數(shù),我這里面就不寫那些多余的了,后續(xù)你們自己加進(jìn)去就可以了。這里面在點擊提交的時候,會調(diào)用微信的環(huán)境,看下面的代碼:
//初始化微信支付環(huán)境 function fCharge() { if (typeof WeixinJSBridge == "undefined") { if (document.addEventListener) { document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); } else if (document.attachEvent) { document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); } } else { fPostCharge(); } }
他會初始化一下環(huán)境,如果初始化成功,代表,這個頁面是在微信客戶端里面運(yùn)行的,那么我們就給他運(yùn)行我們真正的充值代碼提交,所以,就會執(zhí)行:fPostCharge();
提交之后,就會進(jìn)入后臺,后臺需要組織我們前臺需要用到的參數(shù),其中包括如下:
/// <summary> /// 充值 /// </summary> /// <returns></returns> [HttpPost] public ActionResult MeterRecharge() { object objResult = ""; string strTotal_fee = Request.Form["totalfee"]; string strFee = (double.Parse(strTotal_fee) * 100).ToString(); //若傳遞了相關(guān)參數(shù),則調(diào)統(tǒng)一下單接口,獲得后續(xù)相關(guān)接口的入口參數(shù) jsApiPay.openid = Session["openid"].ToString(); jsApiPay.total_fee = int.Parse(strFee); //JSAPI支付預(yù)處理 try { string strBody = "南宮蕭塵微信支付";//商品描述 WxPayData unifiedOrderResult = jsApiPay.GetUnifiedOrderResult(strBody); WxPayData wxJsApiParam = jsApiPay.GetJsApiParameters();//獲取H5調(diào)起JS API參數(shù) ModelForOrder aOrder = new ModelForOrder() { appId = wxJsApiParam.GetValue("appId").ToString(), nonceStr = wxJsApiParam.GetValue("nonceStr").ToString(), packageValue = wxJsApiParam.GetValue("package").ToString(), paySign = wxJsApiParam.GetValue("paySign").ToString(), timeStamp = wxJsApiParam.GetValue("timeStamp").ToString(), msg = "成功下單,正在接入微信支付." }; objResult = aOrder; } catch (Exception ex) { ModelForOrder aOrder = new ModelForOrder() { appId = "", nonceStr = "", packageValue = "", paySign = "", timeStamp = "", msg = "下單失敗,請重試,多次失敗,請聯(lián)系管理員." }; objResult = aOrder; } return Json(objResult); }
我們主要需要提供的就是這個類ModelForOrder 里面的參數(shù),然后再把這些參數(shù)返回給前臺調(diào)用,如下:
//調(diào)用微信支付模塊 function onBridgeReady(json) { WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId": json.appId, //公眾號名稱,由商戶傳入 "timeStamp": json.timeStamp, //時間戳,自1970年以來的秒數(shù) "nonceStr": json.nonceStr, //隨機(jī)串 "package": json.packageValue, "signType": "MD5", //微信簽名方式: "paySign": json.paySign //微信簽名 }, function (res) { if (res.err_msg == "get_brand_wcpay_request:ok") { //alert("支付成功,請稍后查詢余額,如有疑問,請聯(lián)系管理員."); fAlreadyPay(); } // 使用以上方式判斷前端返回,微信團(tuán)隊鄭重提示:res.err_msg將在用戶支付成功后返回 ok,但并不保證它絕對可靠。 } ); }
這樣,他就會彈出一個微信支付的窗口,如下:
然后我們確認(rèn)付款之后,是否付款成功,如果付款成功,我們在執(zhí)行: fAlreadyPay();
這個方法已經(jīng)被我刪掉了,用途是用于,我們收到用戶的款之后,我們需要同步一些數(shù)據(jù)到我們的數(shù)據(jù)庫里面去,所以,該怎么操作,自己自行修改了。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
C#實現(xiàn)Excel導(dǎo)入sqlite的方法
這篇文章主要介紹了C#實現(xiàn)Excel導(dǎo)入sqlite的方法,是C#程序設(shè)計中非常重要的一個實用技巧,需要的朋友可以參考下2014-09-09