小程序实现登录功能

网友投稿 354 2023-11-10

本文实例为大家分享了小程序实现登录功能的具体代码，供大家参考，具体内容如下

小程序实现登录功能

小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。

1、前端调用wx.login获取code，再调用后端接口传递code

注意：code是临时的，只有5分钟的使用时间，而且只能使用一次

2、后端用获取的code与微信接口服务换取openid（用户唯一标识）与session_key（可以用于解密私密信息encrydata，现在只能获取头像和昵称），然后生成一个自定义登录状态的token，自定义登录态与openid和session_keysession关联。

注意：不可以把解析出来的openid和session_key直接返回给前端，会造成信息安全问题

3、将token返回给前端

4、前端缓存token

5、用户登录时，登录接口获取到token，再调用其他接口时，-进行拦截，如果token有效，则放行请求；如果token失效（不存在、过期、格式不正确等原因），则无法访问该接口，需要重新登录。

说明：如果觉得token验证太过复杂，也可以退而求其次，采用微信小程序自带的wx.checkSeesion检查下发的session_key是否过期（固定为两天）。

wx.checkSeesion是前端检查，非常方便，但是缺点也很明显：耗时长，通常需要300+ms ，另外前后端传递私密数据时，需要额外考虑数据安全问题（以openid为例，前端每次需要传递openid时，都需要先获取临时code，再传递给后端，后端再用code换取openid，开销极大），因此正式开发时极不建议使用wx.checkSeesion，token验证方式可以较好解决上述问题。

核心代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
// pages/my/my.js
Page({
/**
* 页面的初始数据
*/
data: {
loginOk: false,
userInfo: null
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//验证是否登录
this.checklogin()
},
checklogin() {
const token = wx.getStorageSync(token)
const that = this
if (token) {
wx.request({
url: http://127.0.0.1:3000/checklogin,
method: get,
data:{
token:token
},
success(res) {
that.setData({ 
loginOk: res.data.is_login,
userInfo: res.data.userInfo
})
}
})
} else {
that.setData({ loginOk: false })
}
},
login() {
const that = this
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
wx.getUserProfile({
desc: 展示用户信息, // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success(res){
const userInfo = res.userInfo
console.log(userInfo)
// 登录
wx.login({
success(res) {
if (res.code) {
//发起网络请求
wx.request({
url: http://127.0.0.1:3000/getSession,
method: post,
data: {
code: res.code,
userInfo:userInfo
},
success(res) {
// 将token保存到数据缓存（下次打开小程序无需重新获取token）
wx.setStorageSync(token, res.data.token)
that.setData({ 
loginOk: true,
userInfo: userInfo
})
}
})
}
}
})
}
})
},
//退出登录
exit() {
wx.showModal({
content: "确定退出吗"
}).then(res => {
if (res.confirm) {
this.setData({
loginOk: false
})
//清空登录的缓存
wx.removeStorageSync(token)
} else if (res.cancel) {
wx.showToast({
title: 取消,
icon:error
})
}
})
}
})
您可能感兴趣的文章:微信小程序实战之登录页面制作(5)微信小程序用户授权，以及判断登录是否过期的方法微信小程序获取手机号授权用户登录功能微信小程序 授权登录详解（附完整源码）微信小程序实现授权登录一步步教会你微信小程序的登录鉴权微信小程序 本地存储及登录页面处理实例详解微信小程序获取用户信息并保存登录状态详解微信小程序 新建登录页并实现tabBar隐藏PHP后台实现微信小程序登录

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 小程序 微信小程序 方法 数据
上一篇:微信小程序 选项卡的简单实例
下一篇:微信小程序实现简易计算器
相关文章

 发表评论

暂时没有评论，来抢沙发吧~