手把手教会你小程序登陆鉴权

导语

为了方便小程序应用使用微信登陆态进行受权登陆，微信小程序提供了登陆受权的开放接口。乍一看文档，感受文档上讲的很是有道理，可是实现起来又真的是摸不着头脑，不知道如何管理和维护登陆态。本文就来手把手的教会你们在业务里如何接入和维护微信登陆态。

接入流程

这里官方文档上的流程图已经足够清晰，咱们直接就该图展开详述和补充。

首先你们看到这张图，确定会注意到小程序进行通讯交互的不止是小程序前端和咱们本身的服务端，微信第三方服务端也参与其中，那么微信服务端在其中扮演着怎样的角色呢？咱们一块儿来串一遍登陆鉴权的流程就明白了。

1. 调用wx.login生成code

wx.login()这个API的做用就是为当前用户生成一个临时的登陆凭证，这个临时登陆凭证的有效期只有五分钟。咱们拿到这个登陆凭证后就能够进行下一步操做：获取openid和session_key

wx.login({
    success: function(loginRes) {
        if (loginRes.code) {
            // example: 081LXytJ1Xq1Y40sg3uJ1FWntJ1LXyth
        }
    }
});

复制代码

2. 获取openid和session_key

咱们先来介绍下openid，用过公众号的童鞋应该对这个标识都不陌生了，在公众平台里，用来标识每一个用户在订阅号、服务号、小程序这三种不一样应用的惟一标识，也就是说每一个用户在每一个应用的openid都是不一致的，因此在小程序里，咱们能够用openid来标识用户的惟一性。

那么session_key是用来干吗的呢？有了用户标识，咱们就须要让该用户进行登陆，那么session_key就保证了当前用户进行会话操做的有效性，这个session_key是微信服务端给咱们派发的。也就是说，咱们能够用这个标识来间接地维护咱们小程序用户的登陆态，那么这个session_key是怎么拿到的呢？咱们须要在本身的服务端请求微信提供的第三方接口https://api.weixin.qq.com/sns/jscode2session，这个接口须要带上四个参数字段：

参数	值
appid	小程序的appid
secret	小程序的secret
js_code	前面调用wx.login派发的code
grant_type	'authorization_code'

从这几个参数，咱们能够看出，要请求这个接口必须先调用wx.login()来获取到用户当前会话的code。那么为何咱们要在服务端来请求这个接口呢？实际上是出于安全性的考量，若是咱们在前端经过request调用此接口，就不可避免的须要将咱们小程序的appid和小程序的secret暴露在外部，同时也将微信服务端下发的session_key暴露给“有心之人”，这就给咱们的业务安全带来极大的风险。除了须要在服务端进行session_key的获取，咱们还须要注意两点：

• session_key和微信派发的code是一一对应的，同一code只能换取一次session_key。每次调用wx.login()，都会下发一个新的code和对应的session_key，为了保证用户体验和登陆态的有效性，开发者须要清楚用户须要从新登陆时才去调用wx.login()

• session_key是有时效性的，即使是不调用wx.login，session_key也会过时，过时时间跟用户使用小程序的频率成正相关，但具体的时间长短开发者和用户都是获取不到的

function getSessionKey (code, appid, appSecret) {
    var opt = {
        method: 'GET',
        url: 'https://api.weixin.qq.com/sns/jscode2session',
        params: {
            appid: appid,
            secret: appSecret,
            js_code: code,
            grant_type: 'authorization_code'
        }
    };
    return http(opt).then(function (response) {
        var data = response.data;
        if (!data.openid || !data.session_key || data.errcode) {
            return {
                result: -2,
                errmsg: data.errmsg || '返回数据字段不完整'
            }
        } else {
            return data
        }
    });
}
复制代码

3. 生成3rd_session

前面说过经过session_key来“间接”地维护登陆态，所谓间接，也就是咱们须要本身维护用户的登陆态信息，这里也是考虑到安全性因素，若是直接使用微信服务端派发的session_key来做为业务方的登陆态使用，会被“有心之人”用来获取用户的敏感信息，好比wx.getUserInfo()这个接口呢，就须要session_key来配合解密微信用户的敏感信息。

那么咱们若是生成本身的登陆态标识呢，这里可使用几种常见的不可逆的哈希算法，好比md五、sha1等，将生成后的登陆态标识（这里咱们统称为'skey'）返回给前端，并在前端维护这份登陆态标识(通常是存入storage)。而在服务端呢，咱们会把生成的skey存在用户对应的数据表中，前端经过传递skey来存取用户的信息。

能够看到这里咱们使用了sha1算法来生成了一个skey：

const crypto = require('crypto');

return getSessionKey(code, appid, secret)
    .then(resData => {
        // 选择加密算法生成本身的登陆态标识
        const { session_key } = resData;
        const skey = encryptSha1(session_key);
    });
    
function encryptSha1(data) {
    return crypto.createHash('sha1').update(data, 'utf8').digest('hex')
}
复制代码

4. checkSession

前面咱们将skey存入前端的storage里，每次进行用户数据请求时会带上skey，那么若是此时session_key过时呢？因此咱们须要调用到wx.checkSession()这个API来校验当前session_key是否已通过期，这个API并不须要传入任何有关session_key的信息参数，而是微信小程序本身去调本身的服务来查询用户最近一次生成的session_key是否过时。若是当前session_key过时，就让用户来从新登陆，更新session_key，并将最新的skey存入用户数据表中。

checkSession这个步骤呢，咱们通常是放在小程序启动时就校验登陆态的逻辑处，这里贴个校验登陆态的流程图：

下面代码即校验登陆态的简单流程：

let loginFlag = wx.getStorageSync('skey');
if (loginFlag) {
    // 检查 session_key 是否过时
    wx.checkSession({
        // session_key 有效(未过时)
        success: function() {
            // 业务逻辑处理
        },
    
        // session_key 过时
        fail: function() {
            // session_key过时，从新登陆
            doLogin();
        }
    });
) else {
    // 无skey，做为首次登陆
    doLogin();
}
复制代码

5. 支持emoji表情存储

若是须要将用户微信名存入数据表中，那么就确认数据表及数据列的编码格式。由于用户微信名可能会包含emoji图标，而经常使用的UTF8编码只支持1-3个字节，emoji图标恰好是4个字节的编码进行存储。

这里有两种方式(以mysql为例)：

1.设置存储字符集

在mysql5.5.3版本后，支持将数据库及数据表和数据列的字符集设置为utf8mb4，所以可在/etc/my.cnf设置默认字符集编码及服务端编码格式

// my.cnf

[client]
default-character-set=utf8mb4
[mysql]
default-character-set=utf8mb4
[mysqld]
character-set-client-handshake = FALSE
character-set-server=utf8mb4
collation-server=utf8mb4_unicode_ci
复制代码

设置完默认字符集编码及服务端字符集编码，若是是对已经存在的表和字段进行编码转换，须要执行下面几个步骤：

• 设置数据库字符集为utf8mb4

ALTER DATABASE 数据库名称 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci;

复制代码

• 设置数据表字符集为utf8mb4

ALTER TABLE 数据表名称 CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

复制代码

• 设置数据列字段字符集为utf8mb4

ALTER TABLE 数据表名称 CHANGE 字段列名称 VARCHAR(n) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

复制代码

这里的COLLATE指的是排序字符集，也就是用来对存储的字符进行排序和比较的，utf8mb4经常使用的collation有两种：utf8mb4_unicode_ci和utf8mb4_general_ci，通常建议使用utf8mb4_unicode_ci，由于它是基于标准的Unicode Collation Algorithm(UCA)来排序的，能够在各类语言进行精确排序。这两种排序方式的具体区别能够参考：What's the difference between utf8_general_ci and utf8_unicode_ci

2. 经过使用sequelize对emoji字符进行编码入库，使用时再进行解码

这里是sequelize的配置，可参考Sequelize文档

{
       dialect: 'mysql',    // 数据库类型
       dialectOptions: {    
         charset: 'utf8mb4',
         collate: "utf8mb4_unicode_ci"
      },
}
复制代码

最后

前面讲了微信小程序如何接入微信登陆态标识的详细流程，那么如何获取小程序中的用户数据以及对用户敏感数据进行解密，并保证用户数据的完整性，我将在下一篇文章给你们作一个详细地介绍。

---

《IVWEB 技术周刊》 震撼上线了，关注公众号：IVWEB社区，每周定时推送优质文章。

• 周刊文章集合: weekly
• 团队开源项目: Feflow