Preface
Traditional websites generally use account and password to log in, but this method always has users forgetting their passwords. Retrieving passwords requires a series of verifications, which is quite troublesome. So I learned about scanning QR codes to log in. This method not only prevents users from forgetting their passwords, No worries, logging in is very fast. The user experience is better.
1. Effect preview
Click on the mini program image on the website to pop up the mini program code
Mini program authorization page
2. Prerequisites
1. There needs to be an online mini program.
2. Websites that require scanning QR codes to log in.
3. See the figure below for the implementation principle.
Implementation schematic
4. Implementation steps
1. Generate the mini program QR code
1.1. This step requires generating a unique string first. The length of the string cannot exceed 32 characters. It is used when generating the mini program code to determine which request is initiated. This unique character String throughout the entire life cycle.
1.2、调用微信接口获取二维码 https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=自己获取accessToken
Two parameters are needed here. One is page, which is the mini program page you want to jump to after scanning the code. The second is scene, which is the unique string generated above.
1.3 上面操作成正确，会获取二维码图片的十进制流，转成Base64直接返回到页面显示出二维码即可。
byte[] bytes = HttpRequest.post(url).body(body).execute().bodyBytes();
<img :src="'data:image/jpeg;base64,'+shareWxQrCode"/>
2. The front-end page loops to obtain the status.
The front-end uses rotation training or the background uses soket and other technologies to notify the front-end of the code scanning status, and obtains it based on the unique string generated above.
3. The user opens the mini program and scans the QR code.
The user scans the QR code and jumps to the page specified when generating the mini program. The unique credential string passed in the onLoad method of this page is obtained.
onLoad:function(query){
var that = this;
const scene = decodeURIComponent(query.scene)
}
4. Set the status to scanned code, and the status can be displayed to the user during front-end rotation. On this page, you need to obtain user information, avatar nickname, etc. According to business needs, you can also directly obtain the user's openID without this information.
wx.login({
success:(res)=>{
wx.request({
url: '你自己的后台地址',
method:"POST",
data:{
code:res.code,
scene:that.data.scene
},
success:(res)=>{
if(res.statusCode==200){
var sessionKey = res.data.result.sessionKey;
var openid = res.data.result.openid;
var json = {
'openId': openid,
'sessionKey': sessionKey,
'encryptedData': user.encryptedData,
'rawData': user.rawData,
'signature': user.signature,
'iv': user.iv,
'avatarUrl':that.data.avatarUrl,
'nickName':that.data.nickName,
'scene': that.data.scene
}
wx.request({
url: '你后台根据openId检查用户信息的URL',
method:"POST",
data:json,
success:(res)=>{
if(res.data.code==200){
wx.showToast({
title: '登录成功!',
icon: 'success',
duration: 3000
})
}
}
})
}
},fail: function (res) {
}
})
}
})
The background logic is to verify the user. According to the user's openID query database, there is a user. If not, you can directly go through the registration process. If there is such an openId, it means that the user already exists, and you can go through the login process.
The change status of the process end record is convenient for front-end rotation training status.
5. The front end can directly perform follow-up business based on the status. If the status is logged in, it will jump to the home page, etc., and prompt the user that they have scanned the QR code to log in successfully!
The above is the general code scanning login process of the mini program. You can communicate with each other if necessary!
The following are websites that use QR code scanning to log in. You can try it out:
Elk Station:
Scan the QR code to log in to DEMO https://xylsok.com/#/login