首頁 > 文章 > 微信小程式 > .NET C#使用微信公眾號登入網站的實例解析

.NET C#使用微信公眾號登入網站的實例解析

Y2J原創: 2017-04-25 09:53:312364瀏覽

這篇文章主要介紹了.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.

$.connection.hub.

startstart) 。

#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);
 }

@{
 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=&#39;text/javascript&#39;>
 $(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>
<p style="height:1rem;"></p>
请使用微信登录扫描以下二维码生产图片
<p>
 <img id="loga" src="#" width="90%" />
</p>

#GetOpenIDByCode(code)方法

###對於已關注公眾號的用戶，如果用戶從公眾號的會話或自訂選單進入本公眾號的網頁授權頁，即使是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);
 }
 }

以上是.NET C#使用微信公眾號登入網站的實例解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：C#.net實作微信公眾帳號介面開發的實例解析下一篇：C#.net實作微信公眾帳號介面開發的實例解析

看更多