The function of using wechat applet to scan code to log in to the PC web of the system

1、 Project description ：

project PC End （vue Single page application , Fore and aft end separation ）、 Mobile （ Wechat applet ） Share the same Java Springboot service . The applet can directly get the wechat mobile number to log in , No password required , Because the system recognizes that the password is random , So I'm logging in PC End time , Users don't know the password , Realization PC At present, there are three schemes for client login ：

1） Because you can log in to wechat applet directly , So you can reset the password in the applet , So you can do it PC End logged in , It's simpler .

2） Use wechat open platform third-party website oauth2 Authorized login , It's also possible , However, you need to apply for wechat website application , A little bit of a problem .

3） At present, the fastest way to scan the code for login , Is to use the logged in applet to scan PC Login QR code to authenticate , This is the fastest code scanning login PC End of the way .

2、 Realize the idea ：

1） The small program needs to realize a function of turning on the camera to scan the code ;2）PC The terminal login interface generates an applet scanning QR code （ Unique random value ）;3） Use the applet to scan this QR code .4） The principle is ：PC The end uses a random value （sid） While generating a QR code , Connecting to the back end websocket service ; When scanning the code, the applet requests the background controller Interface and carry this random value （sid）, Get the current applet login token, recycling sid Access to this PC End connected websocket service , take token Send to PC client , such PC You can receive this token, Reuse and save token, In this way, the small program scanning code login PC End of the way .

3、 Specific implementation code ：

1）PC Generate and connect the QR code of terminal login to the backend websoc