微信小程序登錄

概況描述

後臺使用Spring boot，部分功能需要在小程序上實現。

我們的後臺是有權限驗證的，所以需要用戶登錄才能調用後端的API。所以，小程序端就需要登錄後端。

本文實現了微信小程序的登錄來完成自己服務器後端的登錄功能。

實現原理

首先，我們需要登錄小程序，用微信對其授權，然後帶着授權的狀態進行後端的登錄。我們來看一下微信官方提供給我們的時序圖：

我們看到，最開始會調用wx.login以獲取code，然後攜帶獲取的code，去請求後我們的後端的。

然後，我們需要在後端，使用獲取的code和小程序的appId以及secret，共同請求微信接口，實現授權，然後微信會返回給我們openId和session_key。

接着，我們需要將openId和session_key進行保存，就和我們原來後端的登錄做法一樣，對登錄的用戶進行session存儲，然後再登錄的時候，去session中請求，看是否存在用戶信息，以達到驗證登錄的目的。

這之後，我們就可以帶着登錄的狀態去請求後端的API了。

大致的原理知道了，我們就去實現一下登錄的過程。

實現

小程序端

首先我們要知道一點，如果要驗證你是哪個用戶，就需要微信進行授權。微信給我們提供了比較方便的解決辦法。

button中有這麼一個屬性：open-type，通過他我們可以直接去獲取用戶的微信信息。

<button open-type='getUserInfo' bindgetuserinfo='doLogin'>登錄</button>

將open-type設置爲getUserInfo，然後再使用bindgetuserinfo去觸發登錄的方法，這個函數會返回用戶的信息。

然後，就是調用wx.login()來獲取code。

    wx.login({
      success: function(res) {
        console.log(res)
      }
    })

當微信端登錄成功的時候，我們就會獲取到相應的code，這是用戶的臨時登錄憑證，每次登錄都會不同，過一段時間也會失效：

接着帶着code去請求我們的後端：

    wx.login({
      success: function(res) {
        console.log(res)
        
        // 獲取登錄的臨時憑證
        var code = res.code;

        // 調用後臺，獲取session_key,openid
        wx.request({
          url: 'http://localhost:8080/user/wxLogin?code=' + code,
          method: 'POST',  
        })
      }
    })

好了，現在我們需要一個支撐微信小程序登錄的後臺了。

後端

控制器：

    /**
     * 微信登錄
     * @param code  登錄臨時憑證code
     */
    @PostMapping("/wxLogin")
    public voidwxLogin(String code) {
        userService.wxLogin(code);
    }

service:

    public void wxLogin(String code) {
        String url = "https://api.weixin.qq.com/sns/jscode2session?" +
                "appid=APPID&" +
                "secret=SERECT&" +
                "js_code=" + code + "&" +
                "grant_type=authorization_code";

        logger.debug("請求微信api，進行登錄授權，獲取session_key和openid");
        String jsonString = restTemplate.getForObject(url, String.class);
        JSONObject jsonObject = JSONObject.parseObject(jsonString);

        logger.debug("獲取openid，進行存儲");
        String openid = jsonObject.get("openid").toString();
        httpSession.setAttribute("openid", openid);
    }

因爲這裏，對於同一個用戶而言，openid是相同的，所以，當下次再來請求的時候，我們只需要獲取它，就能判斷是否登錄了。

後面，對於其他請求的處理，還需要涉及到攔截器，但是原理和之前一樣，這裏就不做贅述。

---

官方參考：
https://developers.weixin.qq....
https://developers.weixin.qq....
https://developers.weixin.qq....
https://developers.weixin.qq....
https://developers.weixin.qq....