1. 程式人生 > >微信小程序登錄那些事

微信小程序登錄那些事

html sets href alt check 增加 解析 var format

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

小程序的登錄跟平時自己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就會重新申請。不過這個也可以調整,比如稍微長一點。

核心就是用戶的認證交給了微信,只要微信告訴我們認證成功了,我們就可以自己接管會話信息了。

歡迎加入我的知識星球,一起交流技術,免費學習猿天地的課程(http://cxytiandi.com/course)

技術分享圖片

技術分享圖片

微信小程序登錄那些事