注册微信

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端进⾏扫码注册或登录(没注册的注册,有

注册的直接登录)。是不是突然觉得soeasy.如果觉得⽂字⽐较抽象,请看下⾯图⽰

PC端微信扫码登录流程

核⼼代码

搞清楚了思路和流程接下来我们直接上代码啦.开发思路是共通的，开发语⾔就请各显神通啦。

说明：下⾯代码以C#语⾔为例，采⽤MVC+EF(注：uuid等价于我们上述的authCode)

扫码登录页后台代码

publicActionResultLogin()

{

//如果已登录,直接跳转到⾸页

if(enticated)

returnRedirectToAction("Index","Home");

stringurl=;

stringuuid=d().ToString();

="http://"+url+"/home/loginfor?uuid="+uuid;//构造授权链接

=uuid;//保存uuid

returnView();

}

⽣成⼆维码采⽤插件,想详细了解的朋友请移步。这⾥需要注意的⼀点是,该插件可以指定⼆维码的⽣成⽅式,canvas或者

table请需要⽀持IE的朋友指定使⽤table⽣成

代码如下:

jQuery('#qrcode').qrcode({

render:"table",

text:""

});

回归正题,登录页⾯的主要代码如下