Explication détaillée de la façon d'implémenter la fonction de connexion par code QR côté Vue PC

Cet article vous apporte des connaissances pertinentes sur Vue. Il présente principalement le principe de mise en œuvre du scan de code côté PC ? Comment générer une image QR code ? Comment utiliser Vue pour implémenter la connexion frontale par code QR ? Pour ceux que cela intéresse, jetons un coup d’œil ci-dessous, j’espère que cela sera utile à tout le monde.

Description des exigences

Actuellement, la plupart des applications PC prennent en charge des applications mobiles, telles que WeChat, Taobao, etc. En utilisant la fonction de numérisation sur l'application mobile pour scanner l'image du code QR sur la page pour vous connecter, cela rend l'opération de connexion de l'utilisateur plus pratique, sûre et rapide.

Analyse de réflexion

Principe de la numérisation PC ?

La fonction de connexion par numérisation de code implique la page Web, le serveur et le téléphone mobile. Les étapes générales d'interaction entre les trois extrémités sont les suivantes :

• La page Web affiche le code QR et envoie en même temps des demandes en continu. au serveur pour se renseigner sur le code QR ;

• Scannez le code QR avec le téléphone mobile. Après avoir lu avec succès le code QR, il passera à la page de confirmation de connexion. modifier l'état du code QR et renvoyer les informations de connexion de l'utilisateur ;

• Lorsque la page Web reçoit le changement d'état du code QR côté serveur, elle passera à la page de post-connexion

• Si l'utilisateur ne le fait pas ; fonctionner pendant une certaine période de temps, le code QR de la page Web deviendra invalide et devra être actualisé pour générer un nouveau code QR.

Implémentation de fonctions frontales

Comment générer des images de code QR ?

• Le contenu du code QR est une chaîne, vous pouvez utiliser l'uuid comme identifiant unique du code QR ;
• Utilisez le plug-in qrcode import QRCode from 'qrcode' pour convertir l'uuid en code QR ; affichez-le à l'utilisateur

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

Comment contrôler l'actualité des codes QR ?

Utilisez le timer frontal setInterval pour initialiser l'heure effective et actualisez le code QR après l'expiration du compte à rebours

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()
    }
  },

Comment le front-end obtient-il l'état du code QR du serveur ?

Le frontal envoie une demande de requête d'état du code QR au serveur, généralement à l'aide d'un sondage

• 定时轮询：间隔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视频教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!