preface

In October of 20 years, I published an article about the principle of wechat scan code implementation: “a beating interviewer: talk about the principle of wechat scan code login behind the implementation?” This article after sent out, get a good feedback, there are a number of partners to discuss, but the research is not thorough, the article also is not clear, the expression of subsequent received a WeChat friends remind, after discussing with him, I finally get, because the content is almost refactoring, so I’m going to reset to write a new implementation principle, In this thanks to a back-end feng big guy put forward different views ~

In February, I set a small goal for myself to be on the list of the Nuggets in February. I hope I can sort out the front-end knowledge and give myself a motivation while welcoming the New Year. I hope you readers will support me a lot

Writing background

I was asked this question in August, 2000. I was so confused at that time that when the interviewer asked me this question, I answered on the spot that I had never touched it and might not know it. The interviewer smiled: That’s a design question. If you knew how to do it, I wouldn’t have asked you to do it.

Me :(wry smile…) After a confident discussion with the interviewer, he received a formal thank-you note instead.

Is there anything else you want to ask me? I asked this question, and the interviewer replied that you had guessed a little bit, but you didn’t make clear the logic I wanted. Then he guided me and told me that I could study later, which was also discussed by many people.

Until November, I received a “new” thank you letter, I suddenly recalled this problem, thought, this problem can not be left alone, I do not learn, of course, will not naturally understand the principle, let’s discuss it together.

Perhaps you will encounter the same problem in the face of the dance company, then this article may be able to help you, please click three, of course, this article expressed the problem of the place, welcome readers to correct, is also a learning process, thank you ~

Basic technical principles

Users click on the wechat icon

First of all, we open a website, here to provide the address (below code for two-dimensional code, I will try not to show the article, please forgive readers)

https://passport.jd.com/new/login.aspx?
ReturnUrl=https%3A%2F%2Fwww.jd.com%2F
Copy the code

We found a wechat login button in the picture, we might as well click in to check, at the same time we open the console, checkNetworkAnd found that there was one302Status code, temporary redirection, notice there’s another one on the bottomlocationField, which is related to our redirection.

Where, the Request URL is the following code:

Request URL: https://qq.jd.com/new/wx/login.action?
ReturnUrl=https%3A%2F%2Fwww.jd.com%2F
Copy the code

The Location field displays the following code (which contains the APPID, which will be used later)

Location: https://open.weixin.qq.com/connect/qrconnect?appid=wx827225356b689e24 &state=16C44408BCCE66A99882ECB2D85A86567BAA2F274D7E27D688CE2D484A4381D35AFFAD49FD54FB2CA9C787D88B61DE8B &redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fwx%2Fcallback.action%3Fview%3Dnull%26uuid%3Dd7f9f509608744c4aa64c4116896ba 5f &response_type=code &scope=snsapi_login#wechat_redirectCopy the code

So, what does all this involve?

First, when I (the user) click the wechat icon, the page initiates a request to the JD-HTTP interface.

The interface returns data that tells the client browser which URL to jump to (referring to the QrURl of wechat) and the accompanying business parameters, which can be clearly seen from the above Location field code.

Question: click on the icon after the TWO-DIMENSIONAL code is how to appear?

Presumably, you will be as confused as I am, why I click the button, there is a QR code appeared? At this point, the emergence of the TWO-DIMENSIONAL code can relate to what relationship?

We went straight to the source code of the web page to see what was going on, and we went to the bottom of the page, and there was a great programmer who had given us comments,inlinetohtmlInside, for developer tools to use. (More on why to do this later)So, in simple terms, wechat TWO-DIMENSIONAL code picture is a wechat URL, when we click on the wechat iconicon After that, it’s going toJDThe server makes the request and then returns the URL for the QR code image.

At this point, we should pay attention to is! The above request and return have nothing to do with the wechat server

The browser polls the wechat server

At this point, there will be a more handsome audience to ask: when is it related to the wechat server?

In fact, when we display the browser side of the wechat QR code, began to have a relationship with the wechat server, the browser continues to request the wechat server, the user does not agree to login. To prove the above, let’s take a look at this screenshot below:

Among them, we found an important codewx_codethecodeAuthorizing a temporary note, without which there would be no subsequent series of operations.

From the screenshot above, we can see that the UUID keeps increasing, which is the browser polling the wechat server.

At this time, the user scan code:

  • 1. Whether the scan succeeds;
  • 2. Whether to authorize the browser to log in to the JD after the scan succeeds.
  • 3, the page to do the corresponding jump.

Note: After the scanning code is successful in the polling in 2, the temporary ticket will be included in the successful polling data for JD to send a request to its own server and return the information OAuth2.0 of the scanning code

Note that the code is returned to the browser, and the browser uses the code to request the JD server, rather than the wechat server. It is more clear when combined with the following picture:

Access_token Sequence Diagram

The second way to get code

After a wechat user scans the QR code and confirms the login, PC will jump to https://passport.yhd.com/wechat/callback.do?code=CODE&state=3d6be0a4035d839573b04816624a415e

In order to meet the needs of more customized websites, wechat documents also provide a second way to obtain code, which supports websites to embed the wechat login QR code into their own pages, and users can return the code to the website through JS after scanning the code with wechat.

Above also is a practice of some east website.

JS wechat login main purpose: the website wants the user to complete the login in the website, do not need to jump to the wechat domain login and then return, improve the fluency and success rate of wechat login. Website embedded QR code wechat login

Authorization process

When users get the code, they can exchange access_token to wechat open platform through code plus AppID and AppSecret.

The following code is the one we mentioned at the beginning, and appID will be used later

https://open.weixin.qq.com/connect/qrconnect?appid=wx827225356b689e24 &state=16C44408BCCE66A99882ECB2D85A86567BAA2F274D7E27D688CE2D484A4381D35AFFAD49FD54FB2CA9C787D88B61DE8B &redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fwx%2Fcallback.action%3Fview%3Dnull%26uuid%3Dd7f9f509608744c4aa64c4116896ba 5f &response_type=code &scope=snsapi_loginCopy the code

After obtaining the access_token, you can parse some basic information about the user, including profile picture, user name, gender, city, and so on. In this way, the entire wechat scanning login process is complete.

More detailed authorization process is not carried here, please refer to the wechat development document: Website Application Login Development Guide

Overall process flow chart

The end of the last article was too hasty, and many things were not clear. This time, when I look at this picture, I can see a lot more clearly. If this article helps you to increase your strange knowledge, please use your little finger to click three

In this paper, the reference

  • Cold blooded heart of the blog: Wechat scan code login principle analysis
  • Jorgoli: Ali interviewer: What’s the principle behind wechat and Taobao login?
  • What happened in the few seconds of scanning the wechat login code
  • Interviewer: Talk about the principle behind wechat scan code login?
  • Wechat development Document: Website application login development guide
  • OAuth2.0 Authorization Framework OAuth2.0 Core role code Scan for login

Thanks for the above big guy’s article, respect the fruits of labor, hereby put forward the original link.

The last

The output of this article is not easy, but also special thanks to the back-end big guy to provide different insights, and then about the bottom of wechat scan code that piece, when we know these basic technical principles, enough to further research. On the first day of February, I want to send you an article with “flavor”. I hope you can support me!

In the future, I will record a tutorial in B station, with the same name as nuggets ID, and the link will be put in the comment area, if you have any questions, you can correct, welcome to communicate with me ~

Friend chain ID: HearLing

Visit Chaoyi blog for reading and playing

I am 100 Chocolate. Motto: Learning is like sailing against the current. If you don’t advance, you will fall back!