Website application WeChat login-embedded QR code-development problem record

1. Problem background

The system previously only had password login and SMS verification code login. Two days ago, I accessed WeChat scan code to log in . This is WeChat’s official document: Website Application WeChat Login Development Guide

At the beginning, we used the first way to obtain the code , which was to open the following link on the PC: https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect .
There is nothing to say about this method. Configure the redirect_uri, and then jump to the current page or jump to a new page. We used refresh the current page. Many websites also use this method for WeChat login

However, later products require us to use the second method of obtaining the code , which is to embed the " WeChat login QR code into your own page ". The reason is that "the first method, after the user clicks, they find that they clicked wrongly, and they have to click on the upper left corner of the browser." You can't go back until the horns return."

When using the embedded WeChat QR code, I encountered several problems. Please record them. These issues "happen" are not clearly stated in the document.

2. style="white" is invalid

The generated QR code defaults to black description text.
If our background color is dark, we need to configure it to white description text.
Insert image description here
We originally switched from the first method to the second method, so we directly filled in the link parameter comparison of the first method into the second method:

        var obj = new WxLogin({
    
    
            self_redirect: false,
            id: "login_container",
            appid: "你的用户id",
            scope: "snsapi_login",
            redirect_uri: "你的跳转地址",
            state: "STATE#wechat_redirect",
            style: "white",
            href: ""
        });

We intend to configure a white text description, but after running the above code, even if style: "white" is configured, the QR code that comes out is still a black text description.

From the WeChat web authorization document , we can know that #wechat_redirect is an independent parameter. Therefore, after modifying the above configuration, normal white text description can appear.

        var obj = new WxLogin({
    
    
            self_redirect: false,
            id: "login_container",
            appid: "你的用户id",
            scope: "snsapi_login",
            redirect_uri: "你的跳转地址",
            state: "STATE",
            style: "white",
            href: ""
        });

3. self_redirect=false redirection is prohibited

Using the self_redirect:false configuration, after scanning the QR code on the mobile phone WeChat to confirm, it is found that there is no response from Google Chrome, and the upper right corner shows that redirection is prohibited.

After searching on the Internet, many people said to modify the source code of wxLogin.js, but it seems that it should not be so low.

Finally, when I scanned the WeChat code to log in to the local test , the address bar popped up that redirection was disabled. I saw in this article that it was caused by a cross-domain problem, so I tried it and it was solved perfectly. I tested it locally, the test address is 192.168.x.xxx, and the configured scan code domain name is www.xxx.com.

4. href uses base64

The href field document says that you need to use the css file address to override the style:
Insert image description here

But I saw many people saying that you can use base64, and I don’t know where they knew it. The process of using base64 is as follows:

① There is a set of styles:

.impowerBox #wx_default_tip p:nth-last-child(1)  { display: none; }

② Convert to base64:
base64.us
Insert image description here
Base64 encoding or decoding result: LmltcG93ZXJCb3ggI3d4X2RlZmF1bHRfdGlwIHA6bnRoLWxhc3QtY2hpbGQoMSkgIHsgZGlzcGxheTogbm9uZTsgfQ==

③ Write to herf field:

The format is as follows:

href: "data:text/css;base64,后面是base串"

So the final configuration of the above overlay style is:

 href: "data:text/css;base64,LmltcG93ZXJCb3ggI3d4X2RlZmF1bHRfdGlwIHA6bnRoLWxhc3QtY2hpbGQoMSkgIHsgZGlzcGxheTogbm9uZTsgfQ=="

5. QR code expiration time

The QR code produced through the embedded method of new WxLogin will be automatically updated and does not require developers to refresh regularly.

How long is the WeChat login QR code for website applications valid for? Will it be automatically refreshed? It is mentioned here that it will be updated in 5 minutes.
Insert image description here
I have not tried whether it is 5 minutes specifically. But it will indeed be updated after a while. For example, when we first cleared F12, we copied the QR code image:

https://open.weixin.qq.com/connect/qrcode/0718bOKc3Aabml2S

After a few minutes, you will find that the QR code image address seen through f12 becomes

https://open.weixin.qq.com/connect/qrcode/031wng7X0tyNFa1Z

If you have nothing to do and keep staring at the QR code, you will find that it will flash by itself after a while.