微信小程序登录流程解析

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

登录流程时序：

1、首先，调用 wx.login获取code ，判断用户是否授权读取用户信息，调用wx.getUserInfo读取用户数据。

2、然后，由于小程序后台授权域名无法授权微信的域名，所以我们只能通过我们自己的服务器去调用微信服务器去获取用户信息。

3、然后，故我们将wx.login获取code 和 wx.getUserInfo 获取的encryptedData与iv 通过wx.request 请求传入后台。

4、然后，调用接口获取登录凭证（code）进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）。

5、然后，用户数据的加解密通讯需要依赖会话密钥完成，code 换取 session_key，这是一个 HTTPS 接口，开发者服务器使用登录凭证 code 获取 session_key 和 openid。

6、最后，其中 session_key 是对用户数据进行加密签名的密钥。为了自身应用安全，session_key 不应该在网络上传输。

该图中，“小程序”指的就是我们使用小程序框架写的代码部分，“第三方服务器”一般就是我们自己的后台服务程序，“微信服务器”是微信官方的API服务器。

下面我们来逐步分解一下这个流程图。

步骤一：在客户端获取当前登录微信用户的登录凭证(code)

在小程序中登录的第一步，就是先获取登录凭证。我们可以使用wx.login()方法并得到一个登录凭证。

我们可以在小程序的App代码中发起登录凭证请求，也可以在其他任何Page页面代码中发起登录凭证请求，主要根据你小程序的实际需要。

步骤二：将登录凭证发往你的服务端，并在你的服务端使用该凭证向微信服务器换取该微信用户的唯一标识(openid)和会话密钥(session_key)

首先，我们使用wx.request()方法，请求我们自己实现的一个后台API，并将登录凭证（code）携带过去，例如在我们前面代码的基础上增加：

你的后台服务接着需要使用这个传递过来的登录凭证（code），去调用微信接口换取openid和session_key

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

那么session_key是用来干嘛的呢？有了用户标识，我们就需要让该用户进行登录，那么 session_key 就保证了当前用户进行会话操作的有效性，这个session_key是微信服务端给我们派发的。也就是说，我们可以用这个标识来间接地维护我们小程序用户的登录态，那么这个session_key是怎么拿到的呢？我们需要在自己的服务端请求微信提供的第三方接口 https://api.weixin.qq.com/sns/jscode2session

从这几个参数，我们可以看出，要请求这个接口必须先调用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也会过期，过期时间跟用户使用小程序的频率成正相关，但具体的时间长短开发者和用户都是获取不到的

步骤三：通过不可逆的哈希算法将session_key生成登录态标识3rd_session(应该就是token)

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

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

步骤四：在客户端的本地storage保存Session ID(应该就是3rd_session，即token)

开发Web应用的时候，在客户端（浏览器）中，我们通常将Session ID存放在cookie中，但是小程序没有cookie机制，所以不能采用cookie了，但是小程序有本地的storage，所以我们可以使用storage来保存Session ID，以供后续的后台API调用所使用。

在之后，调用那些需要登录后才有权限访问的后台服务时，你可以将保存在storage中的Session ID取出并携带在请求中（可以放在header中携带，也可以放在querystring中，或是放在body中，根据你自己的需要来使用），传递到后台服务，后台代码中获取到该Session ID后，从redis中查找是否有该Session ID存在，存在的话，即确认该session是有效的，继续后续的代码执行，否则进行错误处理。

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

步骤五：支持emoji表情存储

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

代码如下：

//app.js

App({

  onLaunch: function () {

    // 登录

    wx.login({

        success: res => {    // 在客户端通过wx.login()方法获取res.code

            // 发送 res.code 到后台换取 openId 验证平台账号是否登录绑定过

            var that = this;

            wx.request({   // 你的服务器携带res.code去请求微信服务器获取openId和session_key

                method: 'GET',

                url: this.globalData.serverApi + "/mobileApi/user/checkBind?code="+res.code,

                header: {

                    'content-type': 'application/json'

                },

                success (res) {

                    if(res.data.code == 301){

                        //未登录

                        var openId = res.data.openId;

                        wx.reLaunch({

                          url: '/pages/login/login?openId='+openId

                        })

                    }else if(res.data.code == 1){

                        //已登录

                        that.globalData.userInfo = res.data.userInfo;

                        that.globalData.token = res.data.token;

                        var menuList = res.data.menuList;

                        wx.setStorageSync('menuList', menuList);

                    }else if(res.data.code == 0){

                        //获取openId失败

                        wx.showToast({

                          title: res.data.msg,

                          icon: 'none',

                          duration: 2000

                        })

                    }

                    // 由于 checkBind 是网络请求，可能会在 Page.onLoad 之后才返回

                    // 所以此处加入 callback 以防止这种情况

                    if (that.checkBindCallback) {

                      that.checkBindCallback(res)

                    }

                }

            })

      }

    })

})