Dieser Artikel stellt haupts?chlich .NET C# vor, um sich mit dem ?ffentlichen WeChat-Konto auf der Website anzumelden, und zeigt Ihnen, wie Sie das ?ffentliche WeChat-Konto verwenden, um sich auf der Website anzumelden

Anwendbar zu: Dieser Artikel gilt für Benutzer mit einer gewissen Grundlage in der WeChat-Entwicklung

Einführung:
Nachdem ich 300 Yuan ausgegeben hatte, um mich für die ?ffentliche WeChat-Plattform zu bewerben, stellte ich fest, dass ich sie nicht nutzen kann Melden Sie sich mit dem ?ffentlichen WeChat-Konto auf der Website an (nicht auf WeChat ge?ffnet), um die WeChat-Kontonummer zu erhalten. Nach sorgf?ltiger Recherche fand ich heraus, dass ich weitere 300 Yuan ausgeben muss, um mich für die offene WeChat-Plattform zu bewerben und mich auf der Website anzumelden. Da ich ein Verlierer-Programmierer bin, habe ich darüber nachgedacht, selbst eine Anmeldeschnittstelle zu erstellen.

Tools und Umgebung:
1. VS2013 .net4.0 C# MVC4.0 Razor
A .SignalR ; Hintergrunddaten jederzeit abrufen
B.Gma.QrCodeNet.Encoding; QR-Code aus Text generieren

Ziele erreicht
1 Auf Ihrem Computer werden Benutzer aufgefordert, WeChat zum Scannen zu verwenden und sich zur Best?tigung anzumelden. 2. Nachdem der Benutzer über WeChat gescannt und best?tigt hat, erh?lt der Computer automatisch die Best?tigungsnachricht und springt zur Startseite der Website.

Prinzipielle Analyse
1.SignalR ist ein magisches Tool, das Informationen von Browser A an den Server senden kann und der Server die Nachricht automatisch an den angegebenen Browser B weiterleitet. Dann ist mein Plan, die Anmeldeseite mit einem Computerbrowser zu ?ffnen, einen QR-Code zu generieren (der Inhalt ist die URL mit der Benutzerautorisierung der Webseite der ?ffentlichen WeChat-Plattform) und die Code-Scanfunktion von WeChat zu verwenden, um die Website zu ?ffnen. Senden Sie die erhaltene OPENID des WeChat-Benutzers über SignalR an den Computerbrowser, um die Anmeldefunktion zu implementieren

Implementierungsprozess
1. Registrierung und Berechtigungen der ?ffentlichen WeChat-Plattform (überspringen). ..)2. Erstellen Sie eine neue MVC-Website in VS2013. Die Umgebung, die ich verwende, ist die .NET4.0 C# MVC4.0 Razor-Engine (pers?nliche Gewohnheit).

3. Installieren Sie SignalR

Klicken Sie auf Tools==> Library Package Manager==> Folgender Befehl:

Install-Package Microsoft.AspNet.SignalR -Version 1.1.4

.net4.0 Es wird empfohlen, 1.1.4 hoch in der Mvc4-Umgebung zu installieren Die Version kann nicht installiert werden

SignalR erfolgreich installiert

SignalR einrichten

var config = new Microsoft.AspNet.SignalR.HubConfiguration();

config.EnableCrossDomain = true;

RouteTable.Routes.MapHubs(config);

Erstellen Sie eine neue Klasse PushHub.cs

Erstellen Sie einen neuen MVC-Controller ?LoginController.cs“, Sie werden hierfür keine anderen Tutorials lesen

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

Controller ?QRController.cs“ wird verwendet, um QR-Codes aus Text zu generieren

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 若提示“該鏈接無法訪問”，請檢查參數(shù)是否填寫錯誤，是否擁有scope參數(shù)對應的授權作用域權限。 
 *3.REDIRECT_URI內(nèi)容為返回地址，需要開發(fā)者需要先到公眾平臺官網(wǎng)中的“開發(fā) - 接口權限 - 網(wǎng)頁服務 - 網(wǎng)頁帳號 - 網(wǎng)頁授權獲取用戶基本信息”的配置選項中，修改授權回調域名
 *4.REDIRECT_URI應回調到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/oauth2/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();
 
 }
 }
}

Ansicht ?ffnet SignalR

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

var chat = $.connection.pushHub;

$.connection .hub.start().done(function () {
??????chat.server.ruserConnected(); ???});


$.connection. pushHub entspricht

chat.server.ruserConnected(); entspricht

bedeutet, dass ?pushHub“ aufgerufen wird. Führen Sie nach dem Ausführen die Methode ?runserConnected“ aus und fügen Sie die ConnectionID des aktuellen Browsers in die tempor?re Tabelle ein

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

zur Darstellung der Hintergrunddaten Kehren Sie nach Erhalt der Daten zum Browser zurück

Nachdem sich der Benutzer über WeChat angemeldet hat

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

Receive WeChat OpenID

$.post("/Login/AddSession/", { userid: userid }, function (r2) {

if (r2) {
location.href = "/Home/";}
})


Führen Sie ?Post“ aus, um Anmeldeinformationen im Hintergrund hinzuzufügen. Gehen Sie nach Erfolg zu /Home/Homepage

Login/WxLog.cshtml Diese Seite ist auf WeChat. ?ffnen Sie die

/// <summary>
 /// 保存微信確認登錄后返回的OPENID，做為網(wǎng)站的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 () {
 //登錄,發(fā)送信息到服務器
 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>
請使用微信登錄掃描以下二維碼生產(chǎn)圖片
<p>
 <img id="loga" src="#" width="90%" />
</p>

GetOpenIDByCode(code)-Methode

Für Benutzer, die dies getan haben folgt dem offiziellen Konto, wenn der Benutzer über die Sitzung oder das benutzerdefinierte Menü des offiziellen Kontos auf die Webautorisierungsseite dieses offiziellen Kontos zugreift, selbst wenn der Bereich snsapi_userinfo ist, wird er stillschweigend autorisiert und der Benutzer ist sich dessen nicht bewusst.

具體而言，網(wǎng)頁授權流程分為四步：
1、引導用戶進入授權頁面同意授權，獲取code
2、通過code換取網(wǎng)頁授權access_token（與基礎支持中的access_token不同）
3、如果需要，開發(fā)者可以刷新網(wǎng)頁授權access_token，避免過期
4、通過網(wǎng)頁授權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);
 }
 }

Das obige ist der detaillierte Inhalt von.NET C# Beispielanalyse der Verwendung des offiziellen WeChat-Kontos zur Anmeldung auf der Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!