我是如何實現微信小程序受權登錄以及先後端聯調的整個流程的？

   

其實，關於微信小程序受權登陸這一塊，其實官方文檔寫很仔細了，也有不少寫好的案例，也是經過閱讀了不少微信如何說全登陸的文章，也有了本身的見解和實現，全部想經過此次實踐和總結可以對整個受權登陸的的整個過程有更好、更深入的理解，下面跟我一塊兒來將微信受權這一塊的內容一步一步的剖析，從項目的建立開始到效果的演示，來看看到底怎麼回事吧！！

    學習目標

1. 小程序受權登陸流程分析
2. 實現先後端接口聯調，以及在調試中遇到的一下問題
3. 自定義登錄狀態（會話）保存到redis緩存中
4. 受權登錄流程效果演示

首先，先附上微信官方文檔的受權登陸流程圖，寫的挺仔細的了：

根據上面的流程，我作了如下的步驟分析：

1. 小程序內部經過調用wx.login()接口得到臨時登陸憑證code。wx.login()
2. 將code傳給後端（code的有效期5分鐘），後端經過code調用微信服務器 auth.code2Session 接口發送一個GET請求換取openid（用戶惟一標識），ssession_key（會話密鑰）。
3. 以後開發者服務器能夠根據用戶標識來生成自定義登陸態，用於後續業務邏輯中先後端交互時識別用戶身份。

注意：

• 會話密鑰session_key是對用戶數據進行 加密簽名 的密鑰。爲了應用自身的數據安全，開發者服務器不要把會話密鑰下發到小程序，也不該該對外提供這個密鑰。
• session_key在微信服務器有效期是30天，建議服務端緩存session_key不超過30天。
• 臨時登錄憑證只能使用一次。

經過上面的分析，咱們對受權登錄的步驟有了大致上的理解了，下面咱們從建立項目開始一步一步實現其過程：

前端

1.使用微信開發者工具工具新建一個項目：

2.在app.json裏page裏添加一行"pages/login/login",如圖：

3.接着在pages下會幫咱們建立一個文件夾login，如圖所示，裏面四個文件不用我說你們都很清楚了,由於咱們主要是爲了演示登錄這一塊，因此前端代碼很簡單（這裏值黏login.wxss和login.js的代碼了），到時候會上傳到碼雲上，主要看後臺的實現：

login.wxss代碼以下：

<form bindsubmit='doLogin'>
            <!--帳號-->
            <view class="inputView">
                <label class="loginLabel">帳號</label>
                <input name="username" value='JackLin' class="inputText" placeholder="請輸入帳號" />
            </view>
            <view class="line"></view>

            <!--密碼-->
            <view class="inputView">
                <label class="loginLabel">密碼</label>
                <input name="password" value='123456' class="inputText" password="true" placeholder="請輸入密碼" />
            </view>

            <!--按鈕-->
            <view>
                <button class="loginBtn" type="primary">普通登陸</button>
            </view>

            <view>
                <button class="goRegistBtn" type="warn" open-type='getUserInfo' bindgetuserinfo='doLogin'>微信受權登陸</button>
            </view>
        </form>
    </view>
</view>

login.js主要代碼以下：

//登陸
  doLogin: function (e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.userInfo)
    console.log(e.detail.rawData)

    wx.login({
      success:function(res){
        console.log(res)
        //獲取登陸的臨時憑證
        var code = res.code;
        //調用後端，獲取微信的session_key,secret
        wx.request({
          url: "http://localhost:8080/wxLogin?code=" + code,
          method: "POST",
          success: function(result){
            console.log(result);
            //保存用戶信息到本地緩存，能夠用做小程序的攔截器
            app.setGlobalUserInfo(e.detail.userInfo);
            wx.redirectTo({
              url: '../index/index',
            })
          }
        })
      }
    })
  },

編寫好前端代碼以後，效果以下：

後端

1. 使用IDEA建立一個Spring Boot項目，項目包基本信息以下

2.說說項目的各個類是用來什麼的，HttpUtil是用來發送請求使用，CommonResult是用來封裝結果返回的，JSONUtil是用來作對象的轉換的，RedisOperator的封裝了對Redis的基本操做，具體的代碼就不貼了，到時候會上傳到碼雲上，咱們如今只須要他們是用來幹什麼的就夠了。

3接下來咱們建立一個WXLoginController用來發送咱們的請求，源碼以下:

@RestController
public class WXLoginController {

    @Autowired
    private RedisOperator operator;

    private static final String APPID = "wx6652c2969a0a4b15";
    private static final String SECRET = "11200b84bdc1788798e51475c2e835c4";


    @PostMapping("/wxLogin")
    public JSONResult wxLogin(String code) {

        //https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

        String url = "https://api.weixin.qq.com/sns/jscode2session";
        Map<String, String> param = new HashMap<>();
        param.put("appid", APPID);
        param.put("secret", SECRET);
        param.put("js_code", code);
        param.put("grant_type", "authorization_code");

        String wxResult = HttpUtil.doGet(url, param);

        WXSessionModel model = JSONUtil.jsonToPojo(wxResult, WXSessionModel.class);

        //將session存儲redis
     operator.set("wx_login_user_session:"+model.getOpenid(),model.getSession_key(),1000*60);

        System.out.println(wxResult);
        return JSONResult.ok();
    }
}

 

4.編寫好接口以後咱們啓動項目，咱們這裏提供wxLogin者登錄接口，項目在8080端口啓動成功，咱們直接使用本地端口調試，如今咱們來實現先後段聯調，以及看看調試中遇到哪些坑...運行項目成功後，咱們點擊微信登錄按鈕，發現開發者工具的Console報了一個錯：

緣由是微信團隊在開發MINA框架對request進行了安全處理，後臺連接必須是https協議，因此咱們要設置一下，選中不校驗域名等信息。

設置好了以後，咱們從新編譯項目，再次點擊受權登錄按鈕，觀看先後臺輸出：

前臺，咱們看到了請求是成功的，返回的是200，輸出了用戶信息，也就是我本人的微信信息：

裏面有個avatarUrl,也就是個人微信頭像的具體的url地址，咱們能夠點擊地址查看一下頭像信息：

點擊地址，會顯示我微信的頭像信息，證實咱們獲取用戶信息是成功的，接着看一下後臺輸出什麼：

咱們拿到了code以後，咱們就能夠任意妄爲了，咱們經過code來調用微信服務器接口獲取用戶openid和session_key,調用微信auth.code2Session接口請求，請求地址以下（詳細見服務端API  auth.code2Session）：

GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

咱們在後端將該地址拆分，經過Map<String,String>map集合來拼接咱們的請求參數，APPID和SECRET要去你註冊的微信小程序後臺查看，而後更改過來：

//這裏的APPID和SECRECT要去你註冊的微信小程序後臺查看，而後修改過來
private static final String APPID = "wx6652c2969a0a4b15";
private static final String SECRET = "11200b84bdc1788798e51475c2e835c4";


String url = "https://api.weixin.qq.com/sns/jscode2session";
Map<String, String> param = new HashMap<>();
param.put("appid", APPID);
param.put("secret", SECRET);
param.put("js_code", code);
param.put("grant_type", "authorization_code");

String wxResult = HttpUtil.doGet(url, param);

在哪裏查看你的APPID和SECRECT呢？首先要在微信公衆平臺上  微信公衆平臺入口  登錄你的小程序帳號：

登陸以後，選擇左側的開發，點擊開發設置，就會看到咱們的APPID和SECRET,咱們將他們賦值到咱們的代碼裏。

有了APPID，SECRET,咱們就能夠拼接咱們的請求參數了，先看看微信官方文檔給給出的請求參數，看看要如何設置：

請求：

響應：

再回到咱們後端的代碼，上面已經貼出來了，咱們經過Map來拼接咱們的請求參數，包括：appid、secret、js_code、grant_type這四個請求參數，如今他們都是已知的了，接着經過 HttpUtil.doGet(url.param)；請求微信服務器接口來獲取openid和session_key,在次啓動運行後端程序，點擊登陸按鈕發送請求，觀看後臺輸出：

看到了嗎？咱們的後臺輸出了，咱們成功拿到了用戶openid和session_key了，哈哈！！拿到openid、session_key以後，咱們一個model，WXSessionModel，是用來保存openid和session的：

/**
 * @Author 林必昭
 * @Date 2019/9/21 16:37
 */
public class WXSessionModel {

    private String session_key;
    private String openid;

    public String getSession_key() {
        return session_key;
    }

    public void setSession_key(String session_key) {
        this.session_key = session_key;
    }

    public String getOpenid() {
        return openid;
    }

    public void setOpenid(String openid) {
        this.openid = openid;
    }
}

 

接下來咱們經過model將openid和session_key一同保存到redis緩存數據庫，並設置有效期爲30天，這裏會用到咱們上面提到的RedisOperator工具類，經過redis的set命令保存數據。

//將session存儲redis，設置時間爲30天
        operator.set("wx_login_user_session:"+model.getOpenid(),model.getSession_key(),60*60*24*30);

再次啓動運行項目，並點擊受權登錄發送請求，請求成功，咱們查看redis數據庫書否會保存咱們的數據：

經過查看Redis客戶端，發現數據也是存在的

到了這一步，微信受權登錄步驟咱們就大致實現了，到後面還要使用攔截器來攔截咱們的登陸請求，前端使用redirectTo實現頁面跳轉便可，由於設計到真機演示，爲了讓小夥伴看到效果，我還特意下載了iTool來實現實時桌面演示，我先用手機掃描微信預覽嗎二維碼:

掃完以後我手機顯示跟開發者工具頁面是一致的：

而後咱們在手機裏關閉受權，點擊手機右上角的三個點，會彈出一下界面，選擇關於你的註冊的小程序：

關閉受權：

關閉受權以後，咱們就能夠從新受權了，關鍵時刻到了，咱們點擊授信受權登錄，會看到彈窗要咱們受權的登錄，並將用戶的信息都顯示出來了：

 

大功告成，到這裏微信受權登錄整個過程我都一步一步的演示出來了，相信經過此次，咱們對微信受權登錄有了更好的理解，小夥伴看到那些寫的不對的地留言指出，我會實時改進哈哈，對於寫文章我本身觀點是要不就不寫，要寫就應該儘可能寫好寫細，不想忽悠忽悠就過去了，其實偶爾也不知道寫點什麼，由於技術有限也遇到不少不懂的地方，但仍是盡力去學習，今天就這樣吧，晚安了你們！