前言

我准备给彩虹屁老婆插件开发一个皮肤/模型下载网站，里面需要具备用户系统。但我又懒得去完整开发一套注册，用户激活机制。

不过当时我的第一反应是可以利用微信公众号的扫码登录，但公众号的扫码登录接口必须得是服务号才可以使用。服务号的注册又必须使用营业执照走企业认证，总之比较麻烦。恰好当时我的小程序已经发布了，所以我就在思考，能否直接利用小程序码的接口来自己设计一套扫码登录流程呢？

如何实现

经过一番思考和调研，我确定以下方式是可行的

利用生成小程序码的接口wxacode.getUnlimited，我们可以生成无限个数的小程序码，虽然该接口携带参数有些限制，但不影响整个逻辑的实现。

扫小程序码登录逻辑如下:

核心技术点

生成时间戳签名

Web端生成的时间戳签名必须得是唯一的，如果出现不唯一的签名，用户登录就会乱套了。而生成小程序码所使用的getUnlimited接口仅允许携带一个scene参数，长度要求为32个字符以内。

保证唯一性有很多GUID/UUID的方案，但在本例里，小程序码携带参数的字符数量是有限制的，所以常见方案都不太适合。我最后找到的是nanoid这个方案，非常符合我的需求。

/*
一个小巧、安全、URL友好、唯一的 JavaScript 字符串ID生成器。“一个惊人的无意义的完美主义水平, 这简直让人无法不敬佩。”**小巧.**  130 bytes (已压缩和 gzipped)。 没有依赖。 [Size Limit](https://github.com/ai/size-limit) 控制大小。
**快速.**  它比 UUID 快 60%。
**安全.**  它使用加密的强随机 API。可在集群中使用。
**紧凑.**  它使用比 UUID（`A-Za-z0-9_-`）更大的字母表。 因此，ID 大小从36个符号减少到21个符号。
**易用.**  Nano ID 已被移植到 [19种编程语言](https://github.com/ai/nanoid/blob/main/README.zh-CN.md#%E5%85%B6%E4%BB%96%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80)。
*/import { nanoid } from 'nanoid'
model.id = nanoid() //=> "V1StGXR8_Z5jdHi6B-myT"

生成小程序码

这里需要注意的是，我们在web端里通过调用生成小程码的接口，将最终的小程序码显示在网页里。scene是一个不可变的参数名，参数内容里放的是时间戳签名。

async function getWXACodeUnlimited(scene,page){const access_token = await getAccessToken();const res = await uniCloud.httpclient.request("https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token="+access_token,{method:"POST",headers:{"Content-Type":"application/json"},data:{scene:scene,page:page}});return res.data;
}

扫描小程序码获取签名

使用微信扫描小程序码后，会进入到小程序并打开指定的page(小程序内页面)，在该页面的onLoad事件中可以拿到scene参数。

onLoad(options) {var scene = options.scene;var loginToken;if(scene){loginToken = scene;}wx.login({success: (res) => {cloudApi.callFunction({name:"users",data:{action:"login",code:res.code,logintoken:loginToken},success: (res) => {}})}})
}

上述代码中实现的是，通过login接口获取到code，用于请求code2session接口换取小程序用户的openid，这一步完成，我们等于就在小程序里完成了用户登录。

然后怎么把信息同步给Web端呢？就是这个LoginToken，我这里把它写到与openid相同的用户表数据条目中，然后web端会通过loginToken轮询这个用户数据表，发现匹配数据后返回给Web端，完成Web端的登录

if(loginToken){await db.collection("users").where({openid:dbCmd.eq(openid)}).update({lastlogin:Date.now(),loginToken:dbCmd.set({value:loginToken,expiretime:Date.now()+60*3*1000000})})
}

现在我们已经完成了扫小程序码登录机制，用户登录网站时，也可以增加小程序的用户和日活跃用户数。

我叫大帅，一个热爱编程的老程序猿。

Web网站扫【小程序码】登录的技术实现相关推荐

PHP小程序码扫码登录网站,微信扫小程序码实现网页端登录
常见的微信扫码登录有两种这两种方式都需要提交企业资料认证和300元年费,有些想要学习或者自己的网站没有盈利的,其实不舍得花这个钱,特别是个人开发者,没有企业资料去做认证. 既然没法做企业认证,那我们 ...
Java后台实现网站微信扫码登录功能，获取用户openid，及微信用户信息（小程序码方案），关联微信小程序（个人主体小程序也可以）
目录前言操作流程 1.注册微信小程序 2.通过后台获取小程序码注意事项时序图理解方案实现步骤前言很多业务场景之下我们需要实现微信扫码登录检测登录状态的需求,或需要同步网站与小程序的用户信 ...
使用canvas绘制小程序码
场景:使用小程序文档的API可以获取带参数的二维码和小程序码,但是小程序码中的图片默认都是小程序的头像(红框中的图片).现在我们需要替换里面的图片,然后将小程序码保存成一张图片存入相册. 1.获取带参 ...
PHP小程序码扫码登录网站,WeAuth微信小程序实现PC网站扫码授权登录
目前微信扫码登录的实现有以下2种方式: 1.微信服务号扫码网页授权登录 2.微信开放平台Oauth2.0授权登录以上2种方式少不了微信认证,都是需要交300元认证后才可以获得开发能力.所以我就想到了 ...
python写微信小程序源码示例_python实现微信小程序用户登录、模板推送
python实现微信小程序用户登录.模板推送来源:中文源码网浏览: 次日期:2019年11月5日 [下载文档: python实现微信小程序用户登录.模板推送.txt ] (友情提示 ...
跨端扫码确认实现Web登录(扫二维码登录)
起初的想法是类似于QQ扫码登录,BILIBILI扫码登录一样,通过手机确认后,在web端重定向完成登录通过对BILIBILI扫码功能的解析,自己实现了一套类似扫码登录的功能以下为伪代码,仅供查阅 ...
飞鹅小票打印机嵌入生成指定小程序页面二维码的解决方案 | 扫普通链接二维码打开小程序示例 | 生成正方形小程序码
部分朋友不需要打印机的业务,则忽略有关打印机的部分即可. 其他有关微信小程序配置的介绍是通用的!通用的! 生成正方形小程序码,请看标题一. 扫普通链接生成的二维码打开小程序,请看标题二. 目 ...
WordPress网站管家小程序源码
WordPress网站管家小程序源码,基于uniapp开发的产品,WP管家是主打用户访问端,兼容了微信小程序与安卓APP(其他端未测试),用于用户的访问. 1.在wordpress根目录新建一个文件夹 ...
借助云开发10行代码生成小程序码，可以微信扫码快速进入指定小程序页
最近老有同学问我,如何生成小程序二维码,让用户扫码后能快速进入指定页面.经过一番研究,发现用云开发的云调用来实现特别方便,基本上10行代码就可以快速的生成指定页面的二维码.这样我们在做一些线下业务时就 ...
IM要做手机扫码登录？先看看微信的扫码登录功能技术原理
本文原文由作者Amazing10原创发布于公众号业余码农,收录时有改动,感谢原作者的技术分享. 1.引言某天中午,吃完午饭,摊在自己的躺椅上,想趁吃饱喝足的午后时间静静享受独自的静谧. 干点什么好呢 ...

Web网站扫【小程序码】登录的技术实现

前言

如何实现

核心技术点

生成时间戳签名

生成小程序码

Web网站扫【小程序码】登录的技术实现相关推荐

最新文章

热门文章