📄 小程序登录接入使用

本文档是针对自定义小程序接入到 PIGX 中，如果你是直接使用 pigx-app，那么不需要考虑这些对接工作，请参考 pigx-app 快速开始 (opens new window)

• 本章节示例代码仓库 (opens new window)

概述

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

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

环境要求

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

实现流程

登录流程说明

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

绑定流程说明

1. 用户输入手机号获取验证码
2. 使用验证码完成手机号登录，获取临时 token
3. 重新获取小程序 code
4. 调用绑定接口，关联用户信息与 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. 开发者工具配置

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

核心代码实现

一键登录实现

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();
                                }
                            });
                        }
                    });
                }
            });
        }
    });
}

安全性说明

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

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

注意事项

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

常见问题

1. 绑定失败？

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

2. 登录返回 401？

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

3. 请求失败？

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

参考资源

• 微信小程序登录文档 (opens new window)