基于 Next.js 搞定个人公众号登陆流程

我是一名后端开发，最近借着AI Cursor的普及，发现快速的开发一个网页服务已经不再那么困难。所以秉承着"干中学"的态度，也想要上线一款自己的网站，跑通整个流程。但是具体实施过程中，发现实现网站模块比较简单，但是涉及网站登录 和业务支付 这部分内容，比较费事儿。接下来，我将具体说说针对网站登录模块流程，讲讲我的一些实现过程。

登录选型

常见的登录方式有邮箱、手机号 、第三方登录 等等，如果想要简单邮箱是比较好的选择，AI基本能很容易实现；如果想要串联大账号体系，手机号 登录比较好，具有唯一属性，很多厂商也这么做；第三方登录常见的有微信、QQ、抖音、淘宝等登录。

笔者有写公众号的习惯，但是关注太少，想要做引流，所以我才用的是个人微信公众号登录方式。

微信公众号登录分为服务号 和订阅号的登录，服务号的登录如果想要比较简单，可以直接使用Authing公司的登录服务，笔者最起初也想直接这么做，但是发现只支持服务号，故放弃。

订阅号的登录也可以分为认证订阅号 和未认证订阅号 ，如果是已认证的订阅号，支持调用官方带参数的二维码 接口，可以直接进行扫码关注登录，流程比较丝滑。对于未认证 的个人订阅号，也就是笔者这种情况，可以参考以下方式，通过服务器配置 方式，对接接口权限->对话服务->接收消息->接收普通消息 和接口权限->对话服务->发送消息->自动回复实现整个登录流程。

微信登录功能体验地址：wx.hsjishu.com

功能概括

以下是一个基于 Next.js 开发的微信公众号登录验证系统，通过公众号菜单触发生成验证码，用户在网页端输入验证码完成登录认证。

功能特点

使用个人微信公众号作为身份验证
通过向公众号发送内容为验证码的消息，触发生成6位数验证码
Redis存储验证码和用户信息
JWT认证保持登录状态
响应式UI设计，自适应支持移动端和桌面端

工作原理

用户在网页端访问登录页面，页面引导用户关注公众号
用户关注公众号后，需要向公众号发送一条内容为【验证码】的消息
服务端接收到文本消息事件以后，生成6位数验证码，并通过微信消息回复给用户
用户在网页端输入收到的验证码
系统验证码正确后，生成JWT令牌并将用户重定向到Dashboard内容页面，完成整个登录流程

快速开始

使用Docker Compose

克隆仓库到本地

bash 复制代码

git clone https://github.com/liyaodev/wxlogin.git
cd wxlogin

创建环境变量文件

bash 复制代码

cp .env.example .env

修改.env文件，填入您的微信公众号配置和JWT密钥

启动服务

bash 复制代码

docker-compose up -d

访问服务

服务将在 http://localhost:3000 运行

手动部署

安装依赖

bash 复制代码

npm install

配置环境变量

bash 复制代码

cp .env.example .env.local

修改.env.local文件，填入您的微信公众号配置和Redis连接信息

启动开发服务器

bash 复制代码

npm run dev

构建生产版本

bash 复制代码

npm run build
npm run start

微信公众号配置

需要在公众号管理后台配置服务器

URL: https://您的域名/api/wechat/event
Token: 与您在环境变量中设置的WECHAT_TOKEN相同
EncodingAESKey: 可以使用微信后台自动生成

安全考虑

验证码有效期设为5分钟，减少暴力破解风险
JWT令牌过期时间设为1天，您可以根据需要调整
Redis连接应当启用密码保护
微信公众号Token和Secret应妥善保管

项目结构

csharp 复制代码

wxlogin/
├── src/
│   ├── components/
│   │   └── VerificationCodeInput.tsx  # 验证码输入组件
│   ├── lib/
│   │   ├── auth.ts                    # JWT认证相关函数
│   │   ├── redis.ts                   # Redis连接和操作
│   │   └── wechat.ts                  # 微信公众号API封装
│   ├── pages/
│   │   ├── api/
│   │   │   ├── auth/
│   │   │   │   └── verify.ts          # 验证码验证API
│   │   │   └── wechat/
│   │   │       └── event.ts           # 微信事件处理API
│   │   ├── _app.tsx                   # Next.js应用配置
│   │   ├── dashboard.tsx              # 登录后的仪表盘页面
│   │   ├── index.tsx                  # 首页（重定向到登录页）
│   │   └── login.tsx                  # 登录页面
│   └── styles/
│       └── globals.css                # 全局样式（Tailwind CSS）
├── public/images
│   └── qrcode.png                     # 公众号二维码图片
├── .env.example                       # 环境变量示例
├── docker-compose.yml                 # Docker Compose配置
├── Dockerfile                         # Docker构建文件
├── next.config.js                     # Next.js配置
├── package.json                       # 项目依赖
├── tailwind.config.js                 # Tailwind CSS配置
└── tsconfig.json                      # TypeScript配置

技术栈

Next.js: React框架，用于构建前后端一体化应用
Redis: 存储验证码和用户信息
JWT: 用户认证与会话管理
Tailwind CSS: UI样式库
TypeScript: 类型安全的JavaScript超集
Docker: 容器化部署

以上就是本期的全部内容，主要实现了个人微信公众号的验证码登录流程。笔者荒生，一名资深的技术开发，谢谢大家的观看，点赞、评论、加关注你的支持就是笔者的动力，有问题也可以私信笔者或留言询问。