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 = "http://" + url + "/home/loginfor?uuid=" + uuid;//构造授权链接
    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");

        //轮询判断用户是否授权
        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 = 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();
} 
最后附上数据库表设计

没什么特殊的,就是微信返回的各个参数加多一个我们自定义的 uuId

微信参数说明 详情请见 微信开发者文档

运行效果

1.扫码登录页面

2.请求用户授权

3.用户确认授权

4.PC 端登录完成

文章难免有不足之处,还请海涵。如有发现错误还望留言指出,笔者感激不尽! 微信扫码注册登录 Demo 待笔者整理后放上 Github 希望帮到更多的朋友,请有需要的朋友留意该文更新。

本文为作者原创,转载请注明出处!

时间: 09-20

PC 端微信扫码注册和登录的相关文章

pc端微信扫码支付和支付宝在线支付(还未验证 先留着)

本DEMO演示了PHP支付宝和微信扫码在线支付,支付成功后,在回调地址显示支付相关信息. 操作步骤: 1.修改配置文件 Application/common/conf/config.php $arr = array(     'DB_TYPE' => 'mysql',     'DB_HOST' => "localhost",     'DB_NAME' => 'demo',     'DB_USER' => "sucaihuo.com", 

2015 ecshop 微信支付插件v3版 含【PC端微信扫码支付+手机端微信支付】

2015ecshop微信支付接口真正的无线支付  ,  ecshop微信接口插件 完美对接微信公众平台 2015最新版本,包可用. 以下是配置截图 手机端配置: PC端配置: 以下是手机购物流程: 1. 2. 3. 4. 5. 6. 8. PC端扫码支付插图 附件下载地址: http://download.csdn.net/detail/joefche/8569353 联络QQ: 75189343

php实现微信扫码自动登陆与注册功能

本文实例讲述了php实现微信扫码自动登陆与注册功能.分享给大家供大家参考,具体如下: 微信开发已经是现在程序员必须要掌握的一项基本的技术了,其实做过微信开发的都知道微信接口非常的强大做起来也非常的简单,这里我们一起来看一个微信自动登陆注册的例子. php 微信扫码 pc端自动登陆注册 用的接口scope 是snsapi_userinfo,微信登陆一个是网页授权登陆,另一个是微信联合登陆 网页授权登陆:http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b647

Web应用多账号系统设计及微信扫码登录实现

Web应用多账号系统设计及微信扫码登录实现 1   前言概述 公司对功能测试,性能测试,安全测试等等都做了比较好的自动化后,急需要一个MIS系统来统一管理这些结果及报表. 此MIS系统特点如下: 仅内部人员使用 部署在公网 基于如上特点,显然让公司的人为这样一个内部系统而实现一个完整的账号不太现实,要兼顾隐私性和便捷性的需求,作者想到了使用微信扫码登录来做为身份认证,然后后台管理员审核,这样就可以达到如下的效果: 可以实现无门槛注册(微信扫一扫就完成注册),保证了便捷性 系统对未审核通过的人员进

php微信开放平台--第三方网页微信扫码登录(OAuth2.0)

第一.OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户提供一个令牌,而不是用户名和密码来访问他们存放在特定服务提供者的数据.每一个令牌授权一个特定的网站(例如,视频编辑网站)在特定的时段(例如,接下来的2小时内)内访问特定的资源(例如仅仅是某一相册中的视频).这样,OAuth允许用户授权第三方网站访问他们存储在另外的服务提供者上的信息,而不需要分享他们的

微信开放平台开发——网页微信扫码登录(OAuth2.0)

.OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户提供一个令牌,而不是用户名和密码来访问他们存放在特定服务提供者的数据.每一个令牌授权一个特定的网站(例如,视频编辑网站)在特定的时段(例如,接下来的2小时内)内访问特定的资源(例如仅仅是某一相册中的视频).这样,OAuth允许用户授权第三方网站访问他们存储在另外的服务提供者上的信息,而不需要分享他们的访问

C#开发微信门户及应用(45)--微信扫码登录

在前面随笔<C#开发微信门户及应用(41)--基于微信开放平台的扫码登录处理>介绍了基于微信开放平台接口实现的微信扫码直接登录的过程.本篇介绍对扫码登录的一些改进和处理,以便更方便应用在实际项目中. 1.扫码登录配置处理 在我前面的随笔扫码登录处理中,介绍了账号登陆和扫码登录并存的情况,有时候我们可能想只是允许用户扫码登录即可,也就是不需要账号登陆,这种情况我们可以通过进行配置实现处理.例如我在一个基于微信的系统应用里面,通过配置实现了仅仅允许扫码登录的效果.也就是我们可以根据配置,因此其他登

微信扫码登录

一.微信官方参考文档地址: https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=&lang=zh_CN 首先你需要在微信开放平台申请一个微信网站应用,获取 AppID:aaaaaaaaabbcc AppSecret: sfasfsafsafsafsads 二.jsp页面代码 <%@

微信扫码登录asp微信扫码登陆代码

网站接入微信扫码登录并获取用户基本信息(完美绕过微信开放平台) 电脑版网站实现微信扫码登录,注册会员还要设密码太麻烦,会员也记不住密码,采用微信扫码登录网站更方便,会员无需设密码,用他的微信做为系统登录用户名,全程自动操作更方便.源码是用asp写的,mdb的数据库,微信扫描电脑网页上的二维码实现登录. 只需要用微信扫一下二维码,这个网站就可以展示你的微信昵称和头像,免去注册账号和输入密码登录的步骤,还免去设置头像和昵称的步骤,所以是挺方便的.我这个asp写好的代码和微信开放平台不同,微信开放平台