微信小程序登陸那些事

最近團隊在開發一款小程序，都是新手，一邊看文檔，一邊開發。在開發中會遇到各類問題，今天把小程序登陸這塊的流程整理下，作個記錄。

小程序的登陸跟平時本身APP這種登陸驗證還不太同樣，多了一個角色，那就是微信服務器。

根據微信官方提供的登陸流程時序圖能夠清楚的瞭解小程序登陸須要多少個步驟，下面咱們來總結下：

• 小程序啓動，經過wx.login()獲取code
• 開發者服務器須要提供一個登陸的接口，參數就是小程序獲取的code
• 登陸接口收到code後，調用微信提供的接口進行code的驗證
• 獲得驗證結果，成功後能獲得一個session_key和openid
• 生成一個自定義的key, 將session_key和openid跟自定義的key關聯起來
• 將自定義的key返回給小程序
• 每次請求都帶上key, 後端根據key獲取openid識別當前用戶身份

首先code是微信給的，若是你隨意生成code去驗證確定是無效的，只有微信給的code纔有效。code傳到開發者本身的服務後，再去問微信：

Hi 哥們，我這個code是有效的仍是無效的啊？

微信會告訴你是有效仍是無效，有效的狀況下還會給你一個用戶的標識，也就是openid，同時還會有一個session_key，也就是會話的key。session_key的有效期默認是2小時，當用戶一直在使用小程序的話會自動刷新，這個是由微信這邊來維護的。

注意：

1. 會話密鑰 session_key 是對用戶數據進行 加密簽名 的密鑰。爲了應用自身的數據安全，開發者服務器不該該把會話密鑰下發到小程序，也不該該對外提供這個密鑰。
2. 臨時登陸憑證 code 只能使用一次

因此咱們要爲session_key建立別名，這個別名關聯的哪一個用戶只有咱們本身知道，惟一須要作的工做就在這塊。

我推薦2種方式來作關聯：

第一種： 隨機生成key, 關聯openid，存入redis中，當請求帶入key，直接從redis中獲取openid獲得當前用戶信息，這個其實也就是咱們本身去維護了會話信息

第二種： 採用JWT生成token，將openid綁定到token中，將token返回給小程序，請求的時候帶上token，經過解析token獲得用戶信息。

下面咱們以第二種方式來進行講解，會貼上部分代碼：

小程序中在app.js中的onLaunch方法中增長獲取code方法，而且調用後端的登陸接口獲取token:

wx.login({
      success: function (res) {
        var code = res.code;
        if (code) {
          console.log('app啓動獲取用戶登陸憑證：' + code);
          let params = { "code": code };
          let result = config.requestHttp(config.url.userLogin, 'POST', params)
          result.then(res => {
            let data = res.data
            if (data.code == 200) {
              wx.setStorageSync("login_token", data.data.token);
            }
          }).catch(err => {
            console.log(err)
          });
        } else {
          console.log('獲取用戶登陸態失敗：' + res.errMsg);
        }
      }
})
複製代碼

userLogin接口則根據小程序的code去調用微信接口驗證：

// 小程序獲取SessionKey接口地址
String loginUrl = "https://api.weixin.qq.com/sns/jscode2session";
String url = loginUrl + "?appid=%s&secret=%s&grant_type=%s&js_code=%s";
url = String.format(url, appid, appSecret, grantType, param.getCode());
String result = restTemplate.getForObject(url, String.class);
Map<String, Object> map = JsonUtils.toBean(Map.class, result);
// 請求成功
if (map.containsKey("session_key")) {
	String openid = map.get("openid").toString();
    // 第一次保存到用戶表，生成JWT TOKEN返回
}
複製代碼

小程序端須要將 wx.request()封裝成一個通用的方法，全部跟後臺交互都用這個方法來調用接口，咱們能夠在這個方法中設置登陸以後獲取的Token。這樣每次請求都會將Token塞到請求頭中，咱們在網關中就能夠獲取這個Token進行解析驗證。

//請求封裝
function requestHttp(url, method, data) {
  //請求頭設置
  var header = {
    Authorization: wx.getStorageSync("login_token")
  }
  return new Promise((resolve, reject) => {
    wx.request({
      url: config.home_config + url,
      data: data,
      header: header,
      method: method,
      success: (res => {
        if (res.data.code === 200) {
          resolve(res)
        } else {
          reject(res)
        }
      }),
      fail: (res => {
        reject(res)
      })
    })
  })
}
複製代碼

Zuul中進行驗證：

RequestContext ctx = RequestContext.getCurrentContext();
  HttpServletRequest request = ctx.getRequest();
  String token = request.getHeader("Authorization");
  if (StringUtils.isBlank(token)) {
    		ctx.setSendZuulResponse(false);
            ctx.set("isSuccess", false);
            ctx.setResponseBody(JsonUtils.toJson(Response.fail("非法請求【缺乏Authorization】", ResponseCode.NO_AUTH_CODE)));
            ctx.getResponse().setContentType("application/json; charset=utf-8");
            return null;
  }
    
  // 驗證Token是否有效
  JWTResult jwResult = JWTUtils.checkToken(token);
  if (!jwResult.isStatus()) {
    		ctx.setSendZuulResponse(false);
            ctx.set("isSuccess", false);
            ctx.setResponseBody(JsonUtils.toJson(Response.fail(jwResult.getMsg(), jwResult.getCode())));
            ctx.getResponse().setContentType("application/json; charset=utf-8");
            return null;
   }
   ctx.addZuulRequestHeader("loginUserId", jwResult.getUid());
   return null;
複製代碼

驗證成功後將用戶ID設置到請求頭中，傳遞給後端服務使用。

使用JWT必然有一個問題是Token的失效問題，我這邊失效時間設置的爲2個小時，正常的話用戶打開小程序，使用不可能連續超過2個小時，登陸的邏輯是在app.js中作的，只要下次進去token就會從新申請。不過這個也能夠調整，好比稍微長一點。

核心就是用戶的認證交給了微信，只要微信告訴咱們認證成功了，咱們就能夠本身接管會話信息了。