利用微信小程序实现零成本网页扫码登录（附完整代码）

1. 为什么选择微信小程序实现扫码登录现在很多网站和应用都提供了扫码登录功能这种登录方式既方便又安全。传统的微信扫码登录通常需要企业资质和服务号认证这对于个人开发者来说门槛太高。而微信小程序的wx.login接口可以轻松获取用户的openid这为我们提供了一种零成本的替代方案。我去年开发一个个人项目时就遇到了这个问题。当时想给网站加个微信登录功能但发现个人开发者根本无法申请服务号。后来偶然发现小程序可以绕过这些限制经过一番折腾终于实现了这个方案。实测下来效果很不错用户扫码后3秒内就能完成登录体验非常流畅。相比传统方案小程序扫码登录有三大优势零成本不需要企业资质个人小程序就能实现开发简单主要依赖wx.login接口代码量少体验好用户扫码后自动跳转无需手动确认2. 技术实现原理详解2.1 整体流程设计这个方案的核心是利用小程序码作为媒介在网页和小程序之间建立通信桥梁。具体流程是这样的网页端生成一个带唯一scene参数的小程序码用户扫码后打开小程序小程序获取用户openid小程序将openid和scene发送到服务端关联网页端轮询检查登录状态发现关联后完成登录我最初实现时犯过一个错误没有处理好scene的唯一性。有次测试时发现两个用户扫码后登录了同一个账号排查发现是scene重复导致的。后来改用UUID生成scene问题就解决了。2.2 关键接口说明wx.login接口是小程序登录的核心。调用这个接口可以获取到code然后用code去换取openid。这里有个坑要注意code有效期只有5分钟而且每次调用wx.login都会刷新code。// 小程序端代码示例 wx.login({ success(res) { if (res.code) { // 发送code到服务端换取openid wx.request({ url: https://yourdomain.com/api/login, data: { code: res.code } }) } } })生成小程序码使用的是wxacode.get接口。这个接口有两个版本get和getUnlimited。前者生成的小程序码数量有限制后者没有限制但需要小程序已发布。3. 完整代码实现3.1 服务端准备首先需要准备数据库表结构。我建议使用以下SQL创建表CREATE TABLE scanlogin_loginAuth ( id int(10) PRIMARY KEY AUTO_INCREMENT, scene varchar(32) NOT NULL, openid varchar(32) DEFAULT NULL, createTime varchar(32) DEFAULT NULL, authTime varchar(32) DEFAULT NULL, status int(1) NOT NULL DEFAULT 1, expire int(1) NOT NULL DEFAULT 1, token varchar(32) DEFAULT NULL ) ENGINEInnoDB DEFAULT CHARSETutf8;服务端主要需要三个接口生成小程序码接口检查登录状态接口小程序回调接口这里给出PHP的核心代码片段// 生成小程序码 function createQrcode($scene) { $access_token getAccessToken(); // 获取小程序access_token $url https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token.$access_token; $data [ scene $scene, page pages/index/index ]; // 发送请求并保存小程序码图片 // ... } // 检查登录状态 function checkStatus($scene) { // 查询数据库 $result db_query(SELECT * FROM scanlogin_loginAuth WHERE scene$scene); if($result[openid]) { return [code200, openid$result[openid]]; } return [code201]; // 未登录 }3.2 小程序端实现小程序端主要做三件事获取用户openid获取扫码时带的scene参数将openid和scene发送到服务端// 小程序onLoad函数 onLoad: function(options) { const scene decodeURIComponent(options.scene) wx.login({ success: res { wx.request({ url: https://yourdomain.com/api/auth, data: { code: res.code, scene: scene }, success: () { // 提示用户登录成功 } }) } }) }4. 部署与注意事项4.1 域名配置要点小程序要求所有请求的域名都必须备案并开启HTTPS。在微信公众平台的小程序后台需要配置以下内容服务器域名添加你的服务端域名业务域名添加网页端使用的域名我遇到过因为域名配置错误导致请求失败的情况。微信的报错信息不太明确排查了半天才发现是域名没配置全。建议把所有可能用到的子域名都提前配置好。4.2 常见问题处理问题1扫码后提示无法打开小程序检查小程序是否已发布检查生成小程序码时env_version参数是否正确开发版用develop线上版用release问题2登录状态不更新检查网页端轮询频率建议2-3秒一次检查服务端数据库更新是否成功问题3获取openid失败检查code是否过期5分钟有效期检查小程序appid和secret是否正确5. 优化与扩展建议基础功能实现后可以考虑以下优化点增加本地缓存将token缓存在localStorage避免重复登录添加用户信息通过wx.getUserProfile获取用户昵称头像扫码超时处理设置15分钟有效期超时后重新生成二维码安全加固对scene参数进行加密防止伪造我在实际项目中还加了个功能当用户扫码后网页上会显示XXX正在登录的提示。这个小小的改进让用户体验提升了不少。实现方法是在小程序获取用户信息后将昵称也传到服务端。6. 完整代码获取与使用为了方便大家使用我已经把完整代码打包好了。包含以下内容服务端PHP代码含数据库操作小程序端完整项目网页端示例代码详细的配置说明文档使用时只需要修改几个配置项数据库连接信息小程序appid和secret域名配置部署步骤上传服务端代码到服务器导入SQL文件创建表修改小程序项目配置发布小程序在网页中引入扫码登录功能这套代码我已经在三个项目中实际使用过稳定性很不错。遇到问题可以查看代码中的注释或者参考我写的常见问题解答。