您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> Java 相關知識

PC 端微信掃碼登錄註冊完整實現：基於 OpenID 的跨端身份綁定方案

編輯：Java 相關知識

項目同時支援 PC 端與微信端，要求「一套賬號，雙端互通」：無論在哪端註冊，另一端均可直接登入。核心挑戰在於建立 PC 端匿名會話與微信 OpenID 的可信綁定。本文提出**掃碼攜帶唯一授權碼**方案，通過輪詢實現無感綁定，附完整 C# MVC + EF 實現代碼與數據庫設計。

方案演進與核心思路

失敗嘗試

強制微信註冊時填手機/郵箱 → 體驗差、安全隱患
PC 註冊填微信昵稱 → 昵稱可修改、非唯一
雙端強制填手機號 → 雙號用戶無法綁定、用戶拒絕填寫導致髒數據

正解：OpenID 作為唯一身份標識

微信 OpenID 對應公眾號/開放平台下的唯一用戶，天然具備「身份證」屬性。關鍵在於**如何在 PC 端獲取用戶 OpenID**。

掃碼登錄流程設計

PC 登錄頁生成唯一 uuid（授權碼），構造微信授權鏈接 https://.../loginfor?uuid=xxx，生成二維碼
用戶掃碼 → 微信授權頁 → 回調 Loginfor Action，攜帶 uuid (state 參數) 與 openid
後端將 openid 與 uuid 寫入用戶表
PC 端輪詢 UserLogin(uuid) API，檢測到綁定成功 → 寫入 Cookie 完成登入

核心代碼實現 (C# MVC)

1. PC 登錄頁生成二維碼

public ActionResult Login() {
    if (User.Identity.IsAuthenticated) return RedirectToAction("Index", "Home");
    
    string uuid = Guid.NewGuid().ToString();
    string url = $"https://{Request.Url.Host}/home/loginfor?uuid={uuid}";
    
    ViewBag.QrUrl = url;
    ViewBag.Uuid = uuid;
    return View();
}

// 前端：jquery.qrcode.js 生成二維碼 (IE 相容指定 render: "table")
$('#qrcode').qrcode({ render: "table", text: "@ViewBag.QrUrl" });

// 輪詢綁定狀態
setInterval(() => {
    $.post("@Url.Action("UserLogin")", { uuid: "@ViewBag.Uuid" }, (data) => {
        if (data === "success") location.href = '@Url.Action("Index", "Home")';
    });
}, 200);

2. 輪詢 API：驗證綁定並登入

public string UserLogin(string uuid) {
    if (string.IsNullOrEmpty(uuid)) return "param_error";
    
    var user = db.WX_UserRecord.FirstOrDefault(u => u.uuId == uuid);
    if (user == null) return "not_authcode";
    
    // 綁定成功：寫入認證 Cookie，清空 uuid 防重複使用
    FormsAuthentication.SetAuthCookie(user.OpenId, false);
    user.uuId = null;
    db.SaveChanges();
    return "success";
}

3. 微信授權回調：建立綁定關係

public ActionResult Loginfor(string uuid) {
    // 1. 獲取微信用戶信息 (snsapi_userinfo)
    var wx = new WechatUserContext(HttpContext.Current, uuid);
    wx.GetUserInfo();
    
    if (string.IsNullOrEmpty(wx.openid)) return View();
    
    // 2. 查找或創建用戶記錄
    var user = db.WX_UserRecord.FirstOrDefault(u => u.OpenId == wx.openid);
    if (user == null) {
        user = new WX_UserRecord {
            OpenId = wx.openid,
            Nickname = wx.nickname,
            HeadImgUrl = wx.headimgurl,
            Sex = wx.sex,
            Province = wx.province,
            City = wx.city,
            Country = wx.country,
            Unionid = wx.unionid,
            CreateTime = DateTime.Now
        };
        db.WX_UserRecord.Add(user);
    }
    
    // 3. 關鍵：將 uuid 寫入用戶記錄，完成 PC 會話與 OpenID 綁定
    user.uuId = uuid;
    db.SaveChanges();
    return View();
}

數據庫表設計

CREATE TABLE WX_UserRecord (
    Id INT PRIMARY KEY IDENTITY,
    OpenId NVARCHAR(100) NOT NULL UNIQUE,  -- 微信唯一標識
    Unionid NVARCHAR(100),                 -- 開放平台統一標識
    Nickname NVARCHAR(100),
    HeadImgUrl NVARCHAR(500),
    Sex INT,
    Province NVARCHAR(50),
    City NVARCHAR(50),
    Country NVARCHAR(50),
    CreateTime DATETIME,
    uuId NVARCHAR(50) NULL                 -- 掃碼授權碼，綁定後清空
);