Hand-write a Nodejs program that imitates WeChat login

[[357291]]

Preface

First, let’s take a look at a picture from WeChat’s open documentation:

The picture above clearly introduces the entire WeChat login process. The following is a summary of what is shown in the picture:

1. How to obtain the QR code

1. After the user opens the login webpage, the login webpage backend requests authorization to log in from the WeChat development platform according to the WeChat OAuth2.0 protocol, and passes parameters such as AppID and AppSecrect that have been reviewed and approved in the WeChat development platform in advance;
2. The WeChat development platform verifies the AppID and other parameters, and returns a QR code to the login webpage backend;
3. Log in to the backend of the web page and transmit the QR code to the frontend for display;

2. WeChat client authorization login

1. The user uses the WeChat client to scan the QR code and authorize login;
2. The WeChat client binds the QR code-specific UID to the WeChat account and sends it to the WeChat development platform;
3. The WeChat development platform verifies the binding data, calls the callback interface of the login webpage background, and sends the authorization temporary ticket code;

3. Web page background request data

1. The code is received after logging into the backend of the webpage, indicating that the WeChat development platform agrees to the data request;
2. Log in to the backend of the web page and request the WeChat development platform to exchange access_token based on the code parameter, plus AppID and AppSecret;
3. The WeChat development platform verifies the parameters and returns access_token;
4. After logging in to the webpage background and receiving the access_token, you can perform parameter analysis to obtain the user account data.

accomplish

After understanding the general principle, we will start to implement this logic. Because the WeChat development platform is not directly called, this is just a demonstration effect. You can also visit:

 https://www.maomin.club/qrcodelogin/

This is my online website experience. The following code is the main logic, which is easier to understand when combined with the online website experience.

 let http = require( "http" );
 let express = require( "express" );
 let qrcode = require( "qr-image" );
 let app = express();
 let path = require( "path" );
 let server = http.createServer(app);
 let url = require( "url" );
 let fs = require( "fs" );
 let UUID = require( "uuid-js" );
 let generateHTML = null ; 
 
 app.use(express. static ( "./public" )); 
 
 /*
 * Description: Read web page files to replace keywords, equivalent to a simple template
 * Params:
 * sessionID - generated uid
 * req - web page request
 * res - web page response
 * fileName - the path where the web page file is located
 */
 generateHTML = function (sessionID, req, res, fileName) {
  fs.readFile(fileName, "UTF-8" , function (err, data) {
 if (!err) {
      data = data.replace (/SESSION_UID/g, sessionID);
 res.writeHead(200, {
 "Content-Type" : "text/html; charset=UTF-8" ,
 });
 res.end (data);
 } else {
 console.log(err); 
 
 res.writeHead(404, {
 "Content-Type" : "text/html; charset=UTF-8" ,
 });
 res.end ();
 }
 });
 }; 
 
 /*
 * Description: Write to JSON file
 * Params:
 * fileName - the path where the JSON file is located
 * uid - generated uid
 * writeData - JSON format data to be written
 *
 */
 let setJSONValue = function (fileName, uid, writeData) {
  let data = fs.readFileSync(fileName); 
 
  let users = JSON.parse(data.toString());
 let addFlag = true ;
  let delFlag = writeData === null ; 
 
 for (let i = 0; i < users.data.length; i++) {
    if (users.data[i].uid === uid) {
 addFlag = false ; 
 
 if (delFlag) {
        users.data.splice(i, 1);
 } else {
        users.data[i].status = writeData.status; 
 
 console.log(
 "writeJSON: " + JSON.stringify(users.data[i]) + " modified."  
 );
 }
 }
 } 
 
 if (addFlag) {
    users.data.push(writeData);
    console.log( "writeJSON: " + JSON.stringify(writeData) + "inserted." );
 } 
 
 // Synchronously write to the file
  let writeJSON = JSON.stringify(users);
  fs.writeFileSync(fileName, writeJSON);
 }; 
 
 /*
 * Description: Read JSON file (to return data, select synchronous reading)
 * Params:
 * fileName - the path where the JSON file is located
 * uid - generated uid
 *
 */
 getJSONValue = function (fileName, uid) {
 let readData = null ; 
 
 // Read the file synchronously
  let data = fs.readFileSync(fileName); 
 
  let users = JSON.parse(data.toString()); 
 
 for (let i = 0; i < users.data.length; i++) {
    if (users.data[i].uid === uid) {
      readData = JSON.stringify(users.data[i]);
 break;
 }
 } 
 
 return readData;
 }; 
 
 // Display the homepage of the website
 app.get( "/" , function (req, res) {
 // Generate a unique ID
 let uid = UUID.create ();
  console.log( "uid: '" + uid + "' generated." );
 //Replace the UID keyword in the web page template
  generateHTML(uid, req, res, path. join (__dirname, "/views/main.html" ));
 }); 
 
 // Generate a QR code image and display it
 app.get( "/qrcode" , function (req, res, next ) {
  let uid = url.parse(req.url, true ).query.uid; 
 
 try {
    if (typeof uid !== "undefined" ) {
 //Write the URL in the QR code, and it will automatically jump after WeChat scans it. The URL below is my website, https://www.maomin.club/qrcodelogin, you can change it to your own online website or local server. Add the following "/scanned?uid="  
      let jumpURL = "https://www.maomin.club/qrcodelogin/scanned?uid=" + uid;
 // Generate QR code ( size : image size, margin: border blank)
      let img = qrcode.image(jumpURL, { size : 6, margin: 2 });
      res.writeHead(200, { "Content-Type" : "image/png" });
 img.pipe(res);
 } else {
      res.writeHead(414, { "Content-Type" : "text/html" });
      res. end ( "<h1>414 Request-URI Too Large</h1>" );
 }
 } catch (e) {
    res.writeHead(414, { "Content-Type" : "text/html" });
    res. end ( "<h1>414 Request-URI Too Large</h1>" );
 }
 }); 
 
 // Display the confirmation interface after the mobile phone scans
 app.get( "/scanned" , function (req, res) {
  let uid = url.parse(req.url, true ).query.uid; 
 
  if (typeof uid !== "undefined" ) {
    generateHTML(uid, req, res, path. join (__dirname, "/views/confirm.html" )); 
 
    console.log( "uid: '" + uid + "' scanned." ); 
 
 // Get the data corresponding to uid in the JSON file and change its data status
    let jsonData = getJSONValue(path. join (__dirname, "/bin/data.json" ), uid); 
 
 if (jsonData === null ) {
 jsonData = {
 uid: uid,
 status: "scanned" ,
 name : "USER" ,
 };
 } else {
      jsonData = JSON.parse(jsonData);
      jsonData.status = "scanned" ;
 } 
 
 // Write to JSON file
    setJSONValue( path.join (__dirname, "/bin/data.json" ), uid, jsonData);
 } else {
    res.writeHead(414, { "Content-Type" : "text/html" });
    res. end ( "<h1>414 Request-URI Too Large</h1>" );
 }
 }); 
 
 // Response to the confirmation interface operation
 app.get( "/confirmed" , function (req, res) {
  let uid = url.parse(req.url, true ).query.uid;
  let operate = url.parse(req.url, true ).query.operate; 
 
  if (typeof uid !== "undefined" ) {
    console.log( "uid: '" + uid + "' " + operate); 
 
    let jsonData = getJSONValue(path. join (__dirname, "/bin/data.json" ), uid);
    let status = operate === "confirm" ? "verified" : "canceled" ; 
 
 if (jsonData === null ) {
 jsonData = {
 uid: uid,
 status: status,
 name : "USER" ,
 };
 } else {
      jsonData = JSON.parse(jsonData);
      jsonData.status = status;
 } 
 
    setJSONValue( path.join (__dirname, "/bin/data.json" ), uid, jsonData); 
 
    if (status === "verified" ) {
      res.writeHead(200, { "Content-Type" : "text/html" });
 res.end ( "<h1 style='textAlign:center;'>Login successful!</h1>" );
 } else {
      res.writeHead(200, { "Content-Type" : "text/html" });
      res. end ( "<h1 style='textAlign:center;'>Canceled!</h1>" );
 }
 } else {
    res.writeHead(414, { "Content-Type" : "text/html" });
    res. end ( "<h1 style='textAlign:center;'>414 Request-URI Too Large</h1>" );
 }
 }); 
 
 // Respond to continuous AJAX requests from the home page
 app.get( "/verified" , function (req, res) {
  let uid = url.parse(req.url, true ).query.uid; 
 
 // normal - nothing is triggered
 // scanned - scanned
 // canceled - canceled
 // verified - verified
 let dataStatus = {
 cmd: "normal" ,
 user : "" ,
 }; 
 
  console.log( "uid: '" + uid + "' query ..." ); 
 
  if (typeof uid !== "undefined" ) {
    let userData = getJSONValue(path. join (__dirname, "/bin/data.json" ), uid); 
 
 // Return JSON data for home page AJAX operation
 if (userData !== null ) {
      userData = JSON.parse(userData);
      dataStatus.cmd = userData.status;
      dataStatus.user = userData.name ;
 }
 } 
 
  res.end (JSON.stringify(dataStatus));
 }); 
 
 server.listen(4000);
 console.log(
 "Express server listening on port %d in %s mode" ,
 server.address().port,
 app.settings.env
 );

Do you think the code is not complete enough? Why only a main logic code is given? Don't worry, the full code will be provided immediately. You can see the comments for code explanation! The following is the github URL. If you think it is useful to you, you are welcome to star~

 https://github.com/maomincoding/qrcodelogin.git

Conclusion

After reading this, you may directly pull the code and find that the project cannot run? The effect is not the same as the online website. It is like this. If you have an online server, you can deploy it to the cloud. If you don’t have an online server, you can build a local LAN server yourself. Make sure that the mobile phone and the computer web page are on the same IP segment.

The effect diagram is as follows:

Login web page

Login authorization page