基于 Next.js 搞定个人公众号登陆流程_nextjs实现微信登陆-优快云博客

本文链接：https://blog.youkuaiyun.com/yaozaiyuanfang/article/details/146487379

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

登录选型

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

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

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

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

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

功能概括

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

功能特点

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

工作原理

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

快速开始

使用Docker Compose

克隆仓库到本地

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

创建环境变量文件

cp .env.example .env

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

启动服务

docker-compose up -d

访问服务

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

手动部署

安装依赖

npm install

配置环境变量

cp .env.example .env.local

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

启动开发服务器

npm run dev

构建生产版本

npm run build
npm run start

微信公众号配置

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

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

安全考虑

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

项目结构

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配置