微信扫码登录实现原理

本贴最后更新于 3025 天前,其中的信息可能已经事过境迁
我最近的很多工作围绕着微信公众号的开发进行的。对微信公众号开发的很多细节都比较清楚。扫码登录也基本是首选的登录方式。这里我就记录一下我们的微信扫码登录时怎么实现的。
我们是用websocket来实现的。大体思路就是
>* 前端请求登录二维码的时候传token参数,后端保存token到数据库
>* 手机扫码。后台判断扫码事件的参数是否合法,然后通过websocket把验证结果发送给客户端
>* 客户端如果收到成功消息。则向服务端发送一条登录成功的确认消息。
>* 服务端收到之后,进行用户登录状态的处理,session的保存,把处理结果返回给客户端
>* 客户端再次收到成功标志之后,做登录跳转。标志着登录成功。
所有异常结果都由前端提示操作失败。
##1. 进入登录页面,前端向后台请求二维码
在扫码登录页面,前端向后台发个Ajax请求,请求扫描登录二维码。这里需要一个传一个请求参数token,因为后面要用它进行验证。
token可用时间戳+随机数获取
```
var token = '' + new Date().getTime() + '_' + Math.floor(Math.random() * 1000);
```

后台接收到token后,要保存到数据库。后面验证需要。二维码的接口写法当然有很多种。这是我的做法(方法细节就不列出来了),groovy代码:
```
// 场景二维码 当用户未关注时弹出
handler.get('/ih/bpv2/get-login-qrcode'){req,resp->
    String token = req.params.token
    byte[] b = BpAddService.getFocusQr(token)
    if(!b){
        log.info('ih bp qr generate error')
        resp.statusCode = 404
        resp.end ''
        return
    }

    AuthService.addToken(token)
    resp.headers.set('Content-type', 'image/jpg')
    resp.end(new Buffer(b))
}

```
返回的直接是一张图片,所以替换img src即可。
前端调用二维码的方式为
```
$('#qr').attr('src', '/ih/bpv2/get-login-qrcode?token=' + token);
```
##2. 通过websocket向后台接口发送token
用sockjs实现,前端写法为
```
sock = new SockJS(sockServerUrl);
		sock.onopen = function(){
			console.log('open');
			send({action: 'wx-auth-login-mapping-token-4-bpv2', token: tokenLast});
		};
```
后端接口接收到之后的处理方式就是记录登录方的`ip`,`token`和`sockId`信息,放在缓存`Redis`中
详细代码如下:
```
// client id binding with token,现在是一台机器
handlerSockjs.add('wx-auth-login-mapping-token-4-bpv2'){sock, json ->
    if(!json.token)
        return [flag: false, msg: 'no token']

    String ipThis = IPUtils.getFirstNoLoopbackAddress()
    String sp = '--'

    def ins = JedisStore.getInstance(config.redisHost)
    ins.set('WX_AUTH_TOKEN_SOCKID', json.token, ipThis + sp + sock.writeHandlerID)
    [flag: true]
}
```
##3. 手机扫码登录
这个二维码是微信的场景二维码,手机扫码事件会被微信接收到,然后推送到我们的服务器。推送过来的参数就有用户的openid,我们再从场景二位码的场景值中用正则匹配出token。拿这个token,和数据库的对比,看是不是合法的。如已经登录过。伪造token等情况。不合法的时候直接返回错误信息。如果合法则用websocket向客户端发送一条消息,告诉客户端扫码验证成功了。客户端收到之后就是扫码真正成功的标志。客户端再需要向服务端发送一条消息确认成功。准备去登录成功的页面。服务端再做一次判断。添加用户登录的cookie等信息。返回给客户端成功消息的时候,客户端才算是真正成功。做跳转。

后端对微信扫码登录的处理逻辑如下:
```
// 扫描二维码,发送模板消息和生成名片的连接
WxMessager.inst.add('event', /ih\-bpv2\-focus\-qrcode\-.+/){Map<String, String> info ->
    String openid = info.FromUserName
    Map user = WxUserLocal.getUserByOpenid(openid)
    if(!user)
        return

    // 场景值
    String pre = 'ih-bpv2-focus-qrcode-'
    int start = pre.size()
    String token = info.EventKey[start..-1]

    log.info('ih bp login token - ' +  openid + ' - ' + token)

    // check token
    def tokenRow = AuthService.getTokenRow(token)
    if(!tokenRow || tokenRow.status != 0){
        return
    }
    int tokenRowId = tokenRow.id
    AuthService.updateTokenRow(tokenRowId, Constant.STATUS_YES, openid)

    // broadcast
    def ins = JedisStore.getInstance(config.redisHost)
    String ipAndSockid = ins.get('WX_AUTH_TOKEN_SOCKID', token)
    if(!ipAndSockid){
        log.info('broadcast not found sock id - ' + token)
        return
    }

    log.info('broadcast found sock id - ' + ipAndSockid)
    String sp = '--'
    String[] arr = ipAndSockid.split(sp)
    String targetIp = arr[0]
    String sockid = arr[1]

    String ipThis = IPUtils.getFirstNoLoopbackAddress()
    if(targetIp == ipThis){
        handlerSockjs.send(sockid, [action: 'loginok'])
    }else{
        int port = 80
        String url = 'http://' + targetIp + ':' + port + '/ih/bpv2/front/broadcast'
        log.info('front user login redirect -  ' + url)

        Map params = [:]
        params.sockid = sockid
        String body = JSON.toJSONString(params)
        try{
            def request = HttpRequest.post(url).connectTimeout(1000 * 2).send(body)
            String str = request.body()
            log.info('front user login redirect result ' + str)
            if(!str){
                log.info('front user login redirect by http return blank ' + sockid)
            }else{
                def resultSend = JSON.parse(str)
                if(resultSend && resultSend.flag){
                    log.info('front user login redirect by http return ok ' + sockid)
                }else{
                    log.info('front user login redirect by http return error ' + sockid)
                }
            }
        }catch(e){
            log.error('front user login redirect error - ' + sockid, e)
        }
    }


    String inner = ''
    String loginTime = new Date().format('yyyy-MM-dd HH:mm:ss')
    // 您与${loginTime}登录了xxxx平台

    Map cardSaved = new CardRefactorService().getCardInfoByOpenid(openid)
    boolean isCardFill = cardSaved && cardSaved.name
    if(!isCardFill) {
        String redirectUrl = '/ih/comm/index?hash=/card-edit'
        String url = WxApi.getLoginRedirectUrl(redirectUrl)
        inner = "<a href=\"${url}\">点击此处生成你的名片,方便BP审核通过后联系你</a>"
    }

    String c = """欢迎使用xxxxx功能
${inner}"""
    [MsgType: 'text', Content: c]
}

```

前端处理逻辑:
```
sock.onmessage = function(e){
			console.log(e.data);
			if(!e.data)
				return;

			var obj = JSON.parse(e.data);
			if(obj && 'reject' == obj.action){
				console.log('登陆失败');
				return;
			}

			if(obj && 'loginok' == obj.action){
				$.get('/ih/bpv2/front/login/done?token=' + tokenLast, function(data){
					var errs = {
						'token-invalid': '令牌时效'
					};
					if(data.error){
						alert(errs[data.error]);
						return;
					}

					document.location.href = '/bp_20/detail-list.html';
				/*	if(data.isAdmin){
						document.location.href = '/bp/manage.html';
					}else{
					}*/
				});
				return;
			}
		};
```

后台最后一次验证的逻辑
```
// 用websocket登陆成功后
handler.get('/ih/bpv2/front/login/done'){req, resp ->
    String token = req.params.token
    if(!token){
        resp.json([error: 'token-invalid'])
        return
    }

    def tokenRow = AuthService.getTokenRow(token)
    if(!tokenRow || tokenRow.status != 1){
        resp.json([error: 'token-invalid'])
        return
    }

    String openid = tokenRow.openid
    resp.addCookie([name: 'user-login-openid', value: openid, path: '/'])
    resp.addCookie([name: 'user-login-id', value: '', path: '/'])
    BpAddService.addRole([openid: openid, roleId: BpConstant.BP_USER_ROLE_GENERAL_USER])

    resp.json([flag: true, info: 'login success'])
}
```

至此,所有流程走完。
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    130 引用 • 793 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
guobing
会当凌绝顶,一览众山小

推荐标签 标签

  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖 • 1 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 764 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 62 关注
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 624 关注
  • 音乐

    你听到信仰的声音了么?

    60 引用 • 511 回帖 • 1 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 16 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 588 回帖
  • 自由行
    10 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 709 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 2 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 641 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖 • 2 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 72 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 304 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    55 引用 • 85 回帖 • 1 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1705 回帖
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 67 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 21 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖 • 2 关注
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 483 关注
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 9 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    53 引用 • 40 回帖 • 1 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    86 引用 • 122 回帖 • 625 关注