詳解Vue PC端如何實現掃碼登入功能

藏色散人

發布： 2023-01-25 08:30:02

轉載

2814 人瀏覽過

本篇文章為大家帶來了關於Vue的相關知識，其中主要介紹了在PC端實現掃碼的原理是什麼？怎麼產生二維碼圖片？怎麼用Vue實作前端掃碼登入？有興趣的朋友，下面一起來看看吧，希望對大家有幫助。

需求描述

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

想法解析

PC 掃碼原理？

掃碼登入功能涉及網頁端、伺服器和手機端，三端之間互動大致步驟如下：

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

前端功能實作

如何產生二維碼圖片？

二維碼內容是一段字串，可以使用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 = &#39;&#39;

登入後複製

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

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

export default {
  name: "qrCode",
  data() {
    return {
      codeStatus: 1, // 1- 未扫码 2-扫码通过 3-过期
      effectiveTime: 30, // 有效时间
      qrCodeTimer: null // 有效时长计时器
      uid: &#39;&#39;,
      time: &#39;&#39;
    };
  },

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

登入後複製

前端如何取得伺服器二維碼的狀態？

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

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

以上是詳解Vue PC端如何實現掃碼登入功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！