Express實戰個人訂閱號實現網站登錄

AJAX 是Asynchronous JavaScript And XML的縮寫。它不是一種編程語言。它是一種基於HTML、CSS、JavaScript 和 XML，讓開發更好、更快和更有互動的 Web 應用的技術。什麼是ajax 認識前後端交互前後端交互就是前端與後端的一種通訊方式，主要使用 ...

今天我們來實現一個使用個人訂閱號實現網站的功能，後端使用的是 express 。其它框架原理基本一致，只是定義路由或返迴響應數據部分代碼跟 express 有所出入。先來一波效果圖：

發送登錄關鍵字，獲取驗證碼

輸入驗證碼，進行驗證

1. 前言

20 年 3 月在掘金寫過一篇文章，介紹了使用 express 開發微信公眾號的案例：原文地址。當時使用的 nodejs 版本還是 v8.x，現如今，nodejs 的最新長期穩定版已經來到了 v18.16.0, 新特性嘗鮮版更是已經到了 v20.1.0。

nodejs版本

不得不感慨時間之飛逝，nodejs 的版本升級之路見證了技術的飛速進步，也見證了我髮際線的飛速退後。

......

2. 為何要用訂閱號去登錄

看了看掘金，發現掘金的登錄註冊分為兩種：

手機號驗證碼註冊
第三方登錄(支持微信掃碼、微博、Github)

企業站來說，這種方式固然好，給了用戶提供了更多的選擇。

但是對於個人站點，這種方式就不太友好了，因為：

手機號接收驗證碼註冊：1 條簡訊 1 毛錢，10 條就是 1 塊，100 條就能吃個豪華早餐了

接入微信開放平臺是需要企業資質的。我一個打工人，上哪兒去搞企業資質？這就是一道坎，更別說後續接入的繁瑣流程了。

Github 倒是不需要，不過接入也麻煩，棄之！

微博？用戶沒有微博賬號是不是還得去註冊個微博賬號？棄！

那就普通的註冊吧？填寫用戶名、密碼、確認密碼、輸入郵箱，郵箱驗證碼確認？棄！

那麼，它來了！訂閱號註冊免費，花極少的時間去接入

用戶只需關註公眾號，反手輸入個登錄，回車！Ctrl + CV。欸，很快啊，登錄成功！

相對於傳統的註冊填一大堆資料 + 確認密碼 + 驗證碼，孰好孰壞，熟快熟慢，一試便知。

而且，且看下圖，它對於保護用戶隱私來說，是極好的，因為開發者只能拿到用戶的 OpenID，頭像和昵稱都不給你！

用戶信息只能拿到OpenID

不過，有 OpenID 就足夠了，畢竟它對於當前公眾號來說，是 唯一的

唯一的OpenID

3. 公眾號後臺配置

完整的接入指南詳見: https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Access_Overview.html

進入微信公眾平臺

設置與開發 -> 基本配置 -> 公眾號開發信息 -> IP 白名單中配置你的伺服器 IP

設置與開發 -> 基本配置 -> 伺服器配置(未開啟的需要先開啟)

URL 是你的後端服務對應驗證授權的介面地址，也就是你後端服務部署後綁定了功能變數名稱的介面地址。舉例： https://www.xxx.com/wechat
Token 這塊的 Token 按照平臺提示的規則自定義即可，註意，需要和上面代碼中的 Token 相對應，不然會驗證不成功。
EncodingAESKey 是消息加解密密鑰，這個可以隨機生成，也可以自定義
消息加解密方式 選擇明文模式即可

填寫好上面這些內容之後，我們先不必急著點擊提交，因為這個時候服務還沒部署，伺服器是無法正常響應微信伺服器的驗證請求，必然會提交失敗。

且看下文

4. 登錄流程梳理

我們簡單的梳理一下登錄流程：

首先是需要在網站需要登錄的地方，放置一個公眾號的二維碼，並用醒目的文字給用戶提示：關註公眾號後發送 "登錄" ，獲取登錄所需要的驗證碼
後臺接收到用戶請求，判斷用戶發送的內容的確是 "登錄" 關鍵字，返回一個驗證碼給用戶，並將當前驗證碼存起來
用戶輸入驗證碼，後臺根據存起來的驗證碼進行驗證，驗證成功，返回登錄成功，否則，登錄失敗

5. 定義服務端路由，處理驗證邏輯及服務端部署

5.1 定義授權驗證介面

主要是驗證消息的確來自微信伺服器

import express from "express";
import jsSHA from "jssha";
const router = express.Router();
router.get("/wechat_mp", (req, res, next) => {
  const token = "這裡是自定義Token，可自定義，內容規則詳見下文";
  //1.獲取微信伺服器Get請求的參數 signature、timestamp、nonce、echostr
  const { signature, timestamp, nonce, echostr } = req.query;

  //2.將token、timestamp、nonce三個參數進行字典序排序
  const array = [token, timestamp, nonce].sort();

  //3.將三個參數字元串拼接成一個字元串進行sha1加密
  const tempStr = array.join("");
  const shaObj = new jsSHA("SHA-1", "TEXT");
  shaObj.update(tempStr);
  const scyptoString = shaObj.getHash("HEX");

  //4.開發者獲得加密後的字元串可與signature對比，標識該請求來源於微信
  if (signature === scyptoString) {
    console.log("驗證成功");
    res.send(echostr);
  } else {
    console.log("驗證失敗");
    res.send("驗證失敗");
  }
});

5.2 處理用戶 "登錄" 消息

接下來我們定義用戶發送消息的邏輯：

當用戶發送文本消息給公眾號的時候，微信伺服器會將用戶發送的消息以 XML格式 的參數去請求這個介面，只不過這個時候，我們需要通過 POST 請求來接收參數。

先上代碼：

定義POST介面

import { parseString } from "xml2js";
import myCache from "../store";
/**
 * 隨機6位驗證碼
 */
function randomCode() {
  return Math.random().toString().slice(-6);
}
/**
 * 回覆文字消息封裝
 */
function sendTextMsg(toUser, fromUser, content) {
  let resultXml = "<xml><ToUserName><![CDATA[" + fromUser + "]]></ToUserName>";
  resultXml += "<FromUserName><![CDATA[" + toUser + "]]></FromUserName>";
  resultXml += "<CreateTime>" + new Date().getTime() + "</CreateTime>";
  resultXml += "<MsgType><![CDATA[text]]></MsgType>";
  resultXml += "<Content><![CDATA[" + content + "]]></Content></xml>";
  return resultXml;
}
router.post("/wechat_mp", function (req, res) {
  var buffer = [];
  req.on("data", function (data) {
    buffer.push(data);
  });
  // 內容接收完畢
  req.on("end", function () {
    var msgXml = Buffer.concat(buffer).toString("utf-8");
    parseString(msgXml, { explicitArray: false }, function (err, result) {
      if (err) throw err;
      result = result.xml;
      const { ToUserName, FromUserName, MsgType, Content } = result;
      if (MsgType === "text" && Content === "登錄") {
        const code = randomCode();
        // 這裡的FromUserName就是用戶的OpenID
        myCache.set(code, FromUserName, 1 * 60 * 5);
        const sendXml = sendTextMsg(
          ToUserName,
          FromUserName,
          `您的登錄驗證碼是：${code}  ,  有效期為5分鐘`
        );
        res.send(sendXml);
      }
    });
  });
});

store/index.js

import NodeCache from "node-cache";
const myCache = new NodeCache();
export default myCache;

代碼解釋：

XML 解析：可以通過安裝 xml2js 這個庫來解析 XML 格式的參數
接化發：檢測到用戶發送 消息類型 為 text 且內容為 登錄 關鍵字的時候，我們去生成一個 6位隨機驗證碼 ，再將驗證碼和用戶的 OpenID 以 key（code）、value(OpenId) 的格式存入存入 node-cache 中，並設置有效期為 5分鐘，同時將隨機驗證碼發送給用戶。

發送登錄關鍵字，獲取驗證碼

5.3 處理網站登錄邏輯

上一步，用戶已經在微信公眾號上獲取到了隨機驗證碼，現在只需要在網站需要登錄的地方輸入驗證碼，調用驗證碼校驗介面即可進行校驗。

輸入驗證碼，進行驗證

定義驗證碼校驗介面

import myCache from "../store";
router.get("/verify", async function (req, res) {
  const { code } = req.query;
  const OpenID = myCache.get(code);
  if (OpenID) {
    const token = "使用OpenID進行jwt鑒權頒發Token";
    res.json({
      code: 200,
      data: { token },
    });
  } else {
    res.json({
      code: 400,
      msg: "您輸入的驗證碼有誤或已過期，請重新輸入！-_-",
    });
  }
});

代碼解釋：

根據用戶輸入的驗證碼，去 node-cache 中獲取 OpenID，如果存在，則說明驗證碼正確，jwt 鑒權頒發 Token。反之，校驗失敗。

驗證碼校驗成功後，通過唯一的 OpenID 和自定義的 secret 給用戶頒發 Token，用戶再次訪問網站的時候，只需要攜帶 Token 即可進行鑒權。

關於 jwt 鑒權概念、流程及使用，大家可以參考這條 AI 問答分享：


我在ChatGPTer(https://ai.iiter.cn)網站上創建了一個AI對話分享，快來看看吧！

「jwt鑒權概念、流程」

鏈接：https://ai.iiter.cn/#/share/6465c5a2e82a696c417bbfa9

同時，也歡迎大家自己進行 AI 問答： https://ai.iiter.cn

5.4 部署服務

服務部署這塊大家可以參考我之前寫的一篇傻瓜式部署文章：寶塔面板結合 pm2 進程管理工具部署前端項目

當然，您也可以使用自己順手的部署方式

5.5 提交公眾號配置

服務部署成功後，回到我們的 公眾號後臺配置 部分，點擊提交即可

結語

至此，我們的個人訂閱號登錄功能就已經完成了，相信基於以上，大家都可以很快的去做出一個網站登錄功能出來

而且在給用戶提供服務的同時，可以直接將用戶引導至自己的公眾號上。不管是後面對網站的更新記錄，還是一些重要的通知，都可以通過公眾號進行消息推送，一舉兩得

好了，今天的文章分享就到這裡了，如果對大家有所幫助的話，希望您不要吝嗇手中的贊呦~

正式給大家介紹一下：

基於 OpenAI 的 API 開發的一款 ChatGPT 網站，模型是gpt-3.5-turbo，使用的是本篇文章的同款登錄方式，歡迎大家體驗

免費！免費！免費！https://ai.iiter.cn