PC 端微信扫码注册和登录实例
转载 &更新时间：日 09:03:20 & 作者：Cboyce
这篇文章主要介绍了PC 端微信扫码注册和登录实例的相关资料,需要的朋友可以参考下
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.H
string uuid = Guid.NewGuid().ToString();
ViewBag.url = "http://" + url + "/home/loginfor?uuid=" +//构造授权链接
ViewBag.uuid =//保存 uuid
return View();
生成二维码采用插件 jquery.qrcode.js,想详细了解的朋友请移步 Github。 这里需要注意的一点是,该插件可以指定二维码的生成方式,canvas 或者 table 请需要支持 IE 的朋友指定使用 table 生成
jQuery('#qrcode').qrcode({
: "table",
: "http://baidu.com"
回归正题,登录页面的主要代码如下
&!--生成二维码的容器 div--&
&div id="qrcode-container"&
&script src="~/Plugins/Jquery/jquery-1.9.1.min.js"&&/script&
&script src="~/Plugins/jquery-qrcode/jquery.qrcode.min.js"&&/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);
轮询判断用户是否授权 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 =
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.
user.City = wxcontext.
user.Country = wxcontext.
user.CreateTime = DateTime.N
user.HeadImgUrl = wxcontext.
user.Nickname = wxcontext.
user.Province = wxcontext.
user.Sex = wxcontext.
user.Unionid = wxcontext.
user.uuId =
db.WX_UserRecord.Add(user);
user.uuId =
db.SaveChanges();
#endregion
return View();
最后附上数据库表设计
没什么特殊的，就是微信返回的各个参数加多一个我们自定义的 uuId
微信参数说明 详情请见 微信开发者文档
1.扫码登录页面
2.请求用户授权
3.用户确认授权
4.PC 端登录完成
文章难免有不足之处,还请海涵。如有发现错误还望留言指出，笔者感激不尽！ 微信扫码注册登录 Demo 待笔者整理后放上 Github 希望帮到更多的朋友,请有需要的朋友留意该文更新。
以上就是PC 端微信扫码注册和登录 的实例，有需要的朋友可以参考下，谢谢大家对本站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具查看: 15179|回复: 4
微信登录点击后不显示二维码而是空白页
本帖最后由 willpower_qiu 于
11:06 编辑
网站升级至Discuz！X3.2后自带微信1.0.9. 开启微信插件后一切正常， 点击微信账号登录后显示二维码并且可以注册并登录。
最近刚刚升级到微信1.1.1后， 点击微信账号登录显示空白页, URL显示为：
手机客户端已升级至1.4.2版本
查询后发现其他网站有类似情况。 请问有何方法可以解决此问题？
您好，此为微信团队问题，暂无法进行受理。
您好，此为微信团队问题，暂无法进行受理。
谢谢你的回复。提供一下细节希望下版本有改进。
之前微信登录1.0.9时URL可以跳转， 但是此版本出现问题。因为有之前备份所以将微信登录1.1.1从插件文件夹删除并重新上传微信登录1.0.9。管理员端依旧显示微信1.1.1. 但是从微信设置来看依旧是1.0.9.
跟换完1.0.9后再次开启微信登录， 发现URL显示以上链接并无法跳转。
网站有一个内部dev环境， 一个内部test环境， 在这两环境中打开微信登录均没有问题 （1.0.9和1.1.1）
希望对解决问题有帮助并希望微信团队及早解决问题
可尝试检查下时间戳是否正确。
可尝试检查下时间戳是否正确。
谢谢。 可以详细解释下时间戳吗？是数据库中时间戳还是Discuz系统时间？
Powered by帖子很冷清，卤煮很失落！求安慰
手机签到经验翻倍！快来扫一扫！
为什么微信扫二维码会很模糊，反应慢，其他APP扫码都不会
207浏览 / 6回复
为何微信扫二维码会很模糊，反应慢，其他APP扫码都不会，求解答！
楼主好，这个问题我会记录并帮您反馈一下
第一次抢到二楼，好紧张啊
谁告诉我该怎么在论坛里快速积分啊啊
为了能看到资源，回复一下
希望问题能解决
大作！大作！大作！
可能感兴趣的板块：
用户名/注册邮箱/注册手机号
其他第三方号登录手机登陆微信显示，二维码已失效，请尝试刷新网页获取新的二维码。登陆不上是怎么回事，怎么去解决。_百度知道
手机登陆微信显示，二维码已失效，请尝试刷新网页获取新的二维码。登陆不上是怎么回事，怎么去解决。
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
采纳数：29
获赞数：35
擅长：暂未定制
你可以用手机号登录微信或者帐号密码登录微信，登录微信之后重新更新二维码就可以，微信二维码经常都会更新的，因为更安全，望采纳，谢谢
怎么更新，具体步骤？
你把二维码关了，用帐号或者手机号登录
然后再更新二维码
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。客服：95017
模式二与模式一相比，流程更为简单，不依赖设置的回调支付URL。商户后台系统先调用微信支付的统一下单接口，微信后台系统返回链接参数code_url，商户后台系统将code_url值生成二维码图片，用户使用微信客户端扫码后发起支付。注意：code_url有效期为2小时，过期后扫码不能再发起支付。
业务流程时序图
图6.9 原生支付模式二时序图
业务流程说明：
（1）商户后台系统根据用户选购的商品生成订单。
（2）用户确认支付后调用微信支付【】生成预支付交易；
（3）微信支付系统收到请求后生成预支付交易单，并返回交易会话的二维码链接code_url。
（4）商户后台系统根据返回的code_url生成二维码。
（5）用户打开微信“扫一扫”扫描二维码，微信客户端将扫码内容发送到微信支付系统。
（6）微信支付系统收到客户端请求，验证链接有效性后发起用户支付，要求用户授权。
（7）用户在微信客户端输入密码，确认支付后，微信客户端提交授权。
（8）微信支付系统根据用户授权完成支付交易。
（9）微信支付系统完成支付交易后给微信客户端返回交易结果，并将交易结果通过短信、微信消息提示用户。微信客户端展示支付交易结果页面。
（10）微信支付系统通过发送异步消息通知商户后台系统支付结果。商户后台系统需回复接收情况，通知微信后台系统不再发送该单的支付通知。
（11）未收到支付通知的情况，商户后台系统调用【】。
（12）商户确认订单已支付后给用户发货。
生成二维码规则
对应链接格式：weixin：//wxpay/bizpayurl?sr=XXXXX。请商户调用第三方库将code_url生成二维码图片。该模式链接较短，生成的二维码打印到结账小票上的识别率较高。
例如，将weixin：//wxpay/s/An4baqw生成二维码见图6.10。
图6.10 原生支付“模式二”二维码示例
二维码相关知识
二维码背景知识介绍：}