記錄--Vue PC前端掃碼登錄

来源:https://www.cnblogs.com/smileZAZ/archive/2023/01/29/17073433.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 需求描述 目前大多數PC端應用都有配套的移動端APP,如微信,淘寶等,通過使用手機APP上的掃一掃功能去掃頁面二維碼圖片進行登錄,使得用戶登錄操作更方便,安全,快捷。 思路解析 PC 掃碼原理? 掃碼登錄功能涉及到網頁端、伺服器和手機端, ...


這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助

需求描述

目前大多數PC端應用都有配套的移動端APP,如微信,淘寶等,通過使用手機APP上的掃一掃功能去掃頁面二維碼圖片進行登錄,使得用戶登錄操作更方便,安全,快捷。

思路解析

PC 掃碼原理?

掃碼登錄功能涉及到網頁端、伺服器和手機端,三端之間交互大致步驟如下:

  1. 網頁端展示二維碼,同時不斷的向服務端發送請求詢問該二維碼的狀態;
  2. 手機端掃描二維碼,讀取二維碼成功後,跳轉至確認登錄頁,若用戶確認登錄,則伺服器修改二維碼狀態,並返回用戶登錄信息;
  3. 網頁端收到伺服器端二維碼狀態改變,則跳轉登錄後頁面;
  4. 若超過一定時間用戶未操作,網頁端二維碼失效,需要重新刷新生成新的二維碼。

前端功能實現

如何生成二維碼圖片?

  • 二維碼內容是一段字元串,可以使用uuid 作為二維碼的唯一標識;
  • 使用qrcode插件 import QRCode from 'qrcode'; 把uuid變為二維碼展示給用戶
import {v4 as uuidv4} from "uuid"
import QRCode from "qrcodejs2"
 let timeStamp = new Date().getTime() // 生成時間戳,用於後臺校驗有效期
 let uuid = uuidv4()
 let content = `uid=${uid}&timeStamp=${timeStamp}`
 this.$nextTick(()=> {
     const qrcode = new QRCode(this.$refs.qrcode, {
       text: content,
       width: 180,
       height: 180,
       colorDark: "#333333",
       colorlight: "#ffffff",
       correctLevel: QRCode.correctLevel.H,
       render: "canvas"
     })
     qrcode._el.title = ''

如何控制二維碼的時效性?

使用前端計時器setInterval, 初始化有效時間effectiveTime, 倒計時失效後重新刷新二維碼

export default {
  name: "qrCode",
  data() {
    return {
      codeStatus: 1, // 1- 未掃碼 2-掃碼通過 3-過期
      effectiveTime: 30, // 有效時間
      qrCodeTimer: null // 有效時長計時器
      uid: '',
      time: ''
    };
  },

  methods: {
    // 輪詢獲取二維碼狀態
    getQcodeStatus() {
      if(!this.qsCodeTimer) {
        this.qrCodeTimer = setInterval(()=> {
          // 二維碼過期
          if(this.effectiveTime <=0) {
            this.codeStatus = 3
            clearInterval(this.qrCodeTimer)
            this.qrCodeTimer = null
            return
          }
          this.effectiveTime--
        }, 1000)
      }

    },
   
    // 刷新二維碼
    refreshCode() {
      this.codeStatus = 1
      this.effectiveTime = 30
      this.qrCodeTimer = null
      this.generateORCode()
    }
  },

前端如何獲取伺服器二維碼的狀態?

前端向服務端發送二維碼狀態查詢請求,通常使用輪詢的方式

  • 定時輪詢:間隔1s 或特定時段發送請求,通過調用setInterval(), clearInterval()來停止;
  • 長輪詢:前端判斷接收到的返回結果,若二維碼仍未被掃描,則會繼續發送查詢請求,直至狀態發生變化(失效或掃碼成功)
  • Websocket:前端在生成二維碼後,會與後端建立連接,一旦後端發現二維碼狀態變化,可直接通過建立的連接主動推送信息給前端。

使用長輪詢實現:

 // 獲取後臺狀態
    async checkQRcodeStatus() {
       const res = await checkQRcode({
         uid: this.uid,
         time: this.time
       })
       if(res && res.code == 200) {
         let codeStatus - res.codeStatus
         this.codeStatus =  codeStatus
         let loginData = res.loginData
         switch(codeStatus) {
           case 3:
              console.log("二維碼過期")
              clearInterval(this.qrCodeTimer)
              this.qrCodeTimer = null
              this.effectiveTime = 0
            break;
            case 2:
              console.log("掃碼通過")
              clearInterval(this.qrCodeTimer)
              this.qrCodeTimer = null
              this.$emit("login", loginData)
            break;
            case 1:
              console.log("未掃碼")
              this.effectiveTime > 0  && this.checkQRcodeStatus()
            break;
            default:
            break;
         }
       } 
    },

本文轉載於:

https://juejin.cn/post/7179821690686275621

如果對您有所幫助,歡迎您點個關註,我會定時更新技術文檔,大家一起討論學習,一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、Lua應用場景 游戲開發 獨立應用腳本 Web 應用腳本 擴展和資料庫插件如:MySQL Proxy 和 MySQL WorkBench 安全系統,如入侵檢測系統 教程採用Aide Lua Pro或AndLua+開發安卓應用。在學習開發安卓應用前,先學習lua的基礎課程。 二、配置手機開發環境 ...
  • 怎麼從菜鳥程式員變成架構師 一、正確理解架構師的工作 架構師一般是不會去探討業務的範疇,他是把整個項目的結構搭出來,並讓程式員去填肉(業務功能部分) ,一般架構師的好壞決定這個項目的工期與質量,現在市面上看見的架構師一般都是別人的框架直接拿來用的,所以就不存在技術提升的範疇。很少會自己搭建框架。如果 ...
  • 一 引入 考慮實現一種機械泵控制項。 機械泵是工業中通常用來製造真空的一類設備,我們在繪製界面UI時希望可以生動形象地來表述一個機械泵,下麵講述了一種簡單的實現。 二 MechanicalPumpControl 聲明一個MechanicalPumpControl的自定義控制項,它繼承自Control類。 ...
  • 前言 Keil C51 是 51 系列相容單片機 C 語言軟體開發系統,支持 8051 微控制器體繫結構的 Keil 開發工具,適合每個階段的開發人員,不管是專業的應用工程師,還是剛學習嵌入式軟體開發的學生。 本篇博主將詳細介紹嵌入式集成開發環境 Keil C51 的安裝與註冊方法,以及國產 STC ...
  • xz是什麼 高壓縮率的工具,它使用 LZMA2 壓縮演算法,生成的壓縮文件比傳統使用的 gzip、bzip2 生成的壓縮文件更小, 不過xz也有一個壞處就是壓縮時間比較長,比7z壓縮時間還長一些。不過壓縮主要用於歸檔,不介意的可以忽略。 擅長壓縮文本和日誌文件,針對這塊的壓縮率,是目前我發現效率最高的 ...
  • Docker的常用命令 幫助命令 docker version # docker版本 docker info # 顯示docker的系統信息,包括鏡像和容器的數量 docker [命令] --help # 查看某個具體的命令 鏡像命令 查看下載的所有鏡像 # docker images REPOSI ...
  • 一:背景 1. 講故事 大家都知道資料庫應用程式 它天生需要圍繞著數據文件打轉,諸如包含數據的 .mdf,事務日誌的 .ldf,很多時候深入瞭解這兩類文件的合成原理,差不多對資料庫就能理解一半了,關於 .mdf 的合成前面的文章已經有所介紹,這篇我們來聊一下 .ldf 的一些內部知識,比如 LSN。 ...
  • props props簡單使用 class Person extends React.Component { render() { return ( <ul> <li>姓名:{this.props.name}</li> <li>年齡:{this.props.age}</li> <li>性別:{thi ...
一周排行
    -Advertisement-
    Play Games
  • 前言 插件化的需求主要源於對軟體架構靈活性的追求,特別是在開發大型、複雜或需要不斷更新的軟體系統時,插件化可以提高軟體系統的可擴展性、可定製性、隔離性、安全性、可維護性、模塊化、易於升級和更新以及支持第三方開發等方面的能力,從而滿足不斷變化的業務需求和技術挑戰。 一、插件化探索 在WPF中我們想要開 ...
  • 歡迎ReaLTaiizor是一個用戶友好的、以設計為中心的.NET WinForms項目控制項庫,包含廣泛的組件。您可以使用不同的主題選項對項目進行個性化設置,並自定義用戶控制項,以使您的應用程式更加專業。 項目地址:https://github.com/Taiizor/ReaLTaiizor 步驟1: ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • Channel 是乾什麼的 The System.Threading.Channels namespace provides a set of synchronization data structures for passing data between producers and consume ...
  • efcore如何優雅的實現按年分庫按月分表 介紹 本文ShardinfCore版本 本期主角: ShardingCore 一款ef-core下高性能、輕量級針對分表分庫讀寫分離的解決方案,具有零依賴、零學習成本、零業務代碼入侵適配 距離上次發文.net相關的已經有很久了,期間一直在從事java相關的 ...
  • 前言 Spacesniffer 是一個免費的文件掃描工具,通過使用樹狀圖可視化佈局,可以立即瞭解大文件夾的位置,幫助用戶處理找到這些文件夾 當前系統C盤空間 清理後系統C盤空間 下載 Spacesniffer 下載地址:https://spacesniffer.en.softonic.com/dow ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • 一、ReZero簡介 ReZero是一款.NET中間件 : 全網唯一開源界面操作就能生成API , 可以集成到任何.NET6+ API項目,無破壞性,也可讓非.NET用戶使用exe文件 免費開源:MIT最寬鬆協議 , 一直從事開源事業十年,一直堅持開源 1.1 純ReZero開發 適合.Net Co ...
  • 一:背景 1. 講故事 停了一個月沒有更新文章了,主要是忙於寫 C#內功修煉系列的PPT,現在基本上接近尾聲,可以回頭繼續更新這段時間分析dump的一些事故報告,有朋友微信上找到我,說他們的系統出現了大量的http超時,程式不響應處理了,讓我幫忙看下怎麼回事,dump也抓到了。 二:WinDbg分析 ...
  • 開始做項目管理了(本人3年java,來到這邊之後真沒想到...),天天開會溝通整理需求,他們講話的時候忙裡偷閑整理一下常用的方法,其實語言還是有共通性的,基本上看到方法名就大概能猜出來用法。出去打水的時候看到外面太陽好好,真想在外面坐著曬太陽,回來的時候好兄弟三年前送給我的鍵盤D鍵不靈了,在打"等待 ...