手写一个仿微信登录的nodejs程序

简介: 手写一个仿微信登录的nodejs程序

前言


首先,我们看一下微信开放文档中的一张图:


微信截图_20220506130624.png


上面的一幅图中清楚地介绍了微信登录整个过程,下面对图上所示进行总结:


一、二维码的获得


  1. 用户打开登录网页后,登录网页后台根据微信OAuth2.0协议向微信开发平台请求授权登录,并传递事先在微信开发平台中审核通过的AppIDAppSecrect等参数;
  2. 微信开发平台对AppID等参数进行验证,并向登录网页后台返回二维码;
  3. 登录网页后台将二维码传送至前台进行显示;


二、微信客户端授权登录


  1. 用户使用微信客户端扫描二维码并授权登录;
  2. 微信客户端将二维码特定的uid与微信账号绑定,传送至微信开发平台;
  3. 微信开发平台验证绑定数据,调用登录网页后台的回调接口,发送授权临时票据code


三、网页后台请求数据


  1. 登录网页后台接收到code,表明微信开发平台同意数据请求;
  2. 登录网页后台根据code参数,再加上AppIDAppSecret请求微信开发平台换取access_token
  3. 微信开发平台验证参数,并返回access_token
  4. 登录网页后台收到access_token后即可进行参数分析获得用户账号数据。


实现


了解了大致原理之后,我们就开始简单实现这个逻辑。因为没有直接调用微信开发平台,所以这里只是演示效果。你也可以通过访问

https://www.maomin.club/qrcodelogin/这个我的线上网址体验一下。以下代码是主要逻辑,结合线上网址体验更容易理解。


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: 读取网页文件,用于替换关键字,相当于简易模板
 * Params:
 * sessionID - 生成的uid
 * req - 网页请求
 * res - 网页应答
 * fileName - 网页文件所在路径
 */
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: 写入JSON文件
 * Params:
 * fileName - JSON文件所在路径
 * uid - 生成的uid
 * writeData - 需要写入的JSON格式数据
 *
 */
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.");
  }
  // 同步写入文件
  let writeJSON = JSON.stringify(users);
  fs.writeFileSync(fileName, writeJSON);
};
/*
 * Description: 读取JSON文件(要返回数据,选择同步读取)
 * Params:
 * fileName - JSON文件所在路径
 * uid - 生成的uid
 *
 */
getJSONValue = function (fileName, uid) {
  let readData = null;
  // 同步读取文件
  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;
};
// 显示网站首页
app.get("/", function (req, res) {
  // 生成唯一的ID
  let uid = UUID.create();
  console.log("uid: '" + uid + "' generated.");
  // 替换网页模板内的UID关键字
  generateHTML(uid, req, res, path.join(__dirname, "/views/main.html"));
});
// 生成二维码图片并显示
app.get("/qrcode", function (req, res, next) {
  let uid = url.parse(req.url, true).query.uid;
  try {
    if (typeof uid !== "undefined") {
      // 写入二维码内的网址,微信扫描后自动跳转。下面的网址是我的网址,https://www.maomin.club/qrcodelogin ,你可以换成自己的线上网址或者本地服务器。加上后面的"/scanned?uid="
      let jumpURL = "https://www.maomin.club/qrcodelogin/scanned?uid=" + uid;
      // 生成二维码(size:图片大小, margin: 边框留白)
      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>");
  }
});
// 显示手机扫描后的确认界面
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.");
    // 获取JSON文件内对应uid的数据,更改其数据状态
    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";
    }
    // 写入JSON文件
    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>");
  }
});
// 在确认界面操作的响应
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;'>登录成功!</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>");
  }
});
// 响应主页不断的AJAX请求
app.get("/verified", function (req, res) {
  let uid = url.parse(req.url, true).query.uid;
  // normal   - 没有任何触发
  // scanned  - 已扫描
  // canceled - 已取消
  // 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);
    // 返回JSON数据用于首页AJAX操作
    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
);


看到这里,你是不是觉得代码不够全,咋就给了一个主要逻辑代码,别着急,代码满汉全席马上奉上,代码解释可以看注释哦! 以下是github网址,如果觉得对自己有用,欢迎star~


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


结语


看到这里了,你可能直接拉取代码,发现项目咋运行不了呢?效果也不跟线上网址那样。是这样的,如果你有线上服务器,可以把它部署到云端。如果没有线上服务器,你可以自己搭建一个本地局域网服务器。一定要保证手机跟电脑网页在一个IP网段上。



相关文章
|
6月前
|
JavaScript 前端开发 Serverless
函数计算只支持Node.js,我用C++写的程序怎么运行?
函数计算只支持Node.js,我用C++写的程序怎么运行?
112 1
|
6月前
|
负载均衡 JavaScript 算法
Node.js 多进程的概念、原理、优势以及如何使用多进程来提高应用程序的性能和可伸缩性
Node.js 多进程的概念、原理、优势以及如何使用多进程来提高应用程序的性能和可伸缩性
158 1
|
3月前
|
JavaScript Java Serverless
函数计算产品使用问题之如何使用Node.js编写程序
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
2月前
|
JavaScript 前端开发 Windows
第一个node程序23
第一个node程序23
|
2月前
|
JavaScript Linux 开发工具
如何将nodejs项目程序部署到阿里云服务器上
该文章详细描述了将Node.js项目部署到阿里云服务器的步骤,包括服务器环境配置、项目上传及使用PM2进行服务管理的过程。
|
3月前
|
缓存 JavaScript 前端开发
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)更新时间(2020-10-29)
|
4月前
仿美团饿了么程序,外卖人9.0外卖订餐源码(PC+微信)
仿美团饿了么程序,外卖人9.0商业版外卖订餐源码,PC+微信+WAP+短信宝,多城市多色版 非常不错的独立版外卖跑腿网站源码,喜欢的可以下载调试看看吧!!
50 0
|
6月前
|
JavaScript 前端开发
基于 Node.js 环境,使用内置 http 模块,创建 Web 服务程序
基于 Node.js 环境,使用内置 http 模块,创建 Web 服务程序
|
6月前
|
前端开发
./ 相对路径与node程序的启动目录有关
./ 相对路径与node程序的启动目录有关
32 0
|
6月前
|
小程序 前端开发 Java
基于微信小程序的电影院订票选座系统的设计与实现(程序+数据库+)
基于微信小程序的电影院订票选座系统的设计与实现(程序+数据库+)