Recently, I'm doing a code scanning login function , For this reason, I also searched on the Internet about the implementation of wechat scan login . When this function is finished , I decided to sort out the whole idea of implementation , It's convenient for you to check later, and it's also convenient for other programs with similar needs .
 To achieve code scanning login, we need to solve two problems :
1.  Without entering the user name and password , How to solve the problem of authority security ? In other words , How to let the server know that the client of scanning QR code is a legal user ?
2.  According to the user's choice in the client, the server makes the corresponding response on the web page in real time ?

First of all, let's talk about the implementation of wechat , To facilitate our understanding of the direction of thinking to solve this problem . The QR code of wechat login is actually a URL Converted to the form of two-dimensional code , After scanning the code through wechat client , It's just opening this url, The wechat QR code I captured url by https://login.weixin.qq.com/l/YdmTu30I5A== , This url Inside YdmTu30I5A== It represents the only one in this conversation ID, This is a bit like the one in the browser session id, Through this ID, Wechat can directionally feed back the confirmation results to the web page . Use wechat QR code login function , There need to be two premises : First, wechat needs to be installed on the client app. Second, users need to log in to wechat app.https://wx.qq.com/

node.js Websocket Message push

 

Why should we have these two conditions ? That's because when wechat confirms whether it is allowed to log in to the web version , Wechat needs to extract the current app The login information of and the above session ID And send it to the server , So the server receives the login information and sessionID Then you can confirm two things : One is to confirm that the user of the login client is authenticated ; Two is through session ID The server knows which web page to push the feedback results to .

So for the first point , Our key is , Before scanning, make sure that the user is an authenticated and legal user ( The authentication method can be user name + password , It can also be a secure key), When you choose whether to log in, push the result to the server , Just fine . If the user doesn't verify that it's legal , Like wechat, you can directly tell users that the QR code is not recognized or prompt them to log in first app.

With authentication , So let's solve the second problem now , How to display the feedback results on the web page in real time ? A friend might say , The client side is very simple, just send a request to the background , And on the web page ajax Send it to the server regularly to see if there is any feedback . I don't approve of this , because ajax The polling method consumes the resources of client and server ! There's another technology involved here -web Real time push technology , Using push technology can save the resources of server and client , It can push and receive any message stably . In the process of implementation, I used a third-party push service -GoEasy push , It's very easy to implement with it , Other functions in our project are also used GoEasy web Real time push service , So I'll just use it here GoEasy Push to push the login feedback result to the server . My implementation steps are very simple , What will be transmitted session ID As the communication between client and web page channel, For web subscription session ID It's worth channel, The client will verify the results and session ID Send to server side , The server side can use this channel Actively push the results to the web version ! If the client also needs to do the corresponding feedback , Then the client only needs to subscribe to this channel, Then the server will push the results to the web version and the client at the same time , After receiving the message , You can do it on demand goeasy Do what you want to do in the callback function of . About goeasy The use of push , You can refer to this blog : http://www.cnblogs.com/jishaochengduo/articles/5552645.html, in addition GoEasy There is also one on the official website of push demo:GoEasy QR code Sweep the login code demo, You can see the effect .

Hopefully that helped , If there is a misunderstanding , Please correct me .

node.js Websocket Realize scan code and QR code login ---GoEasy More articles about

  1. C(++) Websocket Realize scan code and QR code login ---GoEasy

    Recently, I'm doing a code scanning login function , For this reason, I also searched on the Internet about the implementation of wechat scan login . When this function is finished , I decided to sort out the whole idea of implementation , It's convenient for you to check later, and it's also convenient for other programs with similar needs . To achieve code scanning login, we need ...

  2. QRCode.js: Use JavaScript Generate qr code

    What is? QRCode.js? QRCode.js It's a two-dimensional code generator JavaScript library . Mainly through the acquisition of DOM The label of , Re pass HTML5 Canvas Made by drawing , Does not rely on any libraries . Basic usage ...

  3. Python Realize scan code and QR code login

    Recently, I'm doing a code scanning login function , For this reason, I also searched on the Internet about the implementation of wechat scan login . When this function is finished , I decided to sort out the whole idea of implementation , It's convenient for you to check later, and it's also convenient for other programs with similar needs . To achieve code scanning login, we need ...

  4. jQuery-qrcode.js Generative band Logo Two dimensional code

    The introduction of the file   jQuery-qrcode.js Address :https://blog-static.cnblogs.com/files/kitty-blog/jquery-qrcode.js https:// ...

  5. js Generative band log Two dimensional code (qrcodejs)

    github: qrcodejs cdn: http://static.runoob.com/assets/qrcode/qrcode.min.js #qrcode #qrcode margin: 2 ...

  6. PHP Batch generation of QR code with number at the bottom ( QR code generation + Text to image + Image stitching and merging )

    PHP Batch generation of QR code with bottom number ( QR code generation + Text to image + Image stitching and merging ) demand : Enter a number such as : cb05-0000001  to cb05-0000500 Batch build The following two-dimensional code named by number , Then compress ...

  7. Three dimensional code & QR code & One dimensional code

    Three dimensional code & QR code & One dimensional code 3D, 2D, 1D National standard for anti counterfeiting -< Technical conditions for anti-counterfeiting of structural three-dimensional code > http://www.xinhuanet.com/tech/2019-12 ...

  8. node No brain generated small program two-dimensional code map

    RT newly build createwxaqrcode.js: const request = require('request') const fs = require('fs') // eg: Generate shopping cart list ...

  9. js Generate a two-dimensional code with parameters

    Recently, there is a need to generate two-dimensional code with parameters in the project , Think about it JAVA The background generation returns to the front-end display , Later I learned to use jquery Of qrcode.js Plugins can be very realistic introduce js: require.config({ baseUrl : ...

Random recommendation

  1. POJ 3009 Curling 2.0【 With backtracking DFS】

    POJ 3009 The question : Give a w*h The map of , among 0 On behalf of the open space ,1 It's for obstacles ,2 Represents the starting point ,3 It's for the end , You can walk more than one square at a time , You can only move one space at a time that is not an obstacle , It didn't stop until it hit an obstacle , At this point, the obstacles ...

  2. CDN Service Technology Architecture

    Preface In Bowen   Interpretation of the evolution of large websites    Talking about The whole family moved static files to CDN  It's all about CDN, Let's talk about it in detail this time CDN The architecture of brief introduction CDN It's a content distribution network built on the Internet , Rely on edge servers deployed everywhere ...

  3. IE Strange report error

    IE There will be some strange error messages , Summarized below : 1. ” Missing objects ” This error report literally means that object There's something wrong with the object , After debugging, we found that there was an undefined method executing , Will report the mistake .

  4. SQL Server Using regular expressions

    SQL Server 2005 And above versions support CLR Language (C# .NET.VB.NET) Writing process . Triggers and functions , So make the regular match , Data extraction can be done in SQL Use it flexibly , Greatly improved SQL Processing strings , Text and other contents ...

  5. android--graphics

    Color class Constants |____BLACK, BLUE, CYAN Methods |____argb,rgb,alpha, red, green, blue |____parseColo ...

  6. About the Gaud map Android The map is only displayed once during development 、 The second time to open the solution of not positioning

    I'm following the Gaud official Demo Changed The first time can be located , If left The second time, it can't be positioned , Like the picture on the right stay onDestory Zhongba aMap Leave blank aMap = null; See the figure below after modification : The principle is that the second time you open it aMap Not for ...

  7. 【 turn 】NO.3、python+appium+ios, Traversing real machine elements , obtain webview

    pyhton+appium+iOS, Traverse the real machine webview. It's a real machine webview, Traverse the simulator's webview Please find another way . 1.mac Installation on ios_webkit_debug_proxy command :br ...

  8. VUE Simple property operations

    stay main.js Configure the routing and the corresponding template import Vue from 'vue' import App from './App' // introduce router route import Router from 'v ...

  9. android studio Set window colors and Fonts

    1. Set the left window color and font : Set the intermediate code editing window :

  10. iOS js And objective-c Interaction ( turn )

    Writing JavaScript When , You can use one called window The object of , Like when we want to jump from one page to another , It's going to change window.location.href The location of : In our Ob ...