uniapp unicloud之个人微信小程序云开发，微信授权登录，token验证

unicloud微信小程序云开发

最近自己因为每天吃什么烦恼，动手做了一个随机吃什么的微信小程序。
小程序使用uniapp开发 配合unicloud一个人独立完成前后端开发。

• 开发工具

  微信开发者工具
  hbuilder X

1.创建项目

使用hbuilder创建一个云开发项目

勾选启用uniCloud，这里我选择的是阿里云。
创建完成后打开项目目录，找到uniCloud右键关联云服务空间，根据提示创建并绑定。
参考https://uniapp.dcloud.io/uniCloud/concepts/space

2.配置

创建完成后在项目目录的manifest.json，配置小程序后台获取的微信小程序appID。

3.UI组件引入

我这里使用了 uview UI组件，根据教程安装即可（不使用可不引入）

4.公共请求方法

为了方便后续请求云函数，新建了一个common目录，封装了一个cloudApi公共方法。

let token = uni.getStorageSync('token');

function call(option) {
	return new Promise((resolve, reject) => {
		if (!option.data) option.data = {};
		if (token) option.data.token = token;
		uni.showLoading({
			mask:true
		});
		uniCloud.callFunction({
			name: option.name,
			data: option.data,
			success: (res) => {
				uni.hideLoading();
				if (res.result.code == 200) {
					if (res.result.data.token) {
						token = res.result.data.token;
						uni.setStorageSync('token', res.result.data.token);
					}
					if (option.success) option.success(res.result.data);
					resolve(res.result.data);
				} else if(res.result.code == 201) {
					uni.showToast({
						icon: 'none',
						title: res.result.msg
					})
					if (option.fail) option.fail(res);
				} else if(res.result.code == 203) {
					// uni.clearStorageSync();
					uni.showToast({
						icon: 'none',
						title: token?'请重新登录':'请登录'
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},1000)
				}
			},
			fail: (err) => {
				uni.hideLoading();
				if (option.fail) option.fail(err);
				reject();
			},
			complete: () => {
				uni.hideLoading();
				if (option.complete) option.complete();
			}
		});
	});
}
module.exports = {
	call: call
}

在main.js中引入

5.微信授权登录

获取code传给后台

wxLogin() {
	let _this = this;
	let code;
	uni.login({
		provider: 'weixin',
		success: res => {
			code = res.code;//获取登录需要的code
		}
	});
	uni.getUserProfile({
		desc: '用户信息，拿来吧你！',
		lang: 'zh_CN',
		success: res => {
			uni.showLoading();
			let data = res.userInfo;//授权拿到用户信息
			data.code = code;
			// 调用登录云函数
			_this.$cloudApi.call({
				name: 'login',
				data,
				success: res => {
					uni.setStorageSync('userInfo', data);//拿到后台返回的用户信息
					uni.reLaunch({
						url:'/pages/index/index'
					})
				}
			});
		}
	});
}

云函数接收code和appId，appSecret一起使用，换取openid。
添加用户到user表。

'use strict';
const {
	appId,
	appSecret,
	getToken,
	verifyToken
} = require("wx-common");
const db = uniCloud.database();

exports.main = async (event, context) => {
	//获取前端参数
	const {
		code,
		nickName,
		gender,
		city,
		province,
		country,
		avatarUrl
	} = event;
	//获取openid
	const res = await uniCloud.httpclient.request(
		`https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecret}&js_code=${code}&grant_type=authorization_code`, {
			dataType: "json"
		}
	)
	let openid = res.data.openid;

	//获取user表
	const collection = db.collection('user');

	// 生成token
	let token = getToken(openid)
	// 新增并返回用户信息
	let userData = {
		nickName,
		gender,
		city,
		province,
		country,
		avatarUrl,
		openid
	}

	// 往user表添加用户信息
	const resData = await db.collection("user").add(userData)
	//将用户信息返回前端
	letdata = {
		nickName,
		gender,
		city,
		province,
		country,
		avatarUrl
	}
	return {
		code: 200,
		msg: '登录成功',
		data: {
			userInfo: data,
			token: token
		}
	}
};

这里token的生成是使用的jsonwebtoken，我是在云函数common目录下放了一个wx-common目录。

在wx-common目录下使用

npm install jsonwebtoken

安装jsonwebtokne后直接引入使用即可，，并写了一个公共js生成解析token。

const jwt = require("jsonwebtoken"); //webjsontoken
//生成token
function getToken(openid) {
	// sign(加密数据，加密辅助，过期时间(单位/s))
	return jwt.sign({
		openid
	}, appSecret, {
		expiresIn: 60 * 60 * 24 * 30
	});
}
//解密token
function verifyToken(token) {
	return jwt.verify(token, appSecret, (err, decode) => {
		return decode
	})
}

module.exports = {
	getToken,
	verifyToken
}

这也是我第一次个人云开发微信小程序，有问题可以一起探讨交流，欢迎各位大佬指正，谢谢！
下面是我的小程序二维码，欢迎查看。