微信小程序登录流程+介绍wx.login和auth.code2Session

本文详细介绍了微信小程序的登录流程,包括wx.login获取临时登录凭证code,通过auth.code2Session校验登录凭证并获取openid和session_key。还解析了首次登录和再次登录时如何判断及处理session_key的过期问题,强调了session_key的时效性和重要性。此外,文章提及了wx.checkSession和wx.getSetting在检查登录态中的作用。

微信小程序登录流程+介绍wx.login和auth.code2Session
几个核心API和核心字段
wx.login() 调用接口获取登录凭证(code)
code2Session 登录凭证校验,为了获取会话秘钥session_key
wx.checkSession() 检查登录态是否过期
wx.getSetting() 获取用户的当前设置
wx.getUserInfo 获取用户信息,获取之后需要解密数据
session_key 会话秘钥,是通过调用接口获取登录凭证获取的,是有时效性的

微信小程序登录流程

在这里插入图片描述
介绍wx.login和auth.code2Session
wx.login:微信小程序的登录方法,获取临时登录凭证code,并回传到开发者服务器。

在这里插入图片描述 

 

auth.code2Session:换取 用户唯一标识 OpenID 和 会话密钥 session_key信息进行登录凭证校验。

在这里插入图片描述
登录流程解析
首次登录:
1、首先需要调用小程序api接口 wx.login() 获取 临时登录凭证code ,这个code是有过期时间的。
2、将这个code回传到开发者服务器(就是请求开发者服务器的登录接口,通过凭证进而换取用户登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)等)。
3、拿到开发者服务器传回来的会话密钥(session_key)之后,前端要保存wx.setStorageSync(‘sessionKey’, ‘value’)

 

再次登录的时候,就要判断存储的session_key是否过期了:
1、获取缓存中的session_key,wx.getStorageSync(‘sessionKey’)
2、如果缓存中存在session_key,那么调用小程序api接口wx.checkSession()来判断登录态是否过期,回调成功说明当前 session_key 未过期,回调失败说明 session_key 已过期。登录态过期后前端需要再调用 wx.login()获取新的用户的code,然后再向开发者服务器发起登录请求。
3、一般在项目开发,开发者服务器也会对用户的登录态做过期限制,所以这时在判断完微信服务器中登录态如果没有过期之后还要判断开发者服务器的登录态是否过期。(请求开发者服务器给定的接口进行请求判断就好)。
4、无论是微信服务器过期了还是开发者服务器登录态过期了,都要像首次登录那样开始三步骤。所以注意封装代码。
————————————————
版权声明:本文为优快云博主「淡淡烟雨淡淡愁」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.youkuaiyun.com/UchihaItachi1/article/details/105574452

微信小程序中使用 `wx.login()` 接口实现用户登录功能时,主要涉及前端与后端的配合操作。以下是具体的使用方法及完整的登录流程。 ### 使用方法 `wx.login()` 是用于获取用户登录凭证(code)的核心接口。调用成功后,会返回一个临时登录凭证 code,该 code 可以用于换取用户的 openid session_key[^4]。 ```javascript wx.login({ success: (res) => { if (res.code) { // 成功获取 code,发送请求到后台 wx.request({ url: 'https://your-backend-url.com/login', method: 'POST', data: { code: res.code, appid: '你的小程序 AppID' }, success(response) { // 处理后台返回的数据 const token = response.data; // 存储 token 到本地 wx.setStorageSync('token', token); // 解析 token 获取 openid session_key const decodedToken = weappJwt(token); console.log(decodedToken.openid, decodedToken.session_key); } }); } else { console.log('登录失败!' + res.errMsg); } }, fail: (err) => { console.log("获取登录凭证 code 失败!", err); } }); ``` ### 登录流程 1. **前端调用 `wx.login()` 获取登录凭证**: - 用户进入小程序时,前端调用 `wx.login()` 接口,获取一个临时登录凭证 code。 - code 是一次性的,只能使用一次,并且有效期为 5 分钟[^1]。 2. **将 code 发送到后台服务器**: - 前端将获取到的 code 小程序的 AppID 一起发送给后台服务器。 - 后台服务器使用 code 调用微信的接口(如 `auth.code2Session`),验证用户身份并获取用户的唯一标识(openid)会话密钥(session_key)[^1]。 3. **生成并返回 JWT Token**: - 后台服务器生成一个包含用户信息(如 openid session_key)的 JWT Token。 - 将生成的 Token 返回给小程序前端。 4. **前端存储并解析 Token**: - 小程序前端接收到 Token 后,将其存储在本地缓存中(如使用 `wx.setStorageSync`)。 - 使用 JWT 解析库(如 `jwt-decode`)解析 Token,提取其中的 openid session_key,用于后续业务逻辑处理[^1]。 5. **全局状态管理**: - 在小程序的全局配置文件(如 `app.js`)中定义全局变量,存储用户登录状态(如 token)。 - 在页面加载时检查是否存在有效的 token,若不存在则引导用户重新登录。 6. **处理登录状态监听**: - 如果需要在多个页面间共享登录状态,可以在 `app.js` 中定义自定义回调函数(如 `loginCallback`),并在页面的 `onLoad` 方法中监听其执行状态,以便继续完成相关操作[^5]。 ### 注意事项 - **安全性**:确保后台服务器对 code 的处理是安全的,避免泄露用户的敏感信息。 - **时效性**:code 的有效性只有 5 分钟,因此必须尽快发送给后台进行验证。 - **错误处理**:如果 `wx.login()` 调用失败,应该提示用户重试或检查网络连接情况[^2]。 - **用户体验**:在登录过程中,可以添加加载动画或提示信息,提升用户体验。 ### 示例代码 #### JWT 解码示例 ```javascript const weappJwt = require('./miniprogram_npm/jwt-decode/index'); App({ globalData: { userInfo: { openid: '', session_key: '' } }, onLaunch() { wx.login({ success: (res) => { if (res.code) { let data = { code: res.code, appid: '你的小程序 AppID' }; getLoadin(data).then((res) => { if (res.code == 200) { wx.setStorage({ data: res.data, key: 'token', }); let ret = weappJwt(res.data); this.globalData.userInfo.openId = ret.openid; this.globalData.userInfo.session_key = ret.session_key; } else { wx.showToast({ title: res.message, icon: 'none' }); } }); } else { console.log('登录失败!' + res.errMsg); } } }); } }); ``` #### 检查登录状态 ```javascript App({ globalData: { token: '' }, checkLogin() { var token = this.globalData.token; if (!token) { token = wx.getStorageSync('token'); if (token) { this.globalData.token = token; } else { wx.showToast({ title: '请登录', icon: 'none' }); setTimeout(() => { wx.reLaunch({ url: '/pages/login/login', }); }, 2000); } } }, onLaunch() { this.checkLogin(); } }); ``` #### 自定义登录回调 ```javascript // app.js App({ onLaunch(options) { let that = this; wx.login({ success: res => { api.login(res.code, scene).then(() => { if (that.loginCallback) { that.loginCallback(1); // 执行自定义回调函数 } }); } }); } }); // index.js const app = getApp(); Page({ onLoad() { app.loginCallback = flag => { if (flag) { api.post('/xxxxxxxxxxxxx').then((res) => { // post api // do something }); } }; } }); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值