Uniapp微信小程序登录详解

发布时间：2023-05-19

一、登录流程

在谈论登录流程之前，我们需要先了解Wexin小程序的登录机制。微信小程序登录分为两种：一种是微信登录，一种是手机号登录。 微信登录：用户使用微信账号进行授权，获取用户信息，再访问开发者自己的服务器登录。相对于手机号登录，微信登录具有更好的用户体验，减少用户的操作步骤。 手机号登录：用户需要输入手机号和短信验证码，完成登录。对于不想使用微信授权登录的用户，可以选择手机号登录。开发者需要在服务器中存储用户的登录状态，给予用户持久化的方式。 在Uniapp中，通过微信小程序官方提供的API，可以方便地实现微信登录和手机号登录功能。

二、微信登录

微信登录是Uniapp在小程序端比较推荐的一种登录方式。Uniapp通过封装微信官方提供的Session API，实现了微信登录的功能。下面是实现微信登录的步骤： 1、在小程序manifest.json文件中，注册小程序的appid，并设置request合法域名和sld（顶级域名）

"appid": "yourAppid", // 注册小程序的appid
"networkTimeout": {
    "request": 10000, // 单位为ms
    "connectSocket": 10000, // 单位为ms
    "uploadFile": 10000, // 单位为ms
    "downloadFile": 10000 // 单位为ms
},
"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序的定位功能，不会泄露给其他人"
    }
},
"mp-weixin": {
    "subPackages": []
},
"debug": true,
"request": {
    "domain": {
        "main": "www.yourdomain.com", // 服务器域名
        "images": [
            "https://www.yourdomain.com/images",
            "https://img.yourdomain.com"
        ]
    },
    "header": {
        "Content-Type": "application/json"
    }
},
"requiredBackgroundModes": ["audio", "location"]

2、在uni账户中添加微信应用，获取Appid与AppSecret，在Uniapp中使用这两个信息进行微信登录

<!-- 在login.vue页面中引入uni-account-login组件，在template中添加uni-account-login组件 -->
<template>
	<uni-account-login :type="loginType" :id="companyId" @success="toIndex" @cancel="cancel" />
</template>

// 在login.vue的 <Script> 标签中添加下面的代码
<script>
import uniAccountLogin from '@/components/uni-account-login/uni-account-login.vue'
export default {
	components: {
		uniAccountLogin
	},
	data() {
		return {
			loginType: 'wx', // 微信登录
			companyId: 'yourCompanyId', // 注册的企业ID或个人ID
		}
	},
	// 小程序通过微信授权登录后，可以获取到用户的openid和session_key，
	// 维护着用户的登录状态，然后把登录结果返回给开发者的服务器。
	onLoad() {
		uni.login({
			provider: 'weixin',
			success: function (loginResult) {
				const wxcode = loginResult.code // 登录凭证
				uni.request({
					url: 'https://api.weixin.qq.com/sns/jscode2session',
					method: 'GET',
					data: {
						appid: 'yourAppid', // 注册的小程序appid
						secret: 'yourSecret', // 注册的小程序AppSecret
						js_code: wxcode,
						grant_type: 'authorization_code'
					},
					success: (res) => {
						const openid = res.data.openid // 用户唯一标识
						const sessionKey = res.data.session_key // 会话密钥
						const result = {
							type: 'wx',
							openId: openid,
							session_key: sessionKey,
							companyId: 'yourCompanyId', // 注册的企业ID或个人ID
						}
						this.$refs.uniAccountLogin.login(result)
					}
				})
			}
		})
	}
}
</script>

三、手机号登录

手机号登录需要在Uniapp中调用小程序官方的API。下面是实现手机号登录的步骤： 1、在小程序manifest.json文件中，注册小程序的手机号登录模板

"mp-weixin": {
    "phone": {
        "templateMessageInfo": {
            "parameterList": [
                {
                    "name": "占位符唯一标识",
                    "value": "{{占位符}}", // 替换为实际参数
                    "color": "#173177" // 参数字体颜色
                }
            ],
            "templateId": "下发的模板消息唯一标识", // 模板id
            "type": "微信服务通知" // 模板类型
        }
    }
}

2、在uni账户中添加手机号登录模板，获取模板id，在Uniapp中使用模板id进行手机号登录

<!-- 在login.vue页面中引入uni-account-login组件，在template中添加uni-account-login组件 -->
<template>
	<uni-account-login :type="loginType" :id="companyId" @success="toIndex" @cancel="cancel" />
</template>

// 在login.vue的 <Script> 标签中添加下面的代码
<script>
import uniAccountLogin from '@/components/uni-account-login/uni-account-login.vue'
export default {
	components: {
		uniAccountLogin
	},
	data() {
		return {
			loginType: 'phone', // 手机号登录
			companyId: 'yourCompanyId', // 注册的企业ID或个人ID
			templateId: 'yourTemplateId' // 注册的手机号登录模板id
		}
	},
	onLoad() {
		// 调用微信登录，获取用户信息
		uni.login({
			provider: 'weixin',
			success: function (loginResult) {
				const wxcode = loginResult.code // 登录凭证
				uni.request({
					url: 'https://api.weixin.qq.com/sns/jscode2session',
					method: 'GET',
					data: {
						...
					},
					success: (res) => {
						const openid = res.data.openid // 用户唯一标识
						const sessionKey = res.data.session_key // 会话密钥
						uni.getUserInfo({
							provider: 'weixin',
							success: (infoResult) => {
								const userInfo = JSON.parse(infoResult.userInfo)
								const result = {
									type: 'phone',
									phone: '',
									templateId: this.templateId,
									companyId: this.companyId,
									openid: openid,
									session_key: sessionKey
								}
								// 调用uni-account-login组件，进行验证码验证
								this.$refs.uniAccountLogin.sendCode(result, (phoneNumber) => {
									result.phone = phoneNumber
									this.$refs.uniAccountLogin.login(result)
								})
							}
						})
					}
				})
			}
		})
	}
}
</script>

四、登录状态

在Uniapp中，可以通过SessionStorage、本地存储、服务端存储等方式来维护用户的登录状态。通常情况下，为了保障用户信息的安全性，我们会选择服务端存储用户登录状态。 服务端存储用户登录状态需要以下步骤： 1、在服务端生成一个唯一的token，然后把token和用户信息关联。可以通过redis或memcached等缓存库来实现。同时在返回的api中，把token返回给用户。 2、在前端通过SessionStorage或本地存储来存储token信息。在用户请求的时候，把token添加在http header中，然后上传到服务端验证是否登录。 3、在服务端验证token，验证通过后返回用户信息。

// 在login.vue的 <Script> 标签中，添加下面的代码。
<script>
verifiedLogin(res) { // 服务端返回的验证登录结果
	if (res.code == 200) {
		// 登录成功
		const data = res.data
		uni.setStorageSync('token', data.token) // 存储用户token
		uni.setStorageSync('userInfo', data.userInfo) // 存储用户信息
		uni.switchTab({
			url: '/pages/index/index'
		})
	} else {
		uni.showToast({
			title: '登录失败',
			icon: 'none'
		})
	}
},
login() {
	// 从uni-account-login组件中获取登录信息，提交到服务器进行登录信息验证
	const result = this.$refs.uniAccountLogin.getLoginResult()
	console.log(JSON.stringify(result))
	uni.request({
		url: 'https://api.yourdomain.com/login',
		method: 'POST',
		data: {
			code: result.code,
			openid: result.openId ? result.openId : '',
			session_key: result.session_key ? result.session_key : '',
			phone: result.phone ? result.phone : '',
			verify_code: result.verifyCode ? result.verifyCode : ''
		},
		success: (res) => {
			this.verifiedLogin(res.data)
		},
		fail: () => {},
		complete: () => {}
	})
}
</script>

五、总结

Uniapp是一个跨平台的开发框架，开发者可以通过一套代码，覆盖App、小程序、H5等多种平台。微信小程序是Uniapp中非常重要的一个平台，同时小程序登录也是非常具有代表性的功能之一。本文从微信小程序登录流程、微信登录、手机号登录和登录状态四个方面，对Uniapp微信小程序登录进行了详细的阐述。阅读本文后，读者可以掌握Uniapp微信小程序登录的实现方式，为开发小程序提供指引。

推荐文章