Wechat applet: user wechat login process (attached: flow chart + source code)

Catalog

Preface

One 、 What is wechat applet ？

Two 、 The business process  

        1、 Logged in using wechat applet wx.login() Method

        2、 The backend uses login credentials to exchange session_key and openid

        3、 Front-end processing session_key、openid and token

Epilogue

---

Preface

          With the large-scale spread and publicity of wechat apps , Wechat apps can be seen everywhere in life . Everyone around us is using wechat app, Has a huge user base , Wechat applet is developed based on wechat “ instant APP”, No need to download and install , Just click directly in wechat to use , It fully conforms to the definition of applet when it was born “ Instant access ”, Therefore, it has developed rapidly in a very short time . So how is the login function of the applet realized , Details are provided below .

---

One 、 What is wechat applet ？

         Applets are applications that don't need to be downloaded or installed , It implements the application “ Within reach ”, The dream of , Users can scan or search to open the application

Two 、 The business process  

        The applet can easily obtain the user id provided by wechat through the login ability provided by wechat official , Quickly build the user system within the applet , The following figure shows the login process sequence ：

Login process sequence ：

The login sequence diagram will be explained in detail below ：

1. Logged in using wechat applet wx.login() Method

        After the wechat applet page or image is loaded, it will be displayed in onload() Method call wx.login() Method get user code.

The code is as follows （ Example ）： 

wx.login({
  success (res) {
    if (res.code) {
      // Initiate network request 
      wx.request({
        url: 'https://example.com/onLogin',
        // Above url The address is the wechat address provided by the backend , For front end code Used when passing in the backend .
        data: {
          code: res.code
        //res.code For adoption wx.login To get the code,code Fields are defined by the backend , The specific requirements are specified by the back end 
        }
      })
    } else {
      console.log(' Login failed ！' + res.errMsg)
    }
  }
})

2. The backend uses login credentials to exchange session_key and openid

        

         When the back-end students get code after , take code and AppID+AppSecret Connect wechat interface services in exchange for session_key and openid And backend generated token adopt code The data interaction interface is sent back to the front end .AppID and AppSecret Equivalent to the ID card of wechat applet , Access method ： Log in to the management system of wechat applet ——> Development management ——> Development and setup . As shown in the figure ：

---

 3、 Front-end processing session_key、openid and token

          Get the front end session_key、openid and token After the session_key、openid and token Deposited in the cache , Then take the following interface requests of wechat applet token For the request . The method of storing in wechat cache is as follows ：

    
this.$storageSync.set("codegetOpen", res.data.codegetOpen)
this.$storageSync.set("codegetSess", res.data.codegetSess)
this.$storageSync.set("userToken", res.data.token)

// This code segment is written in the successful callback function of the login interface ,res.data Data returned for the backend , The specific value depends on the data structure when returning 

     

         How does the interface request to carry token See the network request encapsulated by your wechat applet . Here is an unpackaged native network request method , The code is as follows ：

wx.request({
  url: 'example.php', // Just for the sample , Not a real interface address 
  data: {
       
  },
  header: {
    'content-type': 'application/json' //  The default value is 
     Authorization:this.$storageSync.get("userToken"),// Get... From the cache token And carry the request ！
  },
  success (res) {
    console.log(res.data)
  }
})

Epilogue ：

      All right. , This is the end of the wechat applet login process , by the way , I'm happy to join CSDN The big family in the community , I am a junior majoring in computer science and Technology , At present, I am interning in a listed Internet factory , My main development direction is the front-end direction , Is a junior small front-end , I will be in CSDN Share a lot of technical work on , And some problems encountered in the development process , And Solutions . If you have any questions, you can confide in me , I will reply to you when I see it