Heim > Web-Frontend > View.js > Hauptteil

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

藏色散人
Freigeben: 2023-01-25 08:30:02
nach vorne
2781 Leute haben es durchsucht

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 = ''
Nach dem Login kopieren

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()
    }
  },
Nach dem Login kopieren

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;
         }
       } 
    },
Nach dem Login kopieren

推荐学习:《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!

Verwandte Etiketten:
Quelle:juejin.im
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage