Shandong University project training (IV) -- wechat applet scans web QR code to realize web login

effect

Click to log in , Display QR code → open “ Ancient exploration ”（ This project ） Wechat applet , Scan QR code to confirm login →web Client login succeeded

Main process

Because I am mainly responsible for web Front end development , So this article only introduces web Implementation method of front end

Code

Generate random values

What I use here is crypto.getRandomValues() Method , This method can obtain secure random values that meet the requirements of cryptography , For details, please refer to ：mdn web docs Crypto.getRandomValues()

The generation of QR code uses qrcode.react Bag QRCode Components , Its value Property stores the generated random values

    //  Get random qr value 
    function getQRvalue() {
    
        const array = new Uint32Array(1);
        // Crypto.getRandomValues()  Method allows you to obtain secure random values that meet the requirements of cryptography 
        window.crypto.getRandomValues(array);
        let random = array[0].toString();
        setQrvalue(random)
        console.log(random)
        return random;
    }

Implement polling with countdown

This part needs great attention setInterval Closure attribute of ！

1. Realize the countdown of QR code display

        // qrCountdown For the remaining time on the page 
        let t = qrCountdown;
        let qrTimer = setInterval(() => {
    
            console.log("in qrtimer:", t)
            t--;
            setQrCountdown(t)
            //  To time 
            if (t < 0) {
    
                // qrTimer It's a QR code countdown timer 
                clearInterval(qrTimer)
                // timerInter Is a polling timer defined globally 
                clearInterval(timerInter)
                setLoginModalVisible(false)
                //  Reset the remaining time displayed on the page 
                setQrCountdown(60)
            }
        }, 1000)
        //  Set up qrTimer For a state 
        setQrTimer(qrTimer);

Note that there setInterval The first parameter is inside the method Can't be used directly qrCountdown To subtract from the previous value ！ Because it produces a closure , remember qrCountdown Value , So actually every time you call ,qrCountdown Are the original values , Not because setQrCountdown And change , Can cause errors

2. Implement polling timer

2.1 parameter list

function getLoginInfo(rand, stop, qrTimer) {
    }

Pass in the parameter ：

1. QR code band rand value
2. Whether not to repeat the countdown
   It mainly determines whether this method is called for the first time , If it's the first call , Then set the timer ; Otherwise, skip .
3. QR code countdown timer
   Why do I need to pass this in ？ Because it's going on setInterval when , A closure will be generated internally , Set the clear timer internally to clear the entry at the beginning getLoginInfo Method , The initial timer number （ What I set up is 0）, Instead of passing by setInterval Timer number after assignment . Because it generates a closure inside , Even if the external timer number has changed , But it will not change inside ！
   So after the QR code timer has been defined , That is, the last part of the code to realize the countdown of QR code display , Call the method , Count down the defined QR code qrTime Into this method

2.2 Concrete realization

    let timerInter;
    function getLoginInfo(rand, stop, qrTimer) {
    
        console.log("polling")
        console.log("getLoginInfo timerInter:", timerInter)
        axios({
    
            method: 'post',
            url: '/api/user/getLoginInfo',
            //  Pass in the QR code rand
            data: qs.stringify({
    
                rand
            })
        })
            .then((res) => {
    
                //  If polling is successful 
                if (res.data.success) {
    
                    console.log(res.data.data)
                    //  Set user parameters 
                    setUserInfo(res.data.data)
                    //  Clear the current polling timer 
                    clearInterval(timerInter)
                    //  Clear the QR code countdown timer 
                    clearInterval(qrTimer)
                    setHasLogined(true)
                    setLoginModalVisible(false)
                    setQrCountdown(60)
                    Modal.success({
    
                        content: " Login successful ！"
                    })
                } else {
    
                    //  Polling did not get 
                    console.log(res.data.message)
                    // stop Indicates whether this is the first poll 
                    // !stop by true Indicates that this function is called for the first time , Then set the timer 
                    if (!stop) {
    
                        //  every other 4 This method is called once per second 
                        //  And change the second parameter to true, It means that the timer does not need to be set later 
                        //  And pass the QR code countdown timer into 
                        timerInter = setInterval(() => getLoginInfo(rand, true, qrTimer), 4000)
                        //  Record the number of the polling timer , It is convenient to clear the timer externally 
                        setTimer(timerInter)
                    }
                }
            })
            .catch((error) => console.log(error))
    }

Here, the status of a polling timer number is set time, And pass setTimer（） The number of the current timer is recorded . therefore , If the user clicks to actively close the QR code box , That is to call Modal Of onCancel（） Method （ This method is outside the closure ）, You can also clear the polling timer , Abort polling .