Maison > Article > interface Web > 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.
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.
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.
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 = ''
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() } },
Le frontal envoie une demande de requête d'état du code QR au serveur, généralement à l'aide d'un sondage
使用长轮询实现:
// 获取后台状态 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!