Ausführliche Erläuterung der Verwendung der .NET WeChat-Entwicklung auf dem PC zur Implementierung von Scancode-Registrierungs- und Anmeldefunktionen

In diesem Artikel werden hauptsächlich relevante Informationen zur Implementierung der von .NET WeChat entwickelten WeChat-Code-Scanning-Funktion vorgestellt. Sie ist sehr gut und hat Referenzwert.

1. Vorwort

Lassen Sie mich zunächst feststellen, dass der Schwerpunkt dieses Artikels hauptsächlich auf der Implementierungsidee und dem Datenbankdesign liegt um die Idee zu zeigen. Wenn strenge Anforderungen an die Codeeffizienz bestehen, kopieren Sie die Elemente nicht.

Ich glaube, dass jeder, der WeChat entwickelt hat, viele Autorisierungen durchgeführt hat, aber im Allgemeinen führen wir mehr Autorisierungen für mobile Websites durch, um genau zu sein, wir machen es unter WeChat einer Autorisierung. Ein Problem, auf das ich heute gestoßen bin, ist, dass das Projekt WeChat und PC unterstützt und die Registrierung offen ist. Es ist erforderlich, dass Sie sich nach der Registrierung auf der PC-Seite oder auf der WeChat-Seite auf der anderen Seite anmelden können. Mit anderen Worten: Egal ob PC oder WeChat: „Du bist du“ (irgendwie relevant).

2. Auf der Suche nach Lösungen

Auf traditionelle Weise kann sich WeChat vollständig durch Autorisierung registrieren. Aber auf der PC-Seite besteht die herkömmliche Methode lediglich darin, Ihre Mobiltelefonnummer, E-Mail-Adresse usw. einzugeben. Wenn Sie sich auf diese Weise registrieren, treten folgende Probleme auf

1 Ich autorisiere zuerst die Registrierung auf WeChat. Wenn ich mich dann am PC anmelden möchte, muss ich mich noch registrieren.

Die Lösung für dieses Problem kann sein: Nachdem WeChat die Registrierung autorisiert hat, „zwingt“ es Benutzer, grundlegende Informationen wie Mobiltelefonnummer und E-Mail einzugeben. Auf diese Weise können wir das Konto und das Passwort generieren, damit sich der Benutzer auf irgendeine Weise am PC anmelden kann. Verwenden Sie beispielsweise den Spitznamen des Benutzers als Kontonummer, die Mobiltelefonnummer als Passwort usw.

Nachteile: Die Benutzererfahrung ist nicht gut und es bestehen Sicherheitsrisiken. Schließlich sind Ihr WeChat-Spitzname, Ihre E-Mail-Adresse oder Ihre Mobiltelefonnummer offengelegt.

2. Wenn ich mich zuerst am PC registriere, wie verknüpfe ich die mobile Version bei der Autorisierung von WeChat?

Natürlich gibt es für jedes Problem eine Lösung . Die Idee ist wie folgt:

Option 1: Nachdem sich der Benutzer am PC registriert hat, wird „erzwungen“, dass der Benutzer den WeChat-Spitznamen eingeben muss. Verwenden Sie dies als Zuordnungsbedingung bei der Autorisierung von WeChat. Aber leider kann der WeChat-Spitzname geändert werden, wenn er nicht der einzige ist. Der Plan scheiterte auf einen Schlag.

Option 2: Nach der Autorisierung auf der WeChat-Seite und der Registrierung auf der PC-Seite werden Benutzer „gezwungen“, ihre Mobiltelefonnummer als Link einzugeben. Dies stellt ein Problem dar. Wir müssen sicherstellen, dass das Mobiltelefon des Benutzers authentisch ist. Dies kann durch einen Handy-Bestätigungscode erreicht werden (dasselbe gilt für E-Mail). Nehmen wir jedoch die folgende Situation an: Wenn ich zwei Mobiltelefonnummern habe, gebe ich eine bei der Registrierung am PC und die andere bei der Registrierung bei WeChat ein. Ist es verwandt? Die Antwort ist leider. Nachdem ich mich auf der PC-Seite registriert hatte, habe ich es außerdem nicht ausgefüllt (der Grund, warum ich doppelte Anführungszeichen erzwungen habe), und habe dann die WeChat-Seite zur Autorisierung und Anmeldung verwendet. Nun, an diesem Punkt warten zwei Daten darauf, dass Sie einen Weg finden, sie zu korrelieren, was einem typischen Entwickler entspricht, der sein eigenes Loch gräbt. Dieser Ansatz funktioniert bis zu einem gewissen Grad, aber die Strenge ist für Entwickler nicht akzeptabel.

3. Lösung, um zum Ursprung zurückzukehren

Analyse: Da die oben genannten Lösungen Probleme haben, lassen Sie uns zuerst sie werden alle beiseite geworfen. Um unsere Gedanken zu ordnen, kehren wir zur Wurzel des Problems zurück. Die zugehörige Frage erfordert eine eindeutige Kennung. Die eindeutige Kennung ist genau wie unsere Ausweisnummer. Wenn wir eine Kreditkarte beantragen, ist ein Ausweis erforderlich. Beim Kauf einer Nummernkarte im Echtnamensystem ist ein Ausweis erforderlich. Angenommen, wir sind der Systemadministrator, dann kann ich über Ihre Ausweisnummer auf jeden Fall Ihre Mobiltelefonnummer und Bankkartennummer herausfinden.

Nachdem wir die obige Idee hatten, müssen wir eine eindeutige Kennung als Assoziation finden. WeChat spielt eine wichtige Rolle. Es hat die gleiche Funktion wie die oben erwähnte ID-Kartennummer. Das WeChat-Konto identifiziert ein bestimmtes öffentliches Konto eindeutig.

Jeder, der WeChat-Entwicklung durchgeführt hat, sollte kein Problem damit haben, die WeChat-Autorisierung von openid zu erhalten. Die Frage ist, wie man die PC-Seite implementiert, um bei der Registrierung oder Anmeldung die OpenID zu erhalten. Die Implementierungsideen des Autors lauten wie folgt. Registrieren Sie sich auf dem PC oder beim Anmelden wird ein QR-Code angezeigt, der Benutzer dazu anleitet, den Code mit WeChat zu scannen, um zur Autorisierungsseite zu springen. In diesem Schritt gibt es ein äußerst wichtiges Detail. Bitte bringen Sie einen eindeutigen Autorisierungscode (authCode) mit dem QR-Code mit. Stellen Sie sich vor, wenn der Benutzer uns autorisiert, können wir die OpenID und den AuthCode in die Datenbank schreiben. Dann können wir die mit authCode verknüpfte OpenID über eine API auf der PC-Seite abrufen. Wenn wir dies tun, können wir wissen, wer gerade den QR-Code scannt, um sich zu registrieren oder sich am PC anzumelden (registrieren Sie sich, wenn Sie nicht registriert sind, melden Sie sich direkt an, wenn Sie registriert sind). Fühlte es sich plötzlich so einfach an? Wenn Sie der Meinung sind, dass der Text abstrakter ist, schauen Sie sich bitte das Symbol unten an

PC WeChat-Scancode-Anmeldevorgang

Kerncode

Nachdem wir die Ideen und Prozesse geklärt haben, gehen wir direkt zum Code über. Die Entwicklungsideen sind üblich, also zeigen Sie bitte Ihre Talente in der Entwicklungssprache.

Hinweis: Der folgende Code verwendet die C#-Sprache als Beispiel und verwendet MVC + EF (Hinweis: uuid entspricht unserem oben genannten AuthCode)

Scannen Sie den QR-Code, um sich anzumelden. Der Seiten-Backend-Code

public ActionResult Login()
{
//如果已登录,直接跳转到首页
if (User.Identity.IsAuthenticated)
return RedirectToAction("Index", "Home");
string url = Request.Url.Host;
string uuid = Guid.NewGuid().ToString();
ViewBag.url = "http://" + url + "/home/loginfor?uuid=" + uuid;//构造授权链接
ViewBag.uuid = uuid;//保存 uuid
return View();
}

verwendet das Plug-in jquery.qrcode.js, um den QR-Code zu generieren. Freunde, die mehr darüber erfahren möchten, gehen Sie bitte zu Github. Hier ist zu beachten, dass das Plug-in die QR-Code-Generierungsmethode, Canvas oder Tabelle angeben kann. Freunde, die IE unterstützen müssen, geben bitte an, dass sie die Tabelle zum Generieren verwenden möchten.

Der Code lautet wie folgt folgt:

jQuery('#qrcode').qrcode({
render : "table",
text : "http://baidu.com"
});

Zurück zum Thema, der Hauptcode der Anmeldeseite lautet wie folgt

<!--生成二维码的容器 p-->
<p id="qrcode-container">
</p>
<script src="~/Plugins/Jquery/jquery-1.9.1.min.js"></script>
<script src="~/Plugins/jquery-qrcode/jquery.qrcode.min.js"></script>
<script>
jQuery(function () {
//生成二维码
jQuery(&#39;#qrcode-container&#39;).qrcode("@ViewBag.url");
//轮询判断用户是否授权
var interval = setInterval(function () {
$.post("@Url.Action("UserLogin","Home")", { "uuid": "@ViewBag.uuid" }, function (data, status) {
if ("success" == status) {
//用户成功授权=>跳转
if ("success" == data) {
window.location.href = &#39;@Url.Action("Index", "Home")&#39;;
clearInterval(interval);
}
}
});
}, 200);
})
</script>

Abfrage, um festzustellen, ob der Benutzer den API-Code autorisiert

public string UserLogin(string uuid)
{
//验证参数是否合法
if (string.IsNullOrEmpty(uuid))
return "param_error";
WX_UserRecord user = db.WX_UserRecord.Where(u => u.uuId == uuid).FirstOrDefault();
if (user == null)
return "not_authcode";
//写入cookie
FormsAuthentication.SetAuthCookie(user.OpenId, false);
//清空uuid
user.uuId = null;
db.SaveChanges();
return "success";
}

WeChat-Autorisierungsaktion

public ActionResult Loginfor(string uuid)
{
#region 获取基本信息 - snsapi_userinfo
/*
*　创建微信通用类 - 这里代码比较复杂不在这里贴出
*　迟点我会将整个 Demo 稍微整理放上 Github
*/
WechatUserContext wxcontext = new WechatUserContext(System.Web.HttpContext.Current, uuid);
//使用微信通用类获取用户基本信息
wxcontext.GetUserInfo();
if (!string.IsNullOrEmpty(wxcontext.openid))
{
uuid = Request["state"];
//判断数据库是否存在
WX_UserRecord user = db.WX_UserRecord.Where(u => u.OpenId == wxcontext.openid).FirstOrDefault();
if (null == user)
{
user = new WX_UserRecord();
user.OpenId = wxcontext.openid;
user.City = wxcontext.city;
user.Country = wxcontext.country;
user.CreateTime = DateTime.Now;
user.HeadImgUrl = wxcontext.headimgurl;
user.Nickname = wxcontext.nickname;
user.Province = wxcontext.province;
user.Sex = wxcontext.sex;
user.Unionid = wxcontext.unionid; 
user.uuId = uuid;
db.WX_UserRecord.Add(user);
}
user.uuId = uuid;
db.SaveChanges();
}
#endregion
return View();
}

Schließlich das Design der Datenbanktabelle anhängen

Es gibt einfach nichts Besonderes Fügen Sie jedem von WeChat zurückgegebenen Parameter eine weitere benutzerdefinierte uuId hinzu

Einzelheiten zur WeChat-Parameterbeschreibung finden Sie in der WeChat-Entwicklerdokumentation

Betriebsergebnisse

1 .Scannen Sie den QR-Code, um sich auf der Seite anzumelden

2 Benutzerautorisierung

3. Benutzerbestätigung Autorisierung

4 >

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung der .NET WeChat-Entwicklung auf dem PC zur Implementierung von Scancode-Registrierungs- und Anmeldefunktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!