let your website support mobile qr code login

If your website can support QR code login, users can turn on their mobile phones for scanning, and the web page will immediately become logged in, isn't it cool? Wechat, Taobao, etc. of Tencent all support the use of mobile phones to scan QR code to log in the web version, which greatly facilitates users. This technology can not only increase the user experience of the website, It is also an important means to combine the traditional web end and the new mobile end

Mobile QR code is not a very difficult technology, but a combination of many existing mature technologies. The following figure is the architecture of the whole system:

A set of mobile QR code login system at least includes the following problems: Web terminal, browser, mobile terminal, comet server. The first three services are nothing special. Comet server is a solution to push messages from the server to the browser. If there is no comet server, Browser can't know user's mobile phone scan QR code in time and effectively

The flow of the whole system is as follows:

1. Get QR code

First of all, a QR code should be displayed on the web page. The QR code contains some data used to uniquely identify the user. These unique IDs are not session? IDs or similar, but only temporary unique IDs. This ID will then be bound with the user logged in on the mobile phone, so as to realize login in the web page

Some browser side technologies can be used to generate QR code, so as to avoid unnecessary server computing resources for the server to generate QR code pictures. For example, jQuery QRcode plug-in can be used

2. Scan QR code

This step is to scan the QR code on the mobile app, so as to read out the unique identification generated in the previous step from the QR code. Before scanning, the app should verify whether the user has logged in the account. If the mobile app has logged in, the session information has been stored on the mobile phone

3. Bind session and QR code

This step is to bind the user on the mobile phone and the non login user (temporary unique ID) on the web page, so as to realize login

4. Inform web page login success through comet server

Once the session and QR code are successfully bound, web tier (such as PHP) can inform the browser that the web page has been successfully logged in and can automatically jump to the logged in page. Because the traditional web is "request immediate response" mode, the server cannot actively notify the web page, so comet Technology is used. Icomet solution is used here

5. Comet pushes notifications to the web page

After receiving the message of Web tier, comet server will forward it to browser

6. Set cookies related to login by browser

The message received by the browser includes the cookies related to login (including session? ID, etc.), which can be planted into the browser through JavaScript code. At this time, the browser completes the login

IMCAFS

let your website support mobile qr code login

Related posts: