.NET C#如何使用微信公眾號登錄網(wǎng)站

這篇文章給大家分享的是有關(guān).NET C#如何使用微信公眾號登錄網(wǎng)站的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

工具和環(huán)境：
1. VS2013 .net4.0 C# MVC4.0 Razor
2.插件
A. Microsoft.AspNet.SignalR;時時獲取后臺數(shù)據(jù)
B.Gma.QrCodeNet.Encoding;文本生成二維碼 

實現(xiàn)的目標
1. 在電腦上打開網(wǎng)站登錄頁，提示用戶使用微信掃描登錄確認。
2.用戶通過微信掃描確認后，電腦自動收到確認信息跳轉(zhuǎn)到網(wǎng)站主頁。 

原理分析
 1.SignalR是一個神奇的工具，能從瀏覽器A發(fā)送信息到服務(wù)器，服務(wù)器自動推送消息到指定的瀏覽器B。那么我的計劃是用電腦的瀏覽器打開登錄頁，生成一個二維碼(內(nèi)容為帶有微信公眾平臺網(wǎng)頁用戶受權(quán)的網(wǎng)址)，用微信的描碼功能打開這個網(wǎng)站。將獲取的微信用戶OPENID通過SignalR發(fā)送到電腦瀏覽器，實現(xiàn)登錄功能

 實現(xiàn)過程
1.微信公從平臺的注冊和權(quán)限(略過...)
2.VS2013中新建MVC網(wǎng)站,我用的環(huán)境為.NET4.0 C# MVC4.0  Razor引擎(個人習(xí)慣)。

3.安裝 SignalR
 VS2013 點擊工具 ==> 庫程序包管理器 ==> 程序包管理控制臺

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

.net4.0 Mvc4環(huán)境下建議安裝1.1.4高版本安裝不上

 安裝 SingnalR成功 

設(shè)置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頁執(zhí)行本方法,用于記錄瀏覽器連接的ID
 /// </summary>
 public void ruserConnected()
 {
 if (!rlist.ContainsKey(Context.ConnectionId))
 rlist.Add(Context.ConnectionId, string.Empty);

 //Client方式表示對指定ID的瀏覽器發(fā)送GetUserId方法,瀏覽器通過javascrip方法GetUserId(string)得到后臺發(fā)來的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的瀏覽器發(fā)送GetUserId方法,瀏覽器通過javascrip方法userLoginSuccessful(bool,string)得到后臺發(fā)來的登錄成功，和微信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/oauth3/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 若提示“該鏈接無法訪問”，請檢查參數(shù)是否填寫錯誤，是否擁有scope參數(shù)對應(yīng)的授權(quán)作用域權(quán)限。 
 *3.REDIRECT_URI內(nèi)容為返回地址，需要開發(fā)者需要先到公眾平臺官網(wǎng)中的“開發(fā) - 接口權(quán)限 - 網(wǎng)頁服務(wù) - 網(wǎng)頁帳號 - 網(wǎng)頁授權(quán)獲取用戶基本信息”的配置選項中，修改授權(quán)回調(diào)域名
 *4.REDIRECT_URI應(yīng)回調(diào)到WxLog頁并進行URLEncode編碼,如: redirect_uri=GetURLEncode("http://你的網(wǎng)站/Login/WxLog?ruser="); ruser為PushHub中的Context.ConnectionId到View中配置 
 *
 */
 ViewBag.Url = string.Format("https://open.weixin.qq.com/connect/oauth3/authorize?appid={0}&redirect_uri={1}&response_type=code&scope=snsapi_base&state={2}#wechat_redirect", B.Helper.AppID, GetURLEncode("http://你的網(wǎng)站/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;//待編碼內(nèi)容
 Gma.QrCodeNet.Encoding.Windows.Render.QuietZoneModules QuietZones = Gma.QrCodeNet.Encoding.Windows.Render.QuietZoneModules.Two; //空白區(qū)域 
 int ModuleSize = 12;//大小
 var encoder = new Gma.QrCodeNet.Encoding.QrEncoder(Ecl);
 Gma.QrCodeNet.Encoding.QrCode qr;
 if (encoder.TryEncode(Content, out qr))//對內(nèi)容進行編碼，并保存生成的矩陣
 {
 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對應(yīng)

chat.server.ruserConnected();對應(yīng)

表示調(diào)用"pushHub"運行后執(zhí)行 runserConnected方法，在臨時表中增加當(dāng)前瀏覽器的ConnectionID

chat.client.getUserId = function (ruserid)
{

　　//二維碼生成的文本
$("#loga").attr("src", "@ViewBag.Url" + ruserid);
}

表示臺后數(shù)據(jù) 
收到數(shù)據(jù)后返回到游覽器

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/";
}
}) 

執(zhí)行 Post到后臺增加登錄信息，成功后轉(zhuǎn)到/Home/主頁 

/// <summary>
 /// 保存微信確認登錄后返回的OPENID，做為網(wǎng)站的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 () {
 //登錄,發(fā)送信息到服務(wù)器
 chat.server.logUserConnected("@ViewBag.ruser","@ViewBag.LogUserID");
 });
 });
</script>
<h3>WxLog</h3>

<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">&#60;</a>
 <h2>用戶登錄</h2>
</header>
<div ></div>
請使用微信登錄掃描以下二維碼生產(chǎn)圖片
<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 

對于已關(guān)注公眾號的用戶，如果用戶從公眾號的會話或者自定義菜單進入本公眾號的網(wǎng)頁授權(quán)頁，即使是scope為snsapi_userinfo，也是靜默授權(quán)，用戶無感知。  

具體而言，網(wǎng)頁授權(quán)流程分為四步：
1、引導(dǎo)用戶進入授權(quán)頁面同意授權(quán)，獲取code  
2、通過code換取網(wǎng)頁授權(quán)access_token（與基礎(chǔ)支持中的access_token不同）  
3、如果需要，開發(fā)者可以刷新網(wǎng)頁授權(quán)access_token，避免過期  
4、通過網(wǎng)頁授權(quán)access_token和openid獲取用戶基本信息（支持UnionID機制）  

 public static string GetOpenIDByCode(string code)
 {
 string url =string.Format( "https://api.weixin.qq.com/sns/oauth3/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);
 }
 }

感謝各位的閱讀！關(guān)于“.NET C#如何使用微信公眾號登錄網(wǎng)站”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！