一、登录流程
在谈论登录流程之前，我们需要先了解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组件
// 在login.vue的标签中添加下面的代码
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)
}
})
}
})
}
}
三、手机号登录
手机号登录需要在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组件
// 在login.vue的标签中添加下面的代码
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)
})
}
})
}
})
}
})
}
}
四、登录状态
在Uniapp中，可以通过SessionStorage、本地存储、服务端存储等方式来维护用户的登录状态。通常情况下，为了保障用户信息的安全性，我们会选择服务端存储用户登录状态。
服务端存储用户登录状态需要以下步骤：
1、在服务端生成一个唯一的token，然后把token和用户信息关联。可以通过redis或memcached等缓存库来实现。同时在返回的api中，把token返回给用户。
2、在前端通过SessionStorage或本地存储来存储token信息。在用户请求的时候，把token添加在http header中，然后上传到服务端验证是否登录。
3、在服务端验证token，验证通过后返回用户信息。
// 在login.vue的标签中，添加下面的代码。
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: () => {}
})
}
五、总结
Uniapp是一个跨平台的开发框架，开发者可以通过一套代码，覆盖App、小程序、H5等多种平台。微信小程序是Uniapp中非常重要的一个平台，同时小程序登录也是非常具有代表性的功能之一。本文从微信小程序登录流程、微信登录、手机号登录和登录状态四个方面，对Uniapp微信小程序登录进行了详细的阐述。阅读本文后，读者可以掌握Uniapp微信小程序登录的实现方式，为开发小程序提供指引。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/246275.html
微信扫一扫 
支付宝扫一扫 