Vue PC측에서 QR코드 로그인 기능을 구현하는 방법에 대한 자세한 설명

藏色散人

풀어 주다： 2023-01-25 08:30:02

앞으로

2816명이 탐색했습니다.

이 글은 Vue에 대한 관련 지식을 제공합니다. 주로 PC 측에서 코드 스캐닝을 구현하는 원리를 소개합니다. QR 코드 이미지를 생성하는 방법은 무엇입니까? Vue를 사용하여 프런트엔드 QR 코드 로그인을 구현하는 방법은 무엇입니까? 관심 있으신 분들은 아래 내용을 살펴보시고 모두에게 도움이 되었으면 좋겠습니다.

요구 사항 설명

현재 대부분의 PC 애플리케이션은 WeChat, Taobao 등 모바일 앱을 지원합니다. 모바일 앱의 스캔 기능을 사용하여 페이지의 QR 코드 이미지를 스캔하여 로그인하면, 이는 사용자 로그인 작업을 더욱 편리하고 안전하며 빠르게 만듭니다.

사고분석

PC 스캐닝의 원리?

코드 스캔 로그인 기능에는 웹 페이지, 서버 및 휴대폰이 포함됩니다. 세 끝 사이의 일반적인 상호 작용 단계는 다음과 같습니다.

웹 페이지에는 QR 코드가 표시되며 동시에 지속적으로 요청이 전송됩니다.
휴대폰으로 QR 코드를 스캔하면 사용자가 로그인을 확인하는 페이지로 이동합니다. QR 코드 상태를 수정하고 사용자의 로그인 정보를 반환합니다.
웹 페이지가 서버 측 QR 코드의 상태 변경을 수신하면 로그인 후 페이지로 이동합니다.
사용자가 그렇지 않은 경우 특정 기간 동안 작동하면 웹페이지 QR 코드가 유효하지 않게 되며 새 QR 코드를 생성하려면 새로 고쳐야 합니다.

프론트엔드 기능 구현

QR코드 이미지는 어떻게 생성하나요?

QR 코드의 내용은 문자열입니다. uuid를 QR 코드의 고유 식별자로 사용할 수 있습니다.
qrcode 플러그인 가져오기 QRCode를 사용하여 uuid를 QR 코드로 변환하세요. 사용자에게 표시하세요

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;

로그인 후 복사

QR 코드의 적시성을 어떻게 제어하나요?

프런트 엔드 타이머 setInterval을 사용하여 유효 시간을 초기화하고 카운트다운이 만료된 후 QR 코드를 새로 고칩니다.

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

로그인 후 복사

프런트 엔드는 서버 QR 코드의 상태를 어떻게 얻나요?

프런트 엔드는 일반적으로 폴링을 사용하여 서버에 QR 코드 상태 쿼리 요청을 보냅니다

定时轮询：间隔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측에서 QR코드 로그인 기능을 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!