uniapp云开发实现微信小程序实现login并记录用户信息

参考

• https://blog.csdn.net/u011619323/article/details/122010909
• https://www.jianshu.com/p/27d92e3658e1

环境

名称	版本
操作系统	windows10
微信开发者工具	1.06.2206090
HBuilder X	3.4.18
Vue	3
时间	2022/7/4

注意

无需自己管理uni-id的token

https://uniapp.dcloud.net.cn/uniCloud/uni-id-summary.html#组成结构
客户端API uni-app框架内置了uni-id的token管理。
uni-app与uniCloud搭配且使用uni-id，登录后自动下发token、网络传输层自动传输token（uni-app 2.7.13+版本）、token临近过期会自动续期（uni-app 3.4.13 +版本），也就是说开发者无需自己管理token了。(测试需要自己储存token。。。)

步骤

云数据库创建

1. 需要先去 https://unicloud.dcloud.net.cn/ 注册并实名认证。

2. 在项目右键->创建uniCloud开发环境（推荐阿里云),然后绑定自己创建的云空间(或者叫服务空间)。

3. 点击详情，进入绑定到当前项目的云空间（云空间在步骤2已创建）。
   

4. 点击云数据库->云数据库->数据表文字右侧的加号符号进行添加（你的没添加默认没有表，我添加过所以有）
   

5. 我们要做登录功能，可以通过表模板创建，所以表选择 uni-id，然后下方会出现表列表，直接全选即可，然后右下角点击创建选中的opendb表按钮进行创建
   

编辑器创建云函数并在前端引用

6. 在 uniCloud/cloudfunction 文件夹右键创建云函数
   

7. 选择默认模板->uni-id-cf，然后导入 uni_module，如果提示合并/覆盖之类的提示直接全选覆盖即可。
   

8. 在 uniCloud/cloudfunctions/common/uni-config-center/uni-id/config.json 文件中mp-weixin设置你的小程序appid与appsecret，如果文件不存在就创建。

passwordSecret 与 tokenSecret 需要自己去设置，用默认的会有安全风险。

{
	"passwordSecret": "passwordSecr......et-demo",
	"tokenSecret": "tokenSecr.......et-demo",
	"tokenExpiresIn": 7200,
	"tokenExpiresThreshold": 600,
	"passwordErrorLimit": 6,
	"bindTokenToDevice": true,
	"passwordErrorRetryTime": 3600,
	"autoSetInviteCode": false,
	"forceInviteCode": false,
	"app-plus": {
		"tokenExpiresIn": 2592000,
		"oauth" : {
			"weixin" : {
				"appid" : "appid",
				"appsecret" : "appsecret"
			}
		}
	},
	"mp-weixin": {
		"oauth" : {
			"weixin" : {
				"appid" : "appid",
				"appsecret" : "appsecret"
			}
		}
	},
	"mp-alipay": {
		"oauth" : {
			"alipay" : {
				"appid" : "alipay appid",
				"privateKey" : "alipay privateKey"
			}
		}
	},
	"service": {
		"sms": {
			"name": "DCloud",
			"codeExpiresIn": 300,
			"smsKey": "your sms key",
			"smsSecret": "your sms secret"
		}
	}
}

9. 登录我放到了 App.vue 文件中，你也可以选择任意位置，放到 onLaunch 函数中，这样每次启动小程序就会获取用户的 open_id 或者 id，不需要担心 open_id 过期，因为当前版本已经实现了到期自动刷新的功能，每次请求也会自动携带。

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch');
			this.userDefaultLogin();
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		methods:{
			/**
			 * 进入小程序就获取用户信息
			 */
			userDefaultLogin:()=>{
				uni.login({
					success(res) {
						uniCloud.callFunction({
						  name: 'uni-id-cf', 
						  data: {
							action: 'loginByWeixin',
							params:{
								code:res.code
							}
						  }
						}).then(res => {
							console.log(res);
							/**
							 * https://uniapp.dcloud.net.cn/uniCloud/uni-id-summary.html#%E7%BB%84%E6%88%90%E7%BB%93%E6%9E%84
							 * uni-app与uniCloud搭配且使用uni-id，登录后自动下发token、网络传输层自动传输token（uni-app 2.7.13+版本）、token临近过期会自动续期（uni-app 3.4.13 +版本），也就是说开发者无需自己管理token了。(**测试需要自己储存token。。。**)
							 */
							uni.setStorageSync('uid', res.result.uid)
							uni.setStorageSync('uni_id_token', res.result.token)
							uni.setStorageSync('uni_id_token_expired', res.result.tokenExpired)
							uni.setStorageSync('user_info', res.result.userInfo)
						})
					}
				})
			}
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>