PC 端微信掃碼注冊和登錄實例。本站提示廣大學習愛好者：（PC 端微信掃碼注冊和登錄實例）文章只能為提供參考，不一定能成為您想要的結果。以下是PC 端微信掃碼注冊和登錄實例正文
PC 端微信掃碼注冊和登錄
1、媒介
先聲明一下，本文所重視點為完成思緒,代碼及數據庫設計重要為了展示思緒，假如對代碼效力有著刻薄請求的項目切勿照搬。
信任做過微信開辟的人受權這塊都沒少做過,然則普通來講我們更多的是為挪動真個網站做受權,確實來講是在微信端下做的一個受權。明天碰到的一個成績是,項目支撐微信端和 PC 端,而且開放注冊。請求做到不管在 PC 端注冊或許是在微信端注冊以後都可以在別的一個端停止登錄。也就是說不管 PC 或是微信必需做到"你就是你"(經由過程某種方法聯系關系)。
2、尋覓處理計劃
按傳統的方法來思慮,微信端完整可以經由過程受權停止注冊,然則PC端呢,傳統的方法不過就是填填手機號碼啊,或許 Email 等等。假如采取這類方法注冊,會發生上面這的成績
1.我先在微信端受權注冊,那末假如我要登錄PC端照樣得停止注冊。
對此處理計劃可認為:微信受權注冊後“強迫”請求用戶必需填寫根本信息,如手機號、Email 。如許我們可以經由過程某種方法為用戶生成PC端登錄的賬號暗碼.例如以用戶的 nickname 為賬號,手機號碼為暗碼,等等方法。
弊病:用戶體驗欠好,再者有平安隱患。究竟你的微信昵稱, Email 或許手機號碼都是裸露的。
2.假如我先在 PC 端注冊，我在微信受權的時刻如何聯系關系挪動端， 固然，但凡成績總會有處理計劃的。思緒以下：
計劃一：當用戶在 PC 端注冊後，“強迫” 用戶必需填寫微信昵稱。以此作為微信受權時的聯系關系前提。然則很遺憾，微信昵稱可以改，不是獨一的怎樣可以用來做聯系關系？計劃一陣亡。
計劃二：在微信端受權後，和在 PC 端注冊後“強迫”請求用戶填寫手機號碼以此為聯系關系。如許衍生出一個成績，必需確保用戶手機的真實信，沒成績。這個可以經由過程手機驗證碼來完成（Email也是一樣）。然則無妨假定一下有上面這類情形，假如我有兩個手機號碼，PC 端注冊時填一個，微信注冊時填另外一個。聯系關系的了嗎？謎底是很遺憾。再者，我在PC 端注冊後我就是不填（筆者把強迫打上雙引號的緣由），然後我用微信端受權登錄一下。好吧，此時將會有兩條數據等著你想方法去聯系關系，典范的開辟者自挖坑。這類方法某種水平下行得通，然則嚴謹水平上是開辟者沒法接收的。
3、回歸原點的處理計劃
剖析：既然計劃上述計劃都有成績，我們先把它們都拋到一邊。整頓一下思緒，讓我們回到成績的基本。聯系關系的成績，要的是一個獨一標識。獨一標識正如我們的身份證號碼，我們解決信譽卡的時刻身份證是必需的，實名制下購置號碼卡，身份證是必需的。假定我們是這體系治理員，那末我完整可以經由過程你的身份證號碼查出你手機號碼，銀行卡號碼。
有了下面的思緒以後,我們須要做的就是找到一個獨一標識來作為聯系關系.微信上有個主要的腳色 openid。 它跟我們下面提到的身份證號碼有這配合的感化,微信賬號對某一"號的獨一標識。
微信真個受權拿到 openid 做過微信開辟的人都應當沒有成績。成績是如何來完成 PC 端 在注冊或許上岸的時刻拿到 openid。筆者的完成思緒以下。PC 端注冊,或許上岸時顯示一個二維碼引誘用戶應用微信掃碼，使其跳轉到受權頁面。這一步有一個最為症結的細節，二維碼請帶上一個獨一的受權碼(authCode)。試想一下假如用戶受權後我們能把 openid 和 authCode 寫入到數據庫。那末我們便可以在 PC 端經由過程某個 API 獲得 authCode 所聯系關系的這個 openid。假如我們做到這點我們便可以曉得以後是誰在 PC 端停止掃碼注冊或登錄(沒注冊的注冊,有注冊的直接登錄)。 是否是忽然認為 so easy. 假如認為文字比擬籠統,請看上面圖示
PC 端微信掃碼登錄流程
焦點代碼
弄清晰了思緒和流程接上去我們直接上代碼啦.開辟思緒是共通的，開辟說話就請各顯神通啦。
解釋：上面代碼以 C# 說話為例，采取 MVC + EF (注：uuid 等價於我們上述的 authCode)
掃碼登錄頁後台代碼
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();
}
生成二維碼采取插件 jquery.qrcode.js,想具體懂得的同伙請移步 Github。 這裡須要留意的一點是,該插件可以指定二維碼的生成方法,canvas 或許 table 請須要支撐 IE 的同伙指定應用 table 生成
代碼以下:
jQuery('#qrcode').qrcode({
render : "table",
text : "http://百度.com"
});
回歸正題,登錄頁面的重要代碼以下
<!--生成二維碼的容器 div-->
<div id="qrcode-container">
</div>
<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");
//輪詢斷定用戶能否受權
var interval = setInterval(function () {
$.post("@Url.Action("UserLogin","Home")", { "uuid": "@ViewBag.uuid" }, function (data, status) {
if ("success" == status) {
//用戶勝利受權=>跳轉
if ("success" == data) {
window.location.href = '@Url.Action("Index", "Home")';
clearInterval(interval);
}
}
});
}, 200);
})
</script>
輪詢斷定用戶能否受權 API 代碼
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";
}
微信端受權 Action
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();
}
最初附上數據庫表設計
沒甚麼特別的，就是微信前往的各個參數加多一個我們自界說的 uuId
微信參數解釋 概況請見 微信開辟者文檔
運轉後果
1.掃碼登錄頁面
2.要求用戶受權
3.用戶確認受權
4.PC 端登錄完成
文章不免有缺乏的地方,還請海涵。若有發明毛病還望留言指出，筆者感謝不盡！ 微信掃碼注冊登錄 Demo 待筆者整頓後放上 Github 願望幫到更多的同伙,請有須要的同伙留心該文更新。
以上就是PC 端微信掃碼注冊和登錄 的實例，有須要的同伙可以參考下，感謝年夜家對本站的支撐！
