一、微信小程序授权登录概述
微信小程序授权登录是指通过微信开放平台提供的接口，获取用户的授权信息，实现登录功能。主要步骤包括：
获取用户同意，获取授权登录。
使用获取到的临时登录凭证 code，向微信服务器请求用户的 openid 和 session_key。
使用 openid 和 session_key 进行后续业务逻辑处理。
二、实现步骤
1. 获取用户同意
在微信小程序中，通过 wx.getUserProfile 接口可以获取用户的授权信息。在 app.json 文件中需要配置 scope.userInfo 权限。
app.json:
{ "pages": [ "pages/index/index" ], "permission": { "scope.userInfo": { "desc": "用于展示用户信息" } }, "window": { "navigationBarTitleText": "微信登录" } }
2. 调用 wx.login 获取临时登录凭证 code
在小程序中通过 wx.login 接口获取临时登录凭证 code，并将 code 传给服务器，服务器通过这个 code 获取 openid 和 session_key。
pages/index/index.js:
// pages/index/index.js Page({ data: { userInfo: null, hasUserInfo: false, canIUseGetUserProfile: false }, onLoad: function() { if (wx.getUserProfile) { this.setData({ canIUseGetUserProfile: true }); } }, getUserProfile(e) { wx.getUserProfile({ desc: '用于展示用户信息', // 声明获取用户个人信息后的用途 success: (res) => { this.setData({ userInfo: res.userInfo, hasUserInfo: true }); this.login(); // 调用登录函数 } }) }, login() { wx.login({ success: res => { if (res.code) { // 发送 res.code 到后台换取 openid 和 session_key wx.request({ url: 'https://yourserver.com/onLogin', // 服务器端登录接口 method: 'POST', data: { code: res.code }, success: res => { console.log('登录成功', res.data); // 存储 openid 和 session_key wx.setStorageSync('openid', res.data.openid); wx.setStorageSync('session_key', res.data.session_key); }, fail: err => { console.error('登录失败', err); } }) } else { console.log('登录失败！' + res.errMsg) } } }); } });
3. 服务器端获取 openid 和 session_key
服务器端接收到 code 后，通过微信提供的 API 换取用户的 openid 和 session_key。
服务器端代码（Node.js 示例）：
const express = require('express'); const axios = require('axios'); const app = express(); app.use(express.json()); app.post('/onLogin', async (req, res) => { const { code } = req.body; const appId = 'your_app_id'; const appSecret = 'your_app_secret'; const url = `https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecret}&js_code=${code}&grant_type=authorization_code`; try { const response = await axios.get(url); const { openid, session_key } = response.data; res.json({ openid, session_key }); } catch (error) { console.error('获取 openid 和 session_key 失败', error); res.status(500).json({ error: '服务器错误' }); } }); app.listen(3000, () => { console.log('Server is running on port 3000'); });
4. 业务逻辑处理
在获取到 openid 和 session_key 后，可以使用这些信息进行用户登录状态的维护和业务逻辑处理。
三、代码注释
小程序端代码注释
// pages/index/index.js Page({ data: { userInfo: null, // 存储用户信息 hasUserInfo: false, // 判断是否获取到用户信息 canIUseGetUserProfile: false // 判断是否可以使用 getUserProfile 接口 }, onLoad: function() { if (wx.getUserProfile) { this.setData({ canIUseGetUserProfile: true // 如果可以使用 getUserProfile，则更新状态 }); } }, getUserProfile(e) { wx.getUserProfile({ desc: '用于展示用户信息', // 获取用户个人信息的用途声明 success: (res) => { this.setData({ userInfo: res.userInfo, // 保存用户信息到 data hasUserInfo: true // 更新状态为已获取用户信息 }); this.login(); // 调用登录函数 } }) }, login() { wx.login({ success: res => { if (res.code) { // 发送 res.code 到后台换取 openid 和 session_key wx.request({ url: 'https://yourserver.com/onLogin', // 后台登录接口地址 method: 'POST', data: { code: res.code // 临时登录凭证 code }, success: res => { console.log('登录成功', res.data); // 打印登录成功信息 // 存储 openid 和 session_key 到本地存储 wx.setStorageSync('openid', res.data.openid); wx.setStorageSync('session_key', res.data.session_key); }, fail: err => { console.error('登录失败', err); // 打印登录失败信息 } }) } else { console.log('登录失败！' + res.errMsg) // 打印登录失败信息 } } }); } });
服务器端代码注释
const express = require('express'); // 引入 Express 框架 const axios = require('axios'); // 引入 Axios 库，用于发送 HTTP 请求 const app = express(); // 创建 Express 应用 app.use(express.json()); // 使用中间件解析 JSON 请求体 app.post('/onLogin', async (req, res) => { const { code } = req.body; // 获取请求体中的 code const appId = 'your_app_id'; // 微信小程序的 AppID const appSecret = 'your_app_secret'; // 微信小程序的 AppSecret const url = `https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecret}&js_code=${code}&grant_type=authorization_code`; // 请求微信接口的 URL try { const response = await axios.get(url); // 发送请求获取 openid 和 session_key const { openid, session_key } = response.data; // 从响应中提取 openid 和 session_key res.json({ openid, session_key }); // 返回 openid 和 session_key 给客户端 } catch (error) { console.error('获取 openid 和 session_key 失败', error); // 打印错误信息 res.status(500).json({ error: '服务器错误' }); // 返回服务器错误响应 } }); app.listen(3000, () => { console.log('Server is running on port 3000'); // 启动服务器，监听 3000 端口 });
