這篇文章主要介紹了.NET微信開(kāi)發(fā)之PC 端微信掃碼註冊(cè)和登入功能實(shí)現(xiàn)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

一、前言

先聲明一下，本文所注重點(diǎn)為實(shí)現(xiàn)想法,程式碼及資料庫(kù)設(shè)計(jì)主要為了展現(xiàn)思路，如果對(duì)程式碼效率有著苛刻要求的項(xiàng)目切勿照搬。

相信做過(guò)微信開(kāi)發(fā)的人授權(quán)這塊都沒(méi)少做過(guò),但是一般來(lái)說(shuō)我們更多的是為移動(dòng)端的網(wǎng)站做授權(quán),確切來(lái)說(shuō)是在微信端下做的一個(gè)授權(quán)。今天遇到的一個(gè)問(wèn)題是,專(zhuān)案支援微信端以及 PC 端,並且開(kāi)放註冊(cè)。要求做到無(wú)論在 PC 端註冊(cè)或是在微信端註冊(cè)之後都可以在另一端登入。也就是說(shuō)無(wú)論 PC 或是微信必須做到"你就是你"(透過(guò)某種方式關(guān)聯(lián))。

二、尋找解決方案

#以傳統(tǒng)的方式思考,微信端完全可以透過(guò)授權(quán)進(jìn)行註冊(cè),但是PC端呢,傳統(tǒng)的方式無(wú)非就是填填手機(jī)號(hào)碼啊,或者Email 等等。如果採(cǎi)用這種方式註冊(cè),會(huì)產(chǎn)生下面這的問(wèn)題

1.我先在微信端授權(quán)註冊(cè),那麼如果我要登入PC端還是得進(jìn)行註冊(cè)。

對(duì)此解決方案可以為:微信授權(quán)註冊(cè)後「強(qiáng)制」要求使用者必須填寫(xiě)基本資訊,如手機(jī)號(hào)碼、Email 。這樣我們可以透過(guò)某種方式為使用者產(chǎn)生PC端登入的帳號(hào)密碼.例如以使用者的 nickname 為帳號(hào),手機(jī)號(hào)碼為密碼,等等方式。

弊端:使用者體驗(yàn)不好,再者有安全隱患。畢竟你的微信暱稱(chēng), Email 或手機(jī)號(hào)碼都是暴露的。

2.如果我先在 PC 端註冊(cè)，我在微信授權(quán)的時(shí)候怎樣關(guān)聯(lián)行動(dòng)端

當(dāng)然，凡是問(wèn)題總會(huì)有解決方案的。想法如下：

　　　　方案一：當(dāng)使用者在 PC 端註冊(cè)後，「強(qiáng)制」 使用者必須填入微信暱稱(chēng)。以此作為微信授權(quán)時(shí)的關(guān)聯(lián)條件。但很遺憾，微信暱稱(chēng)可以改，不是唯一的怎麼可以用來(lái)做關(guān)聯(lián)？方案一陣亡。

　　　　方案二：在微信端授權(quán)後，以及在 PC 端註冊(cè)後「強(qiáng)制」要求用戶(hù)填寫(xiě)手機(jī)號(hào)碼以此為關(guān)聯(lián)。這樣衍生出一個(gè)問(wèn)題，必須確保用戶(hù)手機(jī)的真實(shí)信，沒(méi)問(wèn)題。這個(gè)可以透過(guò)手機(jī)驗(yàn)證碼來(lái)實(shí)現(xiàn)（Email也是一樣）。但不妨假設(shè)一下有下面這種情況，如果我有兩個(gè)手機(jī)號(hào)碼，PC 端註冊(cè)時(shí)填一個(gè)，微信註冊(cè)時(shí)填另一個(gè)。關(guān)聯(lián)的了嗎？答案是很遺憾。再者，我在PC 端註冊(cè)後我就是不填（筆者把強(qiáng)制打上雙引號(hào)的原因），然後我用微信端授權(quán)登入一下。好吧，此時(shí)將會(huì)有兩個(gè)資料等著你想辦法去關(guān)聯(lián)，典型的開(kāi)發(fā)者自挖坑。這種方式某種程度上行得通，但是嚴(yán)謹(jǐn)程度是開(kāi)發(fā)者無(wú)法接受的。

三、迴歸原點(diǎn)的解決方案

#分析：既然方案上述方案都有問(wèn)題，我們先把它們都拋到一邊。整理一下思路，讓我們回到問(wèn)題的根本。關(guān)聯(lián)的問(wèn)題，要的是一個(gè)唯一識(shí)別。唯一識(shí)別正如我們的身分證號(hào)碼，我們辦理信用卡的時(shí)候身分證是必須的，實(shí)名制下購(gòu)買(mǎi)號(hào)碼卡，身分證是必須的。假設(shè)我們是這系統(tǒng)管理員，那麼我完全可以透過(guò)你的身分證號(hào)碼查出你手機(jī)號(hào)碼，銀行卡號(hào)碼。

有了上面的思路之後,我們需要做的就是找到一個(gè)唯一標(biāo)識(shí)來(lái)作為關(guān)聯(lián).微信上有個(gè)重要的角色 openid。 它跟我們上面提到的身分證號(hào)碼有這共同的作用,微信帳號(hào)對(duì)某一公眾號(hào)碼的唯一識(shí)別。

微信端的授權(quán)拿到 openid 做過(guò)微信開(kāi)發(fā)的人都應(yīng)該沒(méi)有問(wèn)題。問(wèn)題是怎麼來(lái)實(shí)現(xiàn) PC 端 在註冊(cè)或登陸的時(shí)候拿到 openid。筆者的實(shí)現(xiàn)思路如下。 PC 端註冊(cè),或登陸時(shí)顯示一個(gè)二維碼引導(dǎo)使用者使用微信掃碼，使其跳到授權(quán)頁(yè)面。這一步驟有一個(gè)最關(guān)鍵的細(xì)節(jié)，二維碼請(qǐng)帶一個(gè)唯一的授權(quán)碼(authCode)。試想一下如果使用者授權(quán)後我們能把 openid 以及 authCode 寫(xiě)入到資料庫(kù)。那我們就可以在 PC 端透過(guò)某個(gè) API 取得 authCode 所關(guān)聯(lián)的這個(gè) openid。如果我們做到這點(diǎn)我們就可以知道目前是誰(shuí)在 PC 端進(jìn)行掃碼註冊(cè)或登入(沒(méi)註冊(cè)的註冊(cè),有註冊(cè)的直接登入)。 是不是突然覺(jué)得 so easy. 如果覺(jué)得文字比較抽象,請(qǐng)看下面圖示

PC 端微信掃碼登入流程

##核心程式碼

搞清楚了思路和流程接下來(lái)我們直接上程式碼啦.開(kāi)發(fā)思路是共通的，開(kāi)發(fā)語(yǔ)言就請(qǐng)各顯神通啦。

說(shuō)明：下面程式碼以C# 語(yǔ)言為例，採(cǎi)用MVC + EF (註：uuid 等價(jià)於我們上述的authCode)

掃碼登入頁(yè)後臺(tái)程式碼

public ActionResult Login()
{
//如果已登錄,直接跳轉(zhuǎn)到首頁(yè)
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;//構(gòu)造授權(quán)鏈接
ViewBag.uuid = uuid;//保存 uuid
return View();
}

產(chǎn)生二維碼採(cǎi)用外掛程式j(luò)query.qrcode.js,想詳細(xì)了解的朋友請(qǐng)移步Github。 這裡要注意的一點(diǎn)是,該外掛可以指定二維碼的產(chǎn)生方式,canvas 或table 請(qǐng)需要支援IE 的朋友指定使用table 產(chǎn)生

程式碼如下:

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

回歸正題,登入頁(yè)面的主要程式碼如下

<!--生成二維碼的容器 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");
//輪詢(xún)判斷用戶(hù)是否授權(quán)
var interval = setInterval(function () {
$.post("@Url.Action("UserLogin","Home")", { "uuid": "@ViewBag.uuid" }, function (data, status) {
if ("success" == status) {
//用戶(hù)成功授權(quán)=>跳轉(zhuǎn)
if ("success" == data) {
window.location.href = &#39;@Url.Action("Index", "Home")&#39;;
clearInterval(interval);
}
}
});
}, 200);
})
</script>

輪詢(xún)判斷使用者是否授權(quán)API 程式碼

public string UserLogin(string uuid)
{
//驗(yàn)證參數(shù)是否合法
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";
//寫(xiě)入cookie
FormsAuthentication.SetAuthCookie(user.OpenId, false);
//清空uuid
user.uuId = null;
db.SaveChanges();
return "success";
}

微信端授權(quán)Action

public ActionResult Loginfor(string uuid)
{
#region 獲取基本信息 - snsapi_userinfo
/*
*　創(chuàng)建微信通用類(lèi) - 這里代碼比較復(fù)雜不在這里貼出
*　遲點(diǎn)我會(huì)將整個(gè) Demo 稍微整理放上 Github
*/
WechatUserContext wxcontext = new WechatUserContext(System.Web.HttpContext.Current, uuid);
//使用微信通用類(lèi)獲取用戶(hù)基本信息
wxcontext.GetUserInfo();
if (!string.IsNullOrEmpty(wxcontext.openid))
{
uuid = Request["state"];
//判斷數(shù)據(jù)庫(kù)是否存在
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();
}

#最後附上資料庫(kù)表格設(shè)計(jì)

沒(méi)什麼特別的，就是微信回傳的各個(gè)參數(shù)加多一個(gè)我們自訂的uuId

微信參數(shù)說(shuō)明詳情請(qǐng)見(jiàn)微信開(kāi)發(fā)者文件

運(yùn)行效果

####1.掃碼登入頁(yè)面### ###############2.請(qǐng)求使用者授權(quán)###################3.使用者確認(rèn)授權(quán)######## ###########4.PC 端登入完成################

以上是PC端用.NET微信開(kāi)發(fā)實(shí)作掃碼註冊(cè)與登入功能詳解的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！