欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

PC 端微信掃碼注冊和登錄實例

 更新時間:2016年09月22日 09:03:20   作者:Cboyce  
這篇文章主要介紹了PC 端微信掃碼注冊和登錄實例的相關(guān)資料,需要的朋友可以參考下

PC 端微信掃碼注冊和登錄

一、前言

先聲明一下,本文所注重點為實現(xiàn)思路,代碼及數(shù)據(jù)庫設(shè)計主要為了展現(xiàn)思路,如果對代碼效率有著苛刻要求的項目切勿照搬。

相信做過微信開發(fā)的人授權(quán)這塊都沒少做過,但是一般來說我們更多的是為移動端的網(wǎng)站做授權(quán),確切來說是在微信端下做的一個授權(quán)。今天遇到的一個問題是,項目支持微信端以及 PC 端,并且開放注冊。要求做到無論在 PC 端注冊或者是在微信端注冊之后都可以在另外一個端進行登錄。也就是說無論 PC 或是微信必須做到"你就是你"(通過某種方式關(guān)聯(lián))。

二、尋找解決方案

按傳統(tǒng)的方式來思考,微信端完全可以通過授權(quán)進行注冊,但是PC端呢,傳統(tǒng)的方式無非就是填填手機號碼啊,或者 Email 等等。如果采用這種方式注冊,會產(chǎn)生下面這的問題

1.我先在微信端授權(quán)注冊,那么如果我要登錄PC端還是得進行注冊。

對此解決方案可以為:微信授權(quán)注冊后“強制”要求用戶必須填寫基本信息,如手機號、Email 。這樣我們可以通過某種方式為用戶生成PC端登錄的賬號密碼.例如以用戶的 nickname 為賬號,手機號碼為密碼,等等方式。

弊端:用戶體驗不好,再者有安全隱患。畢竟你的微信昵稱, Email 或者手機號碼都是暴露的。

2.如果我先在 PC 端注冊,我在微信授權(quán)的時候怎樣關(guān)聯(lián)移動端, 當(dāng)然,凡是問題總會有解決方案的。思路如下:

    方案一:當(dāng)用戶在 PC 端注冊后,“強制” 用戶必須填寫微信昵稱。以此作為微信授權(quán)時的關(guān)聯(lián)條件。但是很遺憾,微信昵稱可以改,不是唯一的怎么可以用來做關(guān)聯(lián)?方案一陣亡。

    方案二:在微信端授權(quán)后,以及在 PC 端注冊后“強制”要求用戶填寫手機號碼以此為關(guān)聯(lián)。這樣衍生出一個問題,必須確保用戶手機的真實信,沒問題。這個可以通過手機驗證碼來實現(xiàn)(Email也是一樣)。但是不妨假設(shè)一下有下面這種情況,如果我有兩個手機號碼,PC 端注冊時填一個,微信注冊時填另一個。關(guān)聯(lián)的了嗎?答案是很遺憾。再者,我在PC 端注冊后我就是不填(筆者把強制打上雙引號的原因),然后我用微信端授權(quán)登錄一下。好吧,此時將會有兩條數(shù)據(jù)等著你想辦法去關(guān)聯(lián),典型的開發(fā)者自挖坑。這種方式某種程度上行得通,但是嚴謹程度上是開發(fā)者無法接受的。

三、回歸原點的解決方案

分析:既然方案上述方案都有問題,我們先把它們都拋到一邊。整理一下思路,讓我們回到問題的根本。關(guān)聯(lián)的問題,要的是一個唯一標識。唯一標識正如我們的身份證號碼,我們辦理信用卡的時候身份證是必須的,實名制下購買號碼卡,身份證是必須的。假設(shè)我們是這系統(tǒng)管理員,那么我完全可以通過你的身份證號碼查出你手機號碼,銀行卡號碼。

有了上面的思路之后,我們需要做的就是找到一個唯一標識來作為關(guān)聯(lián).微信上有個重要的角色 openid。 它跟我們上面提到的身份證號碼有這共同的作用,微信賬號對某一公眾號的唯一標識。

微信端的授權(quán)拿到 openid 做過微信開發(fā)的人都應(yīng)該沒有問題。問題是怎樣來實現(xiàn) PC 端 在注冊或者登陸的時候拿到 openid。筆者的實現(xiàn)思路如下。PC 端注冊,或者登陸時顯示一個二維碼引導(dǎo)用戶使用微信掃碼,使其跳轉(zhuǎn)到授權(quán)頁面。這一步有一個最為關(guān)鍵的細節(jié),二維碼請帶上一個唯一的授權(quán)碼(authCode)。試想一下如果用戶授權(quán)后我們能把 openid 以及 authCode 寫入到數(shù)據(jù)庫。那么我們就可以在 PC 端通過某個 API 獲取 authCode 所關(guān)聯(lián)的這個 openid。如果我們做到這點我們就可以知道當(dāng)前是誰在 PC 端進行掃碼注冊或登錄(沒注冊的注冊,有注冊的直接登錄)。 是不是突然覺得 so easy. 如果覺得文字比較抽象,請看下面圖示

PC 端微信掃碼登錄流程

核心代碼

搞清楚了思路和流程接下來我們直接上代碼啦.開發(fā)思路是共通的,開發(fā)語言就請各顯神通啦。

說明:下面代碼以 C# 語言為例,采用 MVC + EF (注:uuid 等價于我們上述的 authCode)

掃碼登錄頁后臺代碼

public ActionResult Login()
{
  //如果已登錄,直接跳轉(zhuǎn)到首頁
  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,想詳細了解的朋友請移步 Github。 這里需要注意的一點是,該插件可以指定二維碼的生成方式,canvas 或者 table 請需要支持 IE 的朋友指定使用 table 生成

代碼如下:

jQuery('#qrcode').qrcode({
  render  : "table",
  text  : "http://baidu.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");

    //輪詢判斷用戶是否授權(quán)
    var interval = setInterval(function () {
      $.post("@Url.Action("UserLogin","Home")", { "uuid": "@ViewBag.uuid" }, function (data, status) {
        if ("success" == status) {
          //用戶成功授權(quán)=>跳轉(zhuǎn)
          if ("success" == data) {
            window.location.href = '@Url.Action("Index", "Home")';
            clearInterval(interval);
          }
        }
      });
    }, 200);
  })
</script>


輪詢判斷用戶是否授權(quán) API 代碼

public string UserLogin(string uuid)
{
  //驗證參數(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";

  //寫入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)建微信通用類 - 這里代碼比較復(fù)雜不在這里貼出
   * 遲點我會將整個 Demo 稍微整理放上 Github
  */
  WechatUserContext wxcontext = new WechatUserContext(System.Web.HttpContext.Current, uuid);

  //使用微信通用類獲取用戶基本信息
  wxcontext.GetUserInfo();

  if (!string.IsNullOrEmpty(wxcontext.openid))
  {
    uuid = Request["state"];
    //判斷數(shù)據(jù)庫是否存在
    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();
} 


最后附上數(shù)據(jù)庫表設(shè)計

沒什么特殊的,就是微信返回的各個參數(shù)加多一個我們自定義的 uuId

微信參數(shù)說明 詳情請見 微信開發(fā)者文檔

運行效果

1.掃碼登錄頁面

2.請求用戶授權(quán)

3.用戶確認授權(quán)

4.PC 端登錄完成

文章難免有不足之處,還請海涵。如有發(fā)現(xiàn)錯誤還望留言指出,筆者感激不盡! 微信掃碼注冊登錄 Demo 待筆者整理后放上 Github 希望幫到更多的朋友,請有需要的朋友留意該文更新。

以上就是PC 端微信掃碼注冊和登錄 的實例,有需要的朋友可以參考下,謝謝大家對本站的支持!

相關(guān)文章

  • Java網(wǎng)絡(luò)編程之TCP通信完整代碼示例

    Java網(wǎng)絡(luò)編程之TCP通信完整代碼示例

    這篇文章主要介紹了Java網(wǎng)絡(luò)編程之TCP通信完整代碼示例,具有一定借鑒價值,需要的朋友可以了解下。
    2017-12-12
  • Java快速實現(xiàn)圖書管理基本功能

    Java快速實現(xiàn)圖書管理基本功能

    隨著網(wǎng)絡(luò)技術(shù)的高速發(fā)展,計算機應(yīng)用的普及,利用計算機對圖書館的日常工作進行管理勢在必行,本篇文章涵蓋一個圖書管理系統(tǒng)的基本功能實現(xiàn)代碼,大家可以查缺補漏,提升水平
    2022-05-05
  • 解決Maven項目加載spring bean的配置xml文件會提示找不到問題

    解決Maven項目加載spring bean的配置xml文件會提示找不到問題

    這篇文章主要介紹了解決Maven項目加載spring bean的配置xml文件會提示找不到問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2021-08-08
  • Java?數(shù)據(jù)結(jié)構(gòu)與算法系列精講之漢諾塔

    Java?數(shù)據(jù)結(jié)構(gòu)與算法系列精講之漢諾塔

    漢諾塔是源于印度一個古老傳說的益智玩具。大梵天創(chuàng)造世界時做了三根石柱,在一根柱子上從下往上按大小順序摞著64片黃金圓盤。大梵天命令婆羅門把圓盤從下面開始按大小順序重新擺放在另一根柱子上。并且規(guī)定,在小圓盤上不能放大圓盤,三根柱子之間一次只能移動一個圓盤
    2022-02-02
  • java 常用快捷鍵匯總(超經(jīng)典)

    java 常用快捷鍵匯總(超經(jīng)典)

    以下是對在java開發(fā)中的常用快捷鍵進行了匯總介紹。非常全哦!需要的朋友可以過來參考下
    2013-08-08
  • spring中aop的xml配置方法實例詳解

    spring中aop的xml配置方法實例詳解

    AOP的配置方式有2種方式:xml配置和AspectJ注解方式。下面這篇文章主要給大家介紹了關(guān)于spring中aop的xml配置方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-07-07
  • 一篇文章帶你學(xué)習(xí)JAVA MyBatis底層原理

    一篇文章帶你學(xué)習(xí)JAVA MyBatis底層原理

    近來想寫一個mybatis的分頁插件,但是在寫插件之前肯定要了解一下mybatis具體的工作原理吧,本文就詳細總結(jié)了MyBatis工作原理,,需要的朋友可以參考下
    2021-09-09
  • java基于servlet使用組件smartUpload實現(xiàn)文件上傳

    java基于servlet使用組件smartUpload實現(xiàn)文件上傳

    這篇文章主要介紹了java基于servlet使用組件smartUpload實現(xiàn)文件上傳,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-10-10
  • Spring中@RequestParam使用及遇到的一些坑

    Spring中@RequestParam使用及遇到的一些坑

    @RequestParam 主要用于將請求參數(shù)區(qū)域的數(shù)據(jù)映射到控制層方法的參數(shù)上,下面這篇文章主要給大家介紹了關(guān)于Spring中@RequestParam使用及遇到的一些坑,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-06-06
  • Springboot-admin整合Quartz實現(xiàn)動態(tài)管理定時任務(wù)的過程詳解

    Springboot-admin整合Quartz實現(xiàn)動態(tài)管理定時任務(wù)的過程詳解

    Quartz是一款Java編寫的開源任務(wù)調(diào)度框架,同時它也是Spring默認的任務(wù)調(diào)度框架,它的作用其實類似于Timer定時器以及ScheduledExecutorService調(diào)度線程池,這篇文章主要介紹了Springboot-admin整合Quartz實現(xiàn)動態(tài)管理定時任務(wù),需要的朋友可以參考下
    2023-04-04

最新評論