Ausführliche Erklärung zur Implementierung der QR-Code-Anmeldefunktion auf der Vue-PC-Seite

Dieser Artikel vermittelt Ihnen relevantes Wissen über Vue. Er stellt hauptsächlich das Prinzip der Implementierung des Code-Scannens auf der PC-Seite vor. Wie erstelle ich ein QR-Code-Bild? Wie verwende ich Vue, um die Front-End-QR-Code-Anmeldung zu implementieren? Für diejenigen, die interessiert sind, werfen wir einen Blick unten. Ich hoffe, es wird für alle hilfreich sein.

Beschreibung der Anforderungen

Derzeit verfügen die meisten PC-Anwendungen über unterstützende mobile APPs wie WeChat, Taobao usw. Mithilfe der Scanfunktion der mobilen APP können Sie das QR-Codebild auf der Seite scannen, um sich anzumelden. Dadurch wird die Benutzeranmeldung bequemer, sicherer und schneller.

Denkanalyse

Prinzip des PC-Scannens?

Die Code-Scan-Anmeldefunktion umfasst die Webseite, den Server und das Mobiltelefon. Die allgemeinen Schritte der Interaktion zwischen den drei Enden sind wie folgt:

• Die Webseite zeigt den QR-Code an und sendet gleichzeitig kontinuierlich Anfragen zum Server, um nach dem QR-Code zu fragen.

• Nach erfolgreichem Lesen des QR-Codes wird zur Anmeldebestätigungsseite gesprungen Ändern Sie den QR-Code-Status und geben Sie die Anmeldeinformationen des Benutzers zurück.

• Wenn die Webseite die Statusänderung des serverseitigen QR-Codes empfängt, springt sie zur Post-Anmeldeseite.

• Wenn der Benutzer dies tut Wenn das Gerät für einen bestimmten Zeitraum nicht funktioniert, wird der QR-Code auf der Webseite ungültig und muss aktualisiert werden, um einen neuen QR-Code zu generieren.

Front-End-Funktionsimplementierung

Wie erstelle ich QR-Code-Bilder?

• Der Inhalt des QR-Codes ist eine Zeichenfolge. Sie können die UUID als eindeutige Kennung des QR-Codes verwenden.
• Verwenden Sie das QR-Code-Plug-In, um die UUID in einen QR-Code umzuwandeln Zeigen Sie es dem Benutzer an

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 = ''

Wie kontrolliere ich die Aktualität von QR-Codes?

Verwenden Sie den Front-End-Timer setInterval, um die effektive Zeit zu initialisieren und den QR-Code nach Ablauf des Countdowns zu aktualisieren

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.qsCodeTimer)
            this.qsCodeTimer = null
            return
          }
          this.effectiveTime--
        }, 1000)
      }

    },
   
    // 刷新二维码
    refreshCode() {
      this.codeStatus = 1
      this.effectiveTime = 30
      this.qsCodeTimer = null
      this.generateORCode()
    }
  },

Wie erhält das Front-End den Status des Server-QR-Codes?

Das Frontend sendet eine QR-Code-Statusabfrageanforderung an den Server, normalerweise mithilfe von Polling

• 定时轮询：间隔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.qsCodeTimer)
              this.qsCodeTimer = null
              this.effectiveTime = 0
            break;
            case 2:
              console.log("扫码通过")
              clearInterval(this.qsCodeTimer)
              this.qsCodeTimer = null
              this.$emit("login", loginData)
            break;
            case 1:
              console.log("未扫码")
              this.effectiveTime > 0  && this.checkQRcodeStatus()
            break;
            default:
            break;
         }
       } 
    },

推荐学习：《vue.js视频教程》

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Implementierung der QR-Code-Anmeldefunktion auf der Vue-PC-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!