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. 在三分钟内如果查询不到匹配的用户信息,结束轮询。



相关文章
|
17天前
|
SQL 缓存 搜索推荐
后端技术在现代Web开发中的应用与挑战
本文将深入探讨后端技术在现代Web开发中的重要性,涵盖从基础架构到性能优化的多个方面。通过分析当前主流后端技术的优缺点,并提供一些实用的解决方案和建议,帮助开发者更好地应对日常开发中的挑战。
33 1
|
8天前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
8天前
|
前端开发 JavaScript 安全
深入理解Python Web开发中的前后端分离与WebSocket实时通信技术
在现代Web开发中,前后端分离已成为主流架构,通过解耦前端(用户界面)与后端(服务逻辑),提升了开发效率和团队协作。前端使用Vue.js、React等框架与后端通过HTTP/HTTPS通信,而WebSocket则实现了低延迟的全双工实时通信。本文结合Python框架如Flask和Django,探讨了前后端分离与WebSocket的最佳实践,包括明确接口规范、安全性考虑、性能优化及错误处理等方面,助力构建高效、实时且安全的Web应用。
23 2
|
11天前
|
前端开发 API Python
WebSocket技术详解:如何在Python Web应用中实现无缝实时通信
在Web开发的广阔领域中,实时通信已成为许多应用的核心需求。传统的HTTP请求-响应模型在实时性方面存在明显不足,而WebSocket作为一种在单个长连接上进行全双工通信的协议,为Web应用的实时通信提供了强有力的支持。本文将深入探讨WebSocket技术,并通过一个Python Web应用的案例分析,展示如何在Python中利用WebSocket实现无缝实时通信。
17 2
|
13天前
|
SQL 缓存 数据库
构建高效Web应用:掌握Python中的ORM映射技术
在Web开发中,数据库操作至关重要,但直接编写SQL语句会增加代码复杂度并降低效率。对象关系映射(ORM)技术通过将对象模型映射为数据库表,使开发者能以面向对象的方式处理数据,提升开发效率和代码可维护性。本文以Python和SQLAlchemy为例,介绍ORM的基本概念、安装方法及使用技巧,并展示其在提升Web应用性能方面的优势。通过ORM,开发者可以简化数据库操作,专注于业务逻辑实现,提高开发效率和代码质量。
37 1
|
22天前
|
安全 JavaScript Java
后端技术在现代Web开发中的实践与挑战
本文旨在探讨后端技术在现代Web开发中的关键作用,分析其在数据处理、业务逻辑实现和系统安全等方面的重要性。通过阐述常见的后端技术和框架,如Node.js、Django和Spring Boot,展示它们在实际项目中的应用。同时,文章将讨论后端开发所面临的主要挑战,包括性能优化、扩展性和维护性问题,以及如何应对这些挑战。最终,通过对实际案例的分析,总结出一套行之有效的后端开发最佳实践,为开发者提供参考。
48 5
|
22天前
|
人工智能 关系型数据库 数据安全/隐私保护
后端技术在现代Web开发中的应用与挑战
本文将深入探讨后端技术在现代Web开发中的重要性,通过分析其在数据处理、业务逻辑实现和安全性保障方面的应用,揭示后端技术的核心价值。同时,本文还将讨论当前后端开发面临的主要挑战,如高并发处理、数据安全、微服务架构的复杂性等,并给出相应的解决方案。无论是后端开发者还是对后端技术感兴趣的读者,都可以通过这篇文章获得启发和指导。
|
1月前
|
前端开发 安全 Java
技术进阶:使用Spring MVC构建适应未来的响应式Web应用
【9月更文挑战第2天】随着移动设备的普及,响应式设计至关重要。Spring MVC作为强大的Java Web框架,助力开发者创建适应多屏的应用。本文推荐使用Thymeleaf整合视图,通过简洁的HTML代码提高前端灵活性;采用`@ResponseBody`与`Callable`实现异步处理,优化应用响应速度;运用`@ControllerAdvice`统一异常管理,保持代码整洁;借助Jackson简化JSON处理;利用Spring Security增强安全性;并强调测试的重要性。遵循这些实践,将大幅提升开发效率和应用质量。
54 7
|
21天前
|
数据处理 Python
Django视图:构建动态Web页面的核心技术
Django视图:构建动态Web页面的核心技术
|
29天前
|
关系型数据库 Java MySQL
"解锁Java Web传奇之旅:从JDK1.8到Tomcat,再到MariaDB,一场跨越数据库的冒险安装盛宴,挑战你的技术极限!"
【9月更文挑战第6天】在Linux环境下安装JDK 1.8、Tomcat和MariaDB是搭建Java Web应用的关键步骤。本文详细介绍了使用apt-get安装OpenJDK 1.8、下载并配置Tomcat,以及安装和安全设置MariaDB(MySQL的开源分支)的方法。通过这些步骤,您可以快速构建一个稳定、高效的开发和部署环境,并验证各组件是否正确安装和运行。这为您的Java Web应用提供了一个坚实的基础。
37 0
下一篇
无影云桌面