小程序的登录与静默续期

每一个有数据交互的小程序,都会涉及到登录、token 等问题,openid 又是什么呢?怎么使用静默续期,来提升用户体验呢?

小程序登录


登录时序

一切的一切,都要从这么一张小程序登录时序图说起:

通常情况下,我们的小程序都会有业务身份,如何将微信帐号和业务身份关联起来呢?这个时候我们需要上图的步骤:

小程序调用wx.login()获取临时登录凭证code。

小程序将code传到开发者服务器。

开发者服务器以code换取用户唯一标识openid和会话密钥session_key。

开发者服务器可绑定微信用户身份id和业务用户身份。

开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份。

相关数据或参数

上面的登录时序中,我们会涉及到一些数据和参数,先来了解下它们都是用来做啥的。

临时登录凭证 code 在小程序中调用wx.login(),能拿到一个code作为用户登录凭证(有效期五分钟)。在开发者服务器后台,开发者可使用code换取openidsession_key等信息(code只能使用一次)。

code的设计,主要用于防止黑客使用穷举等方式把业务侧个人信息数据全拉走。

AppId 与 AppSecret 为了确保拿code过来换取身份信息的人就是对应的小程序开发者,到微信服务器的请求要同时带上AppIdAppSecret

session_key 会话密钥session_key是对用户数据进行加密签名的密钥。为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥。

设计session_key主要是为了节省流程消耗,如果每次都通过小程序前端wx.login()生成微信登录凭证code去微信服务器请求信息,步骤太多会造成整体耗时比较严重。

使用接口wx.checkSession()可以校验session_key是否有效。用户越频繁使用小程序,session_key有效期越长。session_key失效时,可以通过重新执行登录流程获取有效的session_key

openid openid是微信用户id,可以用这个id来区分不同的微信用户。 微信针对不同的用户在不同的应用下都有唯一的一个openid, 但是要想确定用户是不是同一个用户,就需要靠unionid来区分。

unionid 如果开发者拥有多个移动应用、网站应用、和公众帐号(包括小程序),可通过unionid来区分用户的唯一性。同一用户,对同一个微信开放平台下的不同应用,unionid是相同的。

加锁的登录

在某些情况下,我们或许多个地方会同时触发登录逻辑(如多个接口同时拉取,发现登录态过期的情况)。一般来说,我们会简单地给请求加个锁来解决:

1.使用isLogining来标志是否请求中

2.方法返回 Promise,登录态过期时静默续期后重新发起

3.使用sessionId来记录业务侧的登录态

// session 参数 key(后台吐回)
        export const SESSION_KEY = 'sessionId';
        let isLogining = false;
        export function doLogin() {
            return new Promise((resolve, reject) => {
                const session = wx.getStorageSync(SESSION_KEY);
                if (session) {
// 缓存中有 session
                    resolve();
                } else if (isLogining) {
// 正在登录中,请求轮询稍后,避免重复调用登录接口
                    setTimeout(() => {
                        doLogin()
                            .then(res => {
                                resolve(res);
                            })
                            .catch(err => {
                                reject(err);
                            });
                    }, 500);
                } else {
                    isLogining = true;
                    wx.login({
                        success: (res) => {
                            if (res.code) {
                                const reqData: ILoginRequest = {
                                    code: res.code
                                }
                                wx.request({
                                    url: API.login,
                                    data: reqData,
// method: "POST",
                                    success: (resp) => {
                                        const data = resp.data;
                                        isLogining = false;
// 保存登录态
                                        if (data.return_code === 0) {
                                            wx.setStorageSync(SESSION_KEY, data[SESSION_KEY]);
                                            resolve();
                                        } else {
                                            reject(data.return_msg);
                                        }
                                    },
                                    fail: err => {
// 登录失败,解除锁,防止死锁
                                        isLogining = false;
                                        reject(err);
                                    }
                                });
                            } else {
// 登录失败,解除锁,防止死锁
                                isLogining = false;
                                reject();
                            }
                        },
                        fail: (err) => {
// 登录失败,解除锁,防止死锁
                            isLogining = false;
                            reject(err);
                        }
                    });
                }
            });
        }

登录态静默续期的实现

checkSession

前面也提到,微信不会把session_key的有效期告知开发者,因此需要使用接口wx.checkSession()来校验session_key是否有效。

这里我们:

1.使用isCheckingSession来标志是否查询中。

2.返回 Promise。

3.使用isSessionFresh来标志session_key是否有效

import {doLogin} from "./doLogin";
        import {SESSION_KEY} from "./doLogin";
        let isCheckingSession = false;
        let isSessionFresh = false;
        export function checkSession(): Promise<string> {
            return new Promise((resolve, reject) => {
                const session = wx.getStorageSync(SESSION_KEY);
                if (isCheckingSession) {
                    setTimeout(() => {
                        checkSession().then(res => {
                            resolve(res);
                        }).catch(err => {
                            reject(err);
                        });
                    }, 500);
                } else if (!isSessionFresh && session) {
                    isCheckingSession = true;
                    wx.checkSession({
                        success: () => {
                            // session_key 未过期,并且在本生命周期一直有效
                            isSessionFresh = true;
                            resolve();
                        }, fail: () => {
                            // session_key 已经失效,需要重新执行登录流程
                            wx.removeStorage({
                                key: "skey", complete: () => {
                                    doLogin().then(() => {
                                        resolve();
                                    }).catch(err => {
                                        reject(err);
                                    });
                                }
                            });
                        }, complete: () => {
                            isCheckingSession = false;
                        }
                    });
                } else {
                    doLogin().then(res => {
                        resolve(res);
                    }).catch(err => {
                        reject(err);
                    });
                }
            });
        }
        }
        }

静默续期的接口请求

至此,我们可以封装一个简单的接口,来在每次登录态过期的时候自动续期:

1.在请求前,使用checkSession()检车本次周期内session_key是否有效,无效则doLogin()拉起登录获取sessionId

2.请求接口,若返回特定登录态失效错误码(此处假设为LOGIN_FAIL_CODE),则doLogin()拉起登录获取sessionId

3.使用tryLoginCount来标志重试次数,TRY_LOGIN_LIMIT来标志重试次数上限,避免进入死循环。

import {doLogin} from "./doLogin";
        import {SESSION_KEY} from "./doLogin";
        import {checkSession} from "./checkSession";
        // 会话过期错误码,需要重新登录
        export const LOGIN_FAIL_CODES = [10000];
        const TRY_LOGIN_LIMIT = 3;
        export function request(obj: any = {}): Promise<object> {
            return new Promise((resolve, reject) => {
                checkSession().then(() => {
                    let session = wx.getStorageSync(SESSION_KEY);
                    const {url, data, method, header, dataType} = obj;
                    let tryLoginCount = obj.tryLoginCount || 0;
                    // 如果需要通过 data 把登录态 sessionId 带上const
                    dataWithSession = {...data, [SESSION_KEY]: session, appid: APPID};
                    wx.request({
                        url, data: dataWithSession, method, header, dataType, success: (res: any) => {
                            if (res.statusCode === 200) {
                                const data: ICommonResponse = res.data;
                                // 登陆态失效特定错误码判断,且重试次数未达到上限
                                if (LOGIN_FAIL_CODES.indexOf(data.return_code) > -1 && tryLoginCount < TRY_LOGIN_LIMIT) {
                                    doLogin().then(() => {
                                        obj.tryLoginCount = ++tryLoginCount;
                                        request(obj).then(res => {
                                            resolve(res);
                                        }).catch(err => {
                                            reject(err);
                                        });
                                    });
                                } else {
                                    resolve(res);
                                }
                            } else {
                                reject(res);
                            }
                        }, fail: function (err) {
                            reject(err);
                        }
                    });
                }).catch(err => {
                    reject(err);
                });
            });
        }

至此,我们大概包装了一个能自动登录或是进行静默续期的一个请求接口。

结束语


小程序的登录和登录态管理,大概是大部分小程序都需要的能力。codesession_key的设计,做了哪些事情来保护用户的数据。 如何在全局范围地保证登录态的有效性,微信侧的登录态也好,业务侧的登录态也好,静默续期的能力能给用户带来不少的体验提升。


内容来自网络,PHPer技术栈收集,如有侵权,请告知。

原文发布于微信公众号 - PHPer技术栈(Bule_sky-W)

原文发表时间:2019-06-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券