小程序登录接入使用

适用说明

本文档是针对自定义小程序接入到 PIGX 中，如果你是直接使用 pigx-app，那么不需要考虑这些对接工作，请参考 pigx-app 快速开始本章节示例代码仓库

概述

本指南详细介绍如何在基于 PIGX 框架的项目中实现微信小程序的一键登录功能。通过本指南的配置，您可以实现：

未绑定用户的自动重定向至绑定页面
用户手机号与系统用户表（sys_user）的关联绑定
绑定完成后的一键快捷登录

环境要求

组件	版本要求
PIGX	5.6+
架构模式	微服务

实现流程

登录流程说明

小程序通过 wx.login 获取 code
使用 code 调用 PIGX 后端获取 token
根据返回结果：
- 返回 200 且包含 access_token：保存 token 并继续业务流程
- 返回 401：跳转至绑定流程

绑定流程说明

用户输入手机号获取验证码
使用验证码完成手机号登录，获取临时 token
重新获取小程序 code
调用绑定接口，关联用户信息与 openid

快速开始

1. 数据库配置

在数据库中添加小程序配置信息：

INSERT INTO `pigxx`.`sys_social_details` (`id`, `type`, `remark`, `app_id`, `app_secret`, `redirect_url`, `ext`, `create_by`, `update_by`, `create_time`, `update_time`, `del_flag`, `tenant_id`)
VALUES (1600713275467575297, 'MINI', '小程序', '您的小程序appId', '您的小程序appSecret', NULL, NULL, 'admin', ' ', '2022-12-08 12:45:59', '2022-12-08 04:45:59', '0', 1);

参数替换

请将 app_id 和 app_secret 替换为您实际的小程序配置信息

2. 项目部署

克隆示例项目并安装依赖：

# 克隆示例项目
git clone https://github.com/pig-mesh/pigx-mini-login.git

# 安装依赖
cd pigx-mini-login
npm install

3. 开发者工具配置

配置步骤：

打开微信开发者工具
导入项目
配置小程序 AppID
开启开发环境不校验请求域名

核心代码实现

一键登录实现

function login() {
    wx.login({
        success(res) {
            const params = {
                mobile: 'MINI@' + res.code,
                code: res.code
            }
            wx.request({
                url: '${BASE_URL}/auth/oauth2/token?grant_type=mobile',
                method: 'post',
                data: params,
                header: {
                    'Authorization': 'Basic cGlnOnBpZw==',
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                success(res) {
                    if (res.statusCode === 401) {
                        wx.navigateTo({
                            url: '../bind/bind'
                        });
                    } else {
                        // 登录成功处理
                        wx.setStorageSync('token', res.data.access_token);
                    }
                }
            });
        }
    });
}

手机号绑定实现

function bind(mobile, code) {
    // 1. 使用验证码登录获取token
    const params = {
        mobile: 'SMS@' + mobile,
        code: code,
        grant_type: 'mobile'
    }

    wx.request({
        url: '${BASE_URL}/auth/oauth2/token',
        method: 'post',
        data: params,
        header: {
            'Authorization': 'Basic cGlnOnBpZw==',
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        success(res) {
            const token = res.data.access_token;

            // 2. 获取新的小程序code并完成绑定
            wx.login({
                success(loginRes) {
                    wx.request({
                        url: '${BASE_URL}/admin/social/bind?state=MINI&code=' + loginRes.code,
                        method: 'post',
                        header: {
                            'Authorization': 'Bearer ' + token
                        },
                        success() {
                            wx.showToast({
                                title: '绑定成功',
                                success() {
                                    wx.navigateBack();
                                }
                            });
                        }
                    });
                }
            });
        }
    });
}

安全性说明

本方案采用了以下安全措施：

使用验证码验证手机号所有权
避免直接暴露绑定接口
使用临时 token 进行绑定操作
遵循微信官方登录流程规范

安全建议

生产环境建议启用更严格的安全策略，如设置 token 过期时间、启用请求签名验证等

注意事项

生产环境下需要配置真实的短信发送服务
请务必替换示例中的 app_id 和 app_secret
确保 sys_user 表中已存在待绑定的手机号
生产环境需要配置安全域名

常见问题

1. 绑定失败？

检查手机号是否已在系统中注册
验证码是否正确
网络请求是否正常

2. 登录返回 401？

检查用户是否已完成绑定
验证 app_id 和 app_secret 配置是否正确

3. 请求失败？

确认后端服务是否正常运行
检查网络请求域名是否已配置
验证请求头中的 Authorization 是否正确

参考资源

微信小程序登录文档

本页目录

#小程序登录接入使用

#概述

#环境要求

#实现流程

#登录流程说明

#绑定流程说明

#快速开始

#1. 数据库配置

#2. 项目部署

#3. 开发者工具配置

#核心代码实现

#一键登录实现

#手机号绑定实现

#安全性说明

#注意事项

#常见问题

#1. 绑定失败？

#2. 登录返回 401？

#3. 请求失败？

#参考资源