Web网站扫【小程序码】登录的技术实现!记得收藏,要用时别找不到!

简介: 我准备给彩虹屁老婆插件开发一个皮肤/模型下载网站,里面需要具备用户系统。但我又懒得去完整开发一套注册,用户激活机制。不过当时我的第一反应是可以利用微信公众号的扫码登录,但公众号的扫码登录接口必须得是服务号才可以使用。服务号的注册又必须使用营业执照走企业认证,总之比较麻烦。恰好当时我的小程序猿创聚合助手已经发布了,所以我就在思考,能否直接利用小程序码的接口来自己设计一套扫码登录流程呢?

如何实现


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


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


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


image.png


核心技术点


生成时间戳签名


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


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


image.png


/*
一个小巧、安全、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
        })
    })
}


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


轮询优化


  1. 点击登录时生成并显示小程序码,此时开启轮询,每5秒查询一次数据库。


  1. 查询到匹配的用户信息,结束轮询,完成登录。


  1. 在三分钟内如果查询不到匹配的用户信息,结束轮询。



相关文章
|
人工智能 小程序 前端开发
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
884 0
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
|
安全 大数据 数据挖掘
课时9:阿里云Web应用防火墙:全面保障网站的安全与可用性
阿里云Web应用防火墙(WAF)基于阿里巴巴十年攻防经验,提供全面的网站安全防护。它通过Web应用防护、CC攻击防护和业务风控,有效应对各类网络威胁,确保网站的安全与可用性。智能双引擎技术降低误报率,实时数据分析和虚拟补丁更新保障系统安全。WAF已成功护航多个重大活动,为企业提供高效、简便的安全解决方案。
554 0
WK
|
安全 Java 编译器
C++和Java哪个更适合开发web网站
在Web开发领域,C++和Java各具优势。C++以其高性能、低级控制和跨平台性著称,适用于需要高吞吐量和低延迟的场景,如实时交易系统和在线游戏服务器。Java则凭借其跨平台性、丰富的生态系统和强大的安全性,广泛应用于企业级Web开发,如企业管理系统和电子商务平台。选择时需根据项目需求和技术储备综合考虑。
WK
681 0
|
人工智能 搜索推荐 PHP
PHP在Web开发中的璀璨星辰:构建动态网站的幕后英雄###
【10月更文挑战第25天】 本文将带您穿越至PHP的宇宙,揭示其作为Web开发常青树的奥秘。通过生动实例与深入解析,展现PHP如何以简便、高效、灵活的姿态,赋能开发者打造动态交互式网站,同时不忘探讨其在新时代技术浪潮中面临的挑战与机遇,激发对技术创新与应用的无限思考。 ###
283 1
|
Web App开发 前端开发 JavaScript
Web开发者必收藏的10个实用网站,你还没收藏吗?
将这些网站收藏起来,定期访问,使它们成为您日常工作的一部分,助您在快速发展的 Web 开发领域保持领先。
877 2
Web开发者必收藏的10个实用网站,你还没收藏吗?
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
开发者 Java Spring
JSF 牵手社交登录,如魔法风暴席卷 Web 世界,开启震撼便捷登录之旅!
【8月更文挑战第31天】在互联网时代,便捷登录成为用户的核心需求。社交登录凭借其便捷性、安全性和社交化的特点,在各类Web应用中广泛应用。JavaServer Faces(JSF),作为一款流行的Java Web框架,能够轻松集成社交登录功能,显著提升用户体验。本文详细介绍社交登录的优势,并提供两种JSF集成社交登录的常见方法:一是利用Spring Social等第三方库简化开发;二是自行实现社交登录流程。开发者可根据项目需求选择适合的方案。
282 0
|
前端开发 安全 JavaScript
PHP与现代Web开发:探索PHP在构建动态网站中的角色和优势
【8月更文挑战第29天】 在数字时代的浪潮下,PHP以其独特的灵活性、易用性以及强大的社区支持,持续成为Web开发领域的重要力量。本文将深入探讨PHP如何适应现代Web开发的需求,通过具体示例揭示PHP的实际应用,并分析其在面对新兴技术挑战时的应对策略。我们将一探究竟,PHP如何在众多编程语言中脱颖而出,成为许多开发者和企业的首选。
|
前端开发
炫酷登录页大变身:5分钟带你入门Web动效设计
炫酷登录页大变身:5分钟带你入门Web动效设计
|
前端开发 搜索推荐 JavaScript
Web前端网站(四)- 音乐播放器
【8月更文挑战第9天】页面整体色调背景采用柔和渐变的方式呈现,与主页面的“毒药水式”色彩搭配形成了强烈的对比;周边花瓣缓缓飘落到水面之上形成涟漪。整体给人一种温馨、浪漫的感觉,还可以通过中间的3个按钮来控制音乐的切换和播放效果。每一行代码都有详细注释~~~大家可以尽情创作
388 2
Web前端网站(四)- 音乐播放器