Vue PC側でのQRコードログイン機能の実装方法を詳しく解説

この記事では、Vue に関する関連知識を紹介します。主に、PC 側でコード スキャンを実装する原理を紹介します。 QRコード画像を生成するにはどうすればよいですか? Vue を使用してフロントエンド QR コード ログインを実装するにはどうすればよいですか?興味のある方は以下をご覧ください。

要件の説明

現在、ほとんどの PC アプリケーションには、WeChat、淘宝網などのモバイル APP がサポートされています。モバイル APP でスキャンを使用することにより、スキャンが行われます。ページ上の QR コード画像をスキャンしてログインする機能を使用すると、ユーザーのログイン操作がより便利、安全、高速になります。

アイデア分析

PC スキャン コードの原理?

スキャン コード ログイン機能には、Web ページ、サーバー、携帯電話が関与します。この 3 つの端間の対話の一般的な手順は次のとおりです。ページに QR コードが表示され、継続的にサーバーにリクエストを送信して QR コードのステータスを問い合わせます。

• 携帯電話は QR コードをスキャンします。QR コードの読み取りに成功すると、ユーザーがログインを確認した後、サーバーは QR コードのステータスを変更し、ユーザーのログイン情報を返します;

• Web ページは、確認ログイン ページにジャンプします。サーバー側のQRコードステータス変更受信後のログイン後ページ;

• ユーザーが一定時間操作しないとWebページ上のQRコードが無効になります、新しい QR コードを更新して生成する必要があります。

• フロントエンド機能の実装

QRコード画像を生成するにはどうすればよいですか?

QR コードのコンテンツは文字列です。QR コードの一意の識別子として uuid を使用できます。

qrcode プラグインを使用して、「qrcode」から QRCode をインポートします; uuid を 2 つに変更します 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 = ''

QR コードの適時性を制御するにはどうすればよいですか?
• フロントエンド タイマー setInterval を使用し、有効時間EffectiveTime を初期化し、カウントダウンの期限が切れた後に QR コードを更新します

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

フロントエンドはサーバー 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 中国語 Web サイトの他の関連記事を参照してください。