最近使用wps的时候发现一个有意思的事情,他们的网站登录使用的扫码登陆不是微信扫码直接登录,或是客户端app扫码,而是微信扫码打开小程序确认登陆。

这样一来用户无需下载app客户端 比如阿里云 百度云盘的扫码都是在APP上的,小程序码可以直接使用微信扫码打开。一是方便用户,再一个还能为小程序带来用户流量,真是个不错的主意。


具体他是怎么实现的呢?下面我们来分析一下,一般扫码都是二维码带个参数,客户端识别后向服务端发送一个用户信息标识与之绑定 服务端收到客户端的请求后验证用户信息,然后设置session 让该用户登陆成功。大致的流程是这样,但是具体的细节有很多。


首先,客户端一般是APP,现在客户端是小程序,而二维码的生成一般是个随机数,APP客户端可以直接普通二维码来识别二维码里的信息,但是微信扫码普通二维码肯定行不通,所以我们得生成特殊的二维码--小程序码,这样用户微信直接扫码可以打开小程序,能打开小程序还得带参,这个其实也容易,微信有提供两个接口用来生成小程序二维码   

wxacode.createQRCodewxacode.getUnlimited

这两个接口都能生成小程序码,但是有点差异crerateQRCode是有次数限制 只能使用十万次 但是生成的小程序码可以带比较长的参数页面路径支持128个字符,一般适合固定码且量少的情况 比如餐饮门店的座位上贴的点餐码等,而getUnlimited则没有使用次数限制 二维码也是永久有效,但是生成的二维码路径参数长度限制为32个字符,但是对于扫码登陆来说足够了,因为我们只需要页面page和一个随机字符。


用这个接口后端生成小程序码呈现在网页上 比如生成的参数是

page:pages/scan/scan,

scenc:code=1234


这个code就是随机参数 生成小程序码的同时将该信息缓存


接下来就是用户使用微信扫码小程序码 会直接打开小程序的指定页面就是上面的pages/scan/scan

我们在这个页面可以做强制登陆用户进到该页面先检查登陆情况,拿到用户信息比如token等关键信息,然后获取二维码传进来的随机参数 scenc 

小程序中在onload可以直接获取


Page({
  onLoad (query) {
    // scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
    const scene = decodeURIComponent(query.scene)
  }
})

拿到二维码中的随机参数code之后向服务端接口发送用户标识(token)和code

服务端的接口根据token可以获取到当前扫码的用户的身份信息,code可以知道是哪个web被扫码了, 这个环节做细致一点还可以加上websocket扫码后发送一个请求 服务端推送一个消息到web web呈现扫码成功待确定 ,用户点击小程序的确定登录再次发送请求,服务端设置session让用户登陆成功,并通过websocket推送消息让web跳转至登陆后的页面,整个流程就算完成了。

好啦,理论部分分析完成,等有时间把博客的小程序端做了再和大家分享代码实现。