Record an iteration of SSO of the low-code development platform - the login of the mini program embedded in the WEB and the PC-side WeChat scan code login

The WeChat applet embeds WEB login and PC-side WeChat code scanning login. It is not difficult, but it involves many modifications, including my BAAS platform, low-code development platform, and WeChat applet. Make a special note.

1. WeChat applet embedded WEB login.

Problem solved: Embed the WEB in the WeChat mini program, click the native mini program login button, and realize the mini program login. How to enable the embedded WEB to also log in at the same time?

Idea:

1. For pages that are embedded in WEB and require login to operate.

When opening this page, determine whether you are logged in. If you are not logged in, the native page is displayed and a login button appears.

If the mini program has been logged in, the embedded WEB page is displayed, and the login information (including token, user information) is passed through the URL. After the WEB page receives the parameters, the token is sent to the JWT verification interface of the BAAS platform for verification, and the verification is passed (also No verification required), perform login related processes.

2. When not logged in, click the login button to log in to the mini program and refresh the page.

2. Scan the QR code of the mini program on PC to log in

Idea:

1. Generate QR code on PC

Generate QR code: Add the scene parameter after the path of the mini program dedicated page required for scanning the QR code on the PC to log in. Scene parameters are randomly generated. Then call the BAAS platform's special interface for generating mini program QR codes to generate the url of this mini program into a mini program QR code.

Store QR code: Store the generated QR code URL locally and it will be valid for 1 hour.

When the QR code appears: When the login modal is opened, the default login method is to scan the WeChat code to log in. Determine whether there is a valid login QR code locally, and if not, generate one.

2. Scan the WeChat code and log in

Scan the QR code to log in with WeChat, and open the dedicated page for scanning the QR code to log in on the PC side of the mini program, with scene parameters.

Click to log in. This is a bit different from normal login. You need to send the scene parameters to the small program login dedicated interface of the BAAS platform.

The BAAS platform has made some modifications to the small program login interface: add the scene parameter to the final json output, and store the login data to be output in redis (convert it into a string and then store it) before outputting the data.

After logging in to the mini program, a successful login message is displayed. And the "Mini Program Exit" button is displayed. Click this button to exit from the Mini Program (this is to prevent the Mini Program from not exiting and the "Login" button appearing the next time you scan the QR code to log in)

3. Automatic login on PC

After the login QR code on the PC appears, it starts polling a dedicated islogin interface, polling once every 5 seconds (too fast and unnecessary). With parameter scene. If the interface returns false, request again after 5 seconds. If the return is not false but login information, stop polling, take the token from the login information and send it to the JWT verification interface of the BAAS platform for verification. After passing the verification, the login process is executed.

This interface is new in this iteration. It determines whether there is corresponding data in redis based on the scene. If not, return false. If there is, take the corresponding data from redis, convert it into json, and then return. Before returning, delete the corresponding data in redis.