uniapp微信小程序端登录授权完整版示例
前言：
在开发微信小程序时，我们经常会遇到一个问题：如何让用户登录并授权我们的应用？这篇博客将详细描述 uniapp 微信小程序端登录授权的完整版示例，包括前端和后端。
前端准备
首先，我们需要在微信小程序端准备好必要的参数。这些参数主要用于存储用户唯一标识和一些用户信息。
1. 在uni-app中创建一个新的项目打开uni-app IDE，新建一个项目，选择小程序模板。
2. 在app.json文件中添加微信登录配置在`app.json`文件中添加以下配置：
```json{
"pages": [
// ...
],
"miniProgramConfig": {
"appid": "", // 小程序appid "secret": "" // 小程序secret }
}
```
3. 在 pages 目录下创建一个新的页面在`pages`目录下创建一个新的页面，例如 `login.vue`。
前端登录逻辑
在 `login.vue` 页面中，我们需要实现微信登录的逻辑。我们将使用微信小程序提供的 `wx.login()` 和 `wx.getUserInfo()` 接口来完成登录和授权。
1. 在 login.vue 中引入微信登录模块```javascriptimport wx from 'wx';
```
2. 实现微信登录逻辑```javascriptonLoad() {
// 微信登录 wx.login({
success: (res) => {
if (res.code) {
console.log('微信登录成功');
this.getOpenid(res.code);
} else {
console.error('微信登录失败');
}
},
fail: (err) => {
console.error('微信登录失败', err);
}
});
}
getOpenid(code) {
// 获取openid wx.request({
url: ' data: {
grant_type: 'authorization_code',
js_code: code,
appid: this.$store.state.appid,
secret: this.$store.state.secret },
method: 'GET',
success: (res) => {
console.log('获取openid成功', res);
// 存储openid uni.setStorageSync('openid', res.data.openid);
},
fail: (err) => {
console.error('获取openid失败', err);
}
});
}
```
3. 实现微信授权逻辑```javascriptonLoad() {
// 微信登录 wx.login({
success: (res) => {
if (res.code) {
console.log('微信登录成功');
this.getOpenid(res.code);
} else {
console.error('微信登录失败');
}
},
fail: (err) => {
console.error('微信登录失败', err);
}
});
}
getOpenid(code) {
// 获取openid wx.request({
url: ' data: {
grant_type: 'authorization_code',
js_code: code,
appid: this.$store.state.appid,
secret: this.$store.state.secret },
method: 'GET',
success: (res) => {
console.log('获取openid成功', res);
// 存储openid uni.setStorageSync('openid', res.data.openid);
},
fail: (err) => {
console.error('获取openid失败', err);
}
});
}
onShow() {
// 微信授权 wx.getUserInfo({
success: (res) => {
console.log('微信授权成功');
this.getAuth(res);
},
fail: (err) => {
console.error('微信授权失败', err);
}
});
}
getAuth(userInfo) {
// 获取用户信息 wx.request({
url: ' data: {
openid: uni.getStorageSync('openid'),
lang: 'zh_CN'
},
method: 'GET',
success: (res) => {
console.log('获取用户信息成功', res);
// 存储用户信息 uni.setStorageSync('userInfo', res.data);
},
fail: (err) => {
console.error('获取用户信息失败', err);
}
});
}
```
后端准备
在后端，我们需要实现一个接口来处理微信登录和授权的逻辑。
1. 在 Express.js 中创建一个新的路由```javascriptconst express = require('express');
const router = express.Router();
```
2. 实现微信登录逻辑```javascriptrouter.post('/login', (req, res) => {
// 微信登录 const code = req.body.code;
const appid = req.body.appid;
const secret = req.body.secret;
wx.request({
url: ' data: {
grant_type: 'authorization_code',
js_code: code,
appid: appid,
secret: secret },
method: 'GET',
success: (res) => {
console.log('获取openid成功', res);
// 存储openid req.session.openid = res.data.openid;
res.json({ status:200, message: '微信登录成功' });
},
fail: (err) => {
console.error('获取openid失败', err);
res.json({ status:500, message: '微信登录失败' });
}
});
});
```
3. 实现微信授权逻辑```javascriptrouter.post('/auth', (req, res) => {
// 微信授权 const openid = req.session.openid;
wx.request({
url: ' data: {
openid: openid,
lang: 'zh_CN'
},
method: 'GET',
success: (res) => {
console.log('获取用户信息成功', res);
// 存储用户信息 req.session.userInfo = res.data;
res.json({ status:200, message: '微信授权成功' });
},
fail: (err) => {
console.error('获取用户信息失败', err);
res.json({ status:500, message: '微信授权失败' });
}
});
});
```
完整版示例
以下是完整版示例：
```javascript// 前端login.vue
// 后端express.jsconst express = require('express');
const router = express.Router();
router.post('/login', (req, res) => {
// 微信登录
