【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】PC端用.NET微信開(kāi)發(fā)實(shí)現(xiàn)掃碼注冊(cè)和登錄功能的示例

【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】PC端用.NET微信開(kāi)發(fā)實(shí)現(xiàn)掃碼注冊(cè)和登錄功能的示例

這篇文章主要介紹了PC端用.NET微信開(kāi)發(fā)實(shí)現(xiàn)掃碼注冊(cè)和登錄功能的示例，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓在下帶著大家一起了解一下。一、前言先聲明一下，本文所注重點(diǎn)為實(shí)現(xiàn)思路,代碼及數(shù)據(jù)庫(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)題是,項(xiàng)目支持微信端以及PC端,并且開(kāi)放注冊(cè)。要求做到無(wú)論在PC端注冊(cè)或者是在微信端注冊(cè)之后都可以在另外一個(gè)端進(jìn)行登錄。也就是說(shuō)無(wú)論P(yáng)C或是微信必須做到"你就是你"(通過(guò)某種方式關(guān)聯(lián))。二、尋找解決方案按傳統(tǒng)的方式來(lái)思考,微信端完全可以通過(guò)授權(quán)進(jìn)行注冊(cè),但是PC端呢,傳統(tǒng)的方式無(wú)非就是填填手機(jī)號(hào)碼啊,或者Email等等。如果采用這種方式注冊(cè),會(huì)產(chǎn)生下面這的問(wèn)題1.我先在微信端授權(quán)注冊(cè),那么如果我要登錄PC端還是得進(jìn)行注冊(cè)。對(duì)此解決方案可以為:微信授權(quán)注冊(cè)后“強(qiáng)制”要求用戶(hù)必須填寫(xiě)基本信息,如手機(jī)號(hào)、Email。這樣我們可以通過(guò)某種方式為用戶(hù)生成PC端登錄的賬號(hào)密碼.例如以用戶(hù)的nickname為賬號(hào),手機(jī)號(hào)碼為密碼,等等方式。弊端:用戶(hù)體驗(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)用戶(hù)在PC端注冊(cè)后，“強(qiáng)制”用戶(hù)必須填寫(xiě)微信昵稱(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ì)有兩條數(shù)據(jù)等著你想辦法去關(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è)唯一標(biāo)識(shí)。唯一標(biāo)識(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)的唯一標(biā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)用戶(hù)使用微信掃碼，使其跳轉(zhuǎn)到授權(quán)頁(yè)面。這一步有一個(gè)最為關(guān)鍵的細(xì)節(jié)，二維碼請(qǐng)帶上一個(gè)唯一的授權(quán)碼(authCode)。試想一下如果用戶(hù)授權(quán)后我們能把openid以及authCode寫(xiě)入到數(shù)據(jù)庫(kù)。那么我們就可以在PC端通過(guò)某個(gè)API獲取authCode所關(guān)聯(lián)的這個(gè)openid。如果我們做到這點(diǎn)我們就可以知道當(dāng)前是誰(shuí)在PC端進(jìn)行掃碼注冊(cè)或登錄(沒(méi)注冊(cè)的注冊(cè),有注冊(cè)的直接登錄)。是不是突然覺(jué)得soeasy.如果覺(jué)得文字比較抽象,請(qǐng)看下面圖示PC端微信掃碼登錄流程核心代碼搞清楚了思路和流程接下來(lái)我們直接上代碼啦.開(kāi)發(fā)思路是共通的，開(kāi)發(fā)語(yǔ)言就請(qǐng)各顯神通啦。說(shuō)明：下面代碼以C#語(yǔ)言為例，采用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();

}生成二維碼采用插件jquery.qrcode.js,想詳細(xì)了解的朋友請(qǐng)移步Github。這里需要注意的一點(diǎn)是,該插件可以指定二維碼的生成方式,canvas或者table請(qǐng)需要支持IE的朋友指定使用table生成代碼如下:jQuery('#qrcode').qrcode({

render

:

"table",

text

:

""

});回歸正題,登錄頁(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('#qrcode-container').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

=

'@Url.Action("Index",

"Home")';

clearInterval(interval);

}

}

});

},

200);

})

</script>輪詢(xún)判斷用戶(hù)是否授權(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)Actionpublic

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

=

vince;

user.Sex

=

wxcontext.sex;

user.Unionid

=

wxcontext.unionid;

us