incident

This day noon, small A eats lunch, spread on oneself deck chair, want to take advantage of eat full drink enough afternoon time to enjoy alone quiet.

What shall WE do? Small A single hand operation mouse opened A strange and secret website. I was busy with a video when my browser popped up a dialog:

Please use wechat scan to log in and continue to watch



This is…

However, driven by strong curiosity, little A had no choice but to log in and continue watching. I saw him skillfully took out his phone, opened the wechat and scanned the two-dimensional code on the top, only to hear the sound of “ding”, the two-dimensional code on the web page put Buddha came to life, and directly refreshed the small A’s wechat profile picture, at the same time, the mobile phone also pops up A reminder of login.

Small A heart slightly exclaim, but did not have time to think more. Click the login button in the mobile phone interface.

At this point, the page is refreshed and restored to normal, indicating that you can continue to watch.

Surfing the Internet time always passed quickly, small A soon some tired. When he closed his eyes, he could see in his mind the scene where he had just scanned the QR code on wechat and logged on to the website. He was amazed again and began to think about the principle.

The principle of analytic

Wechat scanning code login is now one of the most common scenes in daily life, but when wechat first unveiled this function, it was amazing. It’s amazing how mobile and PC are linked together in such a clever way.

Little A remembered the concept of the front and back end that he had heard before, and knew that the data information of the account was generally placed on the server, and the front end was responsible for “requesting data” and displaying it to the back end, while the back end responded to the “requesting” of the front end. In this way, small A guess wechat login process may be:

  1. The front end of the web page requests account data from the wechat background
  2. The wechat background accepts the request of the front end of the web page, and then returns his account data
  3. The front-end of the web page receives the data and displays it in the browser

He also drew a schematic diagram with dexterity:

When small A is ready to smug, suddenly saw the desktop mobile phone. Well, if that’s all there is to it, what’s the phone for? He’s just starting to realize it’s not that simple.

He decided to re-explore the process of wechat scanning.

Process analysis

Small A opened A very simple website, it is the wechat web page version, you can directly scan the code to log in wechat.

wx.qq.com/

Small A looked at the huge two-dimensional code in the web page into meditation, he was thinking about this two-dimensional code with his identity. If not, how did it get there?

While thinking, small A opened the browser developer tools. I found this QR code in the Network monitoring list, and the corresponding link is

Login.weixin.qq.com/qrcode/4fhr…

Then, as A matter of habit, Little A tried to refresh the page several times and found that the QR code kept changing and the link kept changing

Login.weixin.qq.com/qrcode/YdDa…

Login.weixin.qq.com/qrcode/ofw5…

Login.weixin.qq.com/qrcode/gaNS…

He seems to have found something. The TWO-DIMENSIONAL code is constantly changing, and the corresponding code at the end of the link is also changing, and the change is random.

This means that each page refresh generates a random and unique QR code. This may be linked to the process of logging in on a mobile phone.

Little A seems to understand, he then picked up the phone again, skillfully using wechat to scan the TWO-DIMENSIONAL code.

“Ding”, the two-dimensional code on the web page suddenly turned into A handsome wechat profile picture. At this time, little A suddenly realized that it was only after scanning the code that the web page established A connection with his wechat account.

Before scanning, the TWO-DIMENSIONAL code on the page is just a randomly generated code unrelated to the user; When the user scans the code, the QR code is bound to the user account.

The original mobile phone scan code is such a use!

At this time, little A noticed that A reminder of “wechat login confirmation” popped up on wechat. At this time, little A carefully clicked the login button below.

As the smooth animation flashes by, little A’s account information has been displayed on the web page. Obviously, Little A’s wechat account has been logged in. Experiencing this process again, little A began to think about the specific role of wechat in the login process.

First, you need to understand a few processes:

  1. Enter the webpage login interface, randomly generate a TWO-DIMENSIONAL code;
  2. Little A scans the QR code on his mobile phone and binds his wechat account to the QR code.
  3. Little A clicks the login button in wechat of mobile phone and authorizes the webpage to log in wechat account.
  4. The web page gets the account information of small A and displays the data.

Principles of interpretation

Little A looked at the above process, combined with the initial theory guess, began to think about the whole link where went wrong.

Where does the QR code come from?

Who requested the account data from the wechat background?

Suddenly, he realized that different websites may need to obtain data through the wechat background, so each website must also have its background to send requests to the wechat background.

That way, the whole process can be explained!

  1. The website page is refreshed, and the webpage background requests authorization to log in to the wechat background;
  2. Wechat background returns the QR code required for login;
  3. After the user scans the QR code and authorizes login on the mobile phone, the wechat background informs the webpage that the background is authorized.
  4. Webpage background to wechat background request wechat account data;
  5. Wechat background return account data;
  6. Web page background to receive data and display through the browser;

Technical analysis

After thinking clearly about the whole process, Little A decided to further explore the technical realization of the whole process.

He opened the official wechat development document and found the third-party website application wechat login development guide:

Developers.weixin.qq.com/doc/oplatfo…

He went through the process and drew this picture:

The technical implementation is as follows:

First, the two-dimensional code

  1. After the user opens the website, the website background requests authorization to log in to the wechat development platform according to the wechat OAuth2.0 protocol, and transmits the parameters such as AppID and AppSecrect which have been approved in the wechat development platform in advance;
  2. The wechat development platform verifies AppID and other parameters, and returns the TWO-DIMENSIONAL code to the website background;
  3. Website background will be sent to the two-dimensional code site front-end display;

2. Authorized login of wechat client

  1. The user uses the wechat client to scan the QR code and authorize login;
  2. Wechat client will qr code specificuidBind with wechat account and send to wechat development platform;
  3. The wechat development platform verifies the binding data, invokes the callback interface of the website background, and sends authorization temporary notescode;

Third, website background request data

  1. Received by the website backgroundcode, indicating that the wechat development platform agrees to the data request;
  2. Website backgroundcodeParameter, plusAppIDandAppSecretRequest wechat development platform for exchangeaccess_token;
  3. The wechat development platform verifies the parameters and returnsaccess_token;
  4. Website background receivedaccess_tokenThen the user account data can be obtained by parameter analysis.

In the above process, a few parameters are worth explaining :(source official documentation)

AppID: The unique identifier of the application, which is obtained after the application is approved on wechat open platform

AppSecret: The application key is obtained after the application is approved on wechat open platform

Code: authorizes a temporary note, which is required when a third party obtains an Access_token through code. The timeout period of code is 10 minutes. One code can be exchanged successfully only once before the access_token becomes invalid. The temporary and one-time code ensures the security of wechat authorized login.

The whole process starts from the website background requesting authorization to log in to wechat development platform, and the ultimate goal is to obtain access_token.

Access_token: indicates that a user authorizes a third-party application to invoke an interface

After obtaining the Access_token, you can parse some basic information of the user, including profile picture, user name, gender, city, etc. In this way, the whole process of wechat scanning login is completed.

Up to this point, Little A finally had A clear understanding of the whole process of wechat scanning code login. It seems that it is not difficult, developers only need to do a good job in the back end of the web page to the wechat public platform interface call to achieve scan code login.

Stretching, small A thought of the whole process also need to consider the problem of overtime. For example, qr code timeout is not scanned, authorization timeout after QR code scanning, access_token timeout and so on.

Rubbing the temple, small A found that A simple function to achieve or need to consider many details, really is the paper come zhongjue shallow ah. Small A is determined, the next time to surf the Internet less, take some time to build A server to scan the wechat login process to see. However, you need to register a developer account on the wechat open platform, have an approved website application, and get the corresponding AppID and AppSecret.

On second thought, or sleep first.