PC端扫码注册和登录
⼀、前⾔
先声明⼀下，本⽂所注重点为实现思路，代码及数据库设计主要为了展现思路，如果对代码效率有着苛刻要求的项⽬切勿照搬。
相信做过开发的⼈授权这块都没少做过，但是⼀般来说我们更多的是为移动端的⽹站做授权，确切来说是在端下做的⼀个授权。今天遇到的⼀个问题是，项⽬⽀持端以及 PC 端，并且开放注册。要求做到⽆论在 PC 端注册或者是在端注册之后都可以在另外⼀个端进⾏登录。也就是说⽆论 PC 或是必须做到"你就是你"(通过某种⽅式关联)。
⼆、寻解决⽅案
按传统的⽅式来思考，端完全可以通过授权进⾏注册，但是PC端呢，传统的⽅式⽆⾮就是填填⼿机号码啊，或者 Email 等等。如果采⽤这种⽅式注册，会产⽣下⾯这的问题
1. 我先在端授权注册，那么如果我要登录PC端还是得进⾏注册。
对此解决⽅案可以为：授权注册后“强制”要求⽤户必须填写基本信息，如⼿机号、Email 。这样我们
可以通过某种⽅式为⽤户⽣成PC 端登录的账号密码.例如以⽤户的 nickname 为账号,⼿机号码为密码，等等⽅式。
弊端:⽤户体验不好，再者有安全隐患。毕竟你的昵称, Email 或者⼿机号码都是暴露的。
2. 如果我先在 PC 端注册，我在授权的时候怎样关联移动端
当然，凡是问题总会有解决⽅案的。思路如下：
⽅案⼀：当⽤户在 PC 端注册后，“强制” ⽤户必须填写昵称。以此作为授权时的关联条件。但是很遗憾，昵称可以改，不是唯⼀的怎么可以⽤来做关联？⽅案⼀阵亡。
⽅案⼆：在端授权后，以及在 PC 端注册后“强制”要求⽤户填写⼿机号码以此为关联。这样衍⽣出⼀个问题，必须确保⽤户⼿机的真实信，没问题。这个可以通过⼿机验证码来实现（Email也是⼀样）。但是不妨假设⼀下有下⾯这种情况，如果我有两个⼿机号码，PC 端注册时填⼀个，注册时填另⼀个。关联的了吗？答案是很遗憾。再者，我在PC 端注册后我就是不填（笔者把强制打上双引号的原因），然后我⽤端授权登录⼀下。好吧，此时将会有两条数据等着你想办法去关联，典型的开发者⾃挖坑。这种⽅式某种程度上⾏得通，但是严谨程度上是开发者⽆法接受的。
三、回归原点的解决⽅案
分析：既然⽅案上述⽅案都有问题，我们先把它们都抛到⼀边。整理⼀下思路，让我们回到问题的根本。关联的问题，要的是⼀个唯⼀标识。唯⼀标识正如我们的⾝份证号码，我们办理信⽤卡的时候⾝份证是必须的，实名制下购买号码卡，⾝份证是必须的。假设我们是这系统管理员，那么我完全可以通过你的⾝份证号码查出你⼿机号码，银⾏卡号码。
有了上⾯的思路之后，我们需要做的就是到⼀个唯⼀标识来作为关联.上有个重要的⾓⾊ 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 = "" + url + "/home/loginfor?uuid=" + uuid;//构造授权链接
ViewBag.uuid = uuid;//保存 uuid
return View();
}
⽣成⼆维码采⽤插件 jquery.qrcode.js，想详细了解的朋友请移步。这⾥需要注意的⼀点是，该插件可以指定⼆维码的⽣成⽅式,canvas 或者table 请需要⽀持 IE 的朋友指定使⽤ table ⽣成
代码如下:
jQuery('#qrcode').qrcode({
render    : "table",
text    : "baidu"
});
回归正题，登录页⾯的主要代码如下
<!--⽣成⼆维码的容器 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 = untry;
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已上传⾄
附上两张配置图:
1.开发参数配置
2.配置
⽂章难免有不⾜之处，还请海涵。如有发现错误还望留⾔指出，笔者感激不尽！扫码注册登录 Demo 待笔者整理后放上 Github 希望帮到更多的朋友，请有需要的朋友留意该⽂更新。
本⽂为作者原创，转载请注明出处!