.NET C#使用微信公眾號登入網站_實用技巧

適用於：本文適用於有一定微信開發基礎的使用者　　

引言：
花了300大洋申請了微信公眾平台後，發現不能使用微信公眾號登入網站(非微信開啟)獲得微信帳號。仔細研究後才發現還要再花300大洋申請微信開放平台才能接入網站的登入。於是做為屌絲程式員的我想到了自己做一個登入介面。

工具和環境：
1. VS2013 .net4.0 C# MVC4.0 Razor
2.外掛程式
A. Microsoft.AspNet.SignalR;時時擷取後台資料
B.Gma.QrCodeNet.Encoding;文本產生二維碼 

實現的目標
1. 在電腦上開啟網站登入頁，提示使用者使用微信掃描登入確認。
2.使用者通過微信掃描確認後，電腦自動收到確認資訊跳轉到網站首頁。 

原理分析
 1.SignalR是一個神奇的工具，能從瀏覽器A發送資訊到伺服器，伺服器自動推送訊息到指定的瀏覽器B。那麼我的計劃是用電腦的瀏覽器開啟登入頁，產生一個二維碼(內容為帶有微信公眾平台網頁使用者受權的網址)，用微信的描碼功能開啟這個網站。將擷取的微信使用者OPENID通過SignalR發送到電腦瀏覽器，實現登入功能

 實現過程
1.微信公從平台的註冊和許可權(略過...)
2.VS2013中建立MVC網站,我用的環境為.NET4.0 C# MVC4.0  Razor引擎(個人習慣)。

3.安裝 SignalR
 VS2013 點擊工具 ==> 庫封裝管理員 ==> 程式包管理主控台

 輸入以下命令:
 Install-Package Microsoft.AspNet.SignalR -Version 1.1.4 

.net4.0 Mvc4環境下建議安裝1.1.4高版本安裝不上

 安裝 SingnalR成功 

設定SignalR

var config = new Microsoft.AspNet.SignalR.HubConfiguration();
 config.EnableCrossDomain = true;
 RouteTable.Routes.MapHubs(config); 

建立一個類 PushHub.cs 

using Microsoft.AspNet.SignalR;using Microsoft.AspNet.SignalR.Hubs;using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace WD.C.Utility{ /// <summary> /// 標註Single javascription要串連的名稱 /// </summary> [HubName("pushHub")] public class PushHub : Hub { /// <summary> /// 臨時儲存請求的使用者 /// </summary> static Dictionary<string, string> rlist = new Dictionary<string, string>();  /// <summary> /// 登入請求的使用者;開啟Login頁執行本方法,用於記錄瀏覽器串連的ID /// </summary> public void ruserConnected() { if (!rlist.ContainsKey(Context.ConnectionId)) rlist.Add(Context.ConnectionId, string.Empty); //Client方式表示對指定ID的瀏覽器發送GetUserId方法,瀏覽器通過javascrip方法GetUserId(string)得到後台發來的Context.ConnectionId Clients.Client(Context.ConnectionId).GetUserId(Context.ConnectionId); } /// <summary> /// 實際登入的使用者 /// </summary> /// <param name="ruser">請求的使用者ID</param> /// <param name="logUserID">微信OPENID</param> public void logUserConnected(string ruser, string logUserID) { if (rlist.ContainsKey(ruser)) { rlist.Remove(ruser); //Client方式表示對指定ID的瀏覽器發送GetUserId方法,瀏覽器通過javascrip方法userLoginSuccessful(bool,string)得到後台發來的登入成功，和微信OPENID Clients.Client(ruser).userLoginSuccessful(true, logUserID); } }  }}

建立一個MVC控制器"LoginController.cs",這個不會看別的教程; 

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace WD.C.Controllers{ public class LoginController : Controller { // // GET: /Login/ /// <summary> /// 登入首頁,電腦端開啟 /// </summary> /// <returns></returns> public ActionResult Index() { /*參考 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842&token=&lang=zh_CN *1.URL用於產生二維碼給微信掃描 *2.格式參考微信公從平台協助 * https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 若提示“該連結無法訪問”，請檢查參數是否填寫錯誤，是否擁有scope參數對應的授權範圍許可權。  *3.REDIRECT_URI內容為返回地址，需要開發人員需要先到公眾平台官網中的“開發 - 介面許可權 - 網頁服務 - 網頁帳號 - 網頁授權擷取使用者基本資料”的配置選項中，修改授權回調網域名稱 *4.REDIRECT_URI應回調到WxLog頁並進行URLEncode編碼,如: redirect_uri=GetURLEncode("http://你的網站/Login/WxLog?ruser="); ruser為PushHub中的Context.ConnectionId到View中配置  * */ ViewBag.Url = string.Format("https://open.weixin.qq.com/connect/oauth2/authorize?appid={0}&redirect_uri={1}&response_type=code&scope=snsapi_base&state={2}#wechat_redirect", B.Helper.AppID, GetURLEncode("http://你的網站/Login/WxLog?ruser="), Guid.NewGuid()); return View(); } /// <summary> /// 登入確認頁,微信端開啟 /// </summary> /// <param name="ruser"></param> /// <returns></returns> public ActionResult WxLog(string ruser) { //使用微信登入if (!string.IsNullOrEmpty(code)) { string loguser= B.Helper.GetOpenIDByCode(code); Session["LogUserID"] =loguser; ViewBag.LogUserID = loguser; } ViewBag.ruser = ruser; return View();  }  }}

控制器 "QRController.cs"用於文本產生二維碼 

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace WD.C.Controllers{ public class QRController : Controller { // // GET: /QR/ public ActionResult Index() { return View(); } /// <summary> /// 獲得2維碼圖片 /// </summary> /// <param name="str"></param> /// <returns></returns> public ActionResult GetQRCodeImg(string str) { using (var ms = new System.IO.MemoryStream()) { string stringtest = str; GetQRCode(stringtest, ms); Response.ContentType = "image/Png"; Response.OutputStream.Write(ms.GetBuffer(), 0, (int)ms.Length); System.Drawing.Bitmap img = new System.Drawing.Bitmap(100, 100); img.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg); Response.End(); return File(ms.ToArray(), @"image/jpeg"); } } private static bool GetQRCode(string strContent, System.IO.MemoryStream ms) { Gma.QrCodeNet.Encoding.ErrorCorrectionLevel Ecl = Gma.QrCodeNet.Encoding.ErrorCorrectionLevel.M; //誤差校正水平  string Content = strContent;//待編碼內容 Gma.QrCodeNet.Encoding.Windows.Render.QuietZoneModules QuietZones = Gma.QrCodeNet.Encoding.Windows.Render.QuietZoneModules.Two; //空白地區  int ModuleSize = 12;//大小 var encoder = new Gma.QrCodeNet.Encoding.QrEncoder(Ecl); Gma.QrCodeNet.Encoding.QrCode qr; if (encoder.TryEncode(Content, out qr))//對內容進行編碼，並儲存產生的矩陣 { var render = new Gma.QrCodeNet.Encoding.Windows.Render.GraphicsRenderer(new Gma.QrCodeNet.Encoding.Windows.Render.FixedModuleSize(ModuleSize, QuietZones)); render.WriteToStream(qr.Matrix, System.Drawing.Imaging.ImageFormat.Png, ms); } else { return false; } return true; } }}

視圖 開啟SignalR
  var chat = $.connection.pushHub;
        $.connection.hub.start().done(function () {
             chat.server.ruserConnected();
        });

$.connection.pushHub對應

chat.server.ruserConnected();對應

表示調用"pushHub"運行後執行 runserConnected方法，在暫存資料表中增加當前瀏覽器的ConnectionID

chat.client.getUserId = function (ruserid){　　//二維碼產生的文本$("#loga").attr("src", "@ViewBag.Url" + ruserid);}

表示台後資料 
收到資料後返回到遊覽器

chat.client.userLoginSuccessful = function (r, userid) { if (r) { $.post("/Login/AddSession/", { userid: userid }, function (r2) { if (r2) { location.href = "/Home/"; } }) } }; 

使用者通過微信登入後 

接收微信OpenID  
 $.post("/Login/AddSession/", { userid: userid }, function (r2) {
if (r2) {
location.href = "/Home/";
}
}) 

執行 Post到後台增加登入資訊，成功後轉到/Home/首頁 

/// <summary> /// 儲存微信確認登入後返回的OPENID，做為網站的Session["LogUserID"] /// </summary> /// <param name="userid"></param> /// <returns></returns> public JsonResult AddSession(string userid) { Session["LogUserID"] = userid; return Json(true); }

Login/WxLog.cshtml 本頁在微信上開啟 

@{ ViewBag.Title = "WxLog";}<script src="~/Scripts/jquery.signalR-1.1.4.min.js"></script><script src="~/signalr/hubs"></script><script> $(function () { //串連SignalR pushHab var chat = $.connection.pushHub; //啟動 $.connection.hub.start().done(); $("#btnLog").click(function () { //登入,發送資訊到伺服器 chat.server.logUserConnected("@ViewBag.ruser","@ViewBag.LogUserID"); }); });</script><h2>WxLog</h2><a href="#" id="btnLog">登入</a>@{ ViewBag.Title = "Index";} @Scripts.Render("~/bundles/jquery")<script src="~/Scripts/jquery.signalR-1.1.4.min.js"></script><script src="~/signalr/hubs"></script><script type='text/javascript'> $(function () { var chat = $.connection.pushHub; $.connection.hub.start().done(function () { chat.server.ruserConnected(); }); chat.client.getUserId = function (ruserid) { $("#loga").attr("src", "@ViewBag.Url" + ruserid); } chat.client.userLoginSuccessful = function (r, userid) { if (r) { location.href = "/Home/"; }) } }; });</script><header> <a href="~/Home/" class="iconfont backIcon"><</a> <h1>使用者登入</h1></header><div style="height:1rem;"></div>請使用微信登入掃描以下二維碼生產圖片<div> <img id="loga" src="#" width="90%" /></div>

 

GetOpenIDByCode(code)方法

參考 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842&token=&lang=zh_CN 

對於已關注公眾號的使用者，如果使用者從公眾號的會話或者自訂菜單進入本公眾號的網頁授權頁，即使是scope為snsapi_userinfo，也是靜默授權，使用者無感知。  

具體而言，網頁授權流程分為四步：
1、引導使用者進入授權頁面同意授權，擷取code  
2、通過code換取網頁授權access_token（與基礎支援中的access_token不同）  
3、如果需要，開發人員可以重新整理網頁授權access_token，避免到期  
4、通過網頁授權access_token和openid擷取使用者基本資料（支援UnionID機制）  

 public static string GetOpenIDByCode(string code) { string url =string.Format( "https://api.weixin.qq.com/sns/oauth2/access_token?appid={0}&secret={1}&code={2}&grant_type=authorization_code",AppID,AppSecret, code); using (System.Net.WebClient client = new System.Net.WebClient()) { string tempstr= client.DownloadString( url); var regex= new Regex(@"\""openid\"":\""[^\""]+?\"",", RegexOptions.IgnoreCase); string tempstr2= regex.Match(tempstr).Value; return tempstr2.Substring(10, tempstr2.Length - 12); } }

精彩專題分享：ASP.NET微信開發教程匯總，歡迎大家學習。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。