Table of contents
foreword
1. What are WeChat Mini Programs?
2. Business process
1. Use the wx.login() method of the WeChat applet to log in
2. The backend uses login credentials in exchange for session_key and openid
3. Front-end processing session_key, openid and token
Epilogue
foreword
With the large-scale rollout and publicity of WeChat Mini Programs, the shadow of WeChat Mini Programs can be seen everywhere in life. Everyone around us is using the WeChat app, which has a huge user base. The WeChat applet is an "instant APP" developed based on WeChat. It does not need to be downloaded and installed. It can be used by clicking directly in WeChat. It fully complies with the definition of "use and go" when the applet was born, so it has developed rapidly in a short period of time. So how the login function of the applet is realized, the following will introduce in detail.
1. What are WeChat Mini Programs?
A small program is an application that can be used without downloading and installing. It realizes the dream of an application "at your fingertips". Users can open the application by scanning or searching.
2. Business process
The Mini Program can easily obtain the user ID provided by WeChat through the login capability provided by WeChat, and quickly establish a user system in the Mini Program. The following figure shows the login process sequence:
Login process timing:
The following is a detailed explanation of the login sequence diagram:
1. Use the wx.login() method of WeChat applet login
After the WeChat applet page or image is loaded, call the wx.login() method in the onload() method to obtain the user code.
The code is as follows (example):
wx.login({
success (res) {
if (res.code) {
//发起网络请求
wx.request({
url: 'https://example.com/onLogin',
//上述url地址为后端提供的微信地址，用于前端将code传入后端时所用。
data: {
code: res.code
//res.code为通过wx.login拿到的code，code字段由后端定义，具体要求由后端规定
}
})
} else {
console.log('登录失败！' + res.errMsg)
}
}
})2. The backend uses login credentials in exchange for session_key and openid
After the back-end students get the code, connect the code and AppID+AppSecret to the WeChat interface service in exchange for session_key and openid and the token generated by the back-end and send it back to the front-end through the code data interaction interface. AppID and AppSecret are equivalent to the ID card of the WeChat Mini Program, and the method of obtaining it is: log in to the management system of the WeChat Mini Program --> Development Management --> Development Settings. as the picture shows:
3. Front-end processing session_key, openid and token
After the front end gets the session_key, openid and token, it stores the session_key, openid and token in the cache, and then requests the subsequent interface of the WeChat applet with the token. The method of storing in the 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)
//该代码段写在登录接口成功的回调函数里，res.data为后端返回的数据，具体根据返回时的数据结构不同取值How the interface requests to carry the token depends on the network request encapsulated by your WeChat applet. Here is an unencapsulated native network request method, the code is as follows:
wx.request({
url: 'example.php', //仅为示例，并非真实的接口地址
data: {
},
header: {
'content-type': 'application/json' // 默认值
Authorization:this.$storageSync.get("userToken"),//从缓存中拿到token并携带请求！
},
success (res) {
console.log(res.data)
}
})Epilogue:
Well, the login process of the WeChat applet this time is over here. By the way, I am very happy to join the big family of the CSDN community. I am a junior computer science and technology student at the university. I am currently working in a listed Internet company. Internship, my main development direction is the front-end direction. I am a junior small front-end. In the future, I will share a lot of technical work on CSDN, as well as some problems encountered in the development process and solutions. If you have any questions, you can private message me, I will definitely reply you when I see it.