广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >详解Vue PC端如何实现扫码登录功能
  • 102
分享到

详解Vue PC端如何实现扫码登录功能

前端Vue.js 2023-05-14 22:05:13 102人浏览 独家记忆
摘要

本篇文章给大家带来了关于Vue的相关知识,其中主要介绍了在PC端实现扫码的原理是什么?怎么生成二维码图片?怎么用Vue实现前端扫码登录?感兴趣的朋友,下面一起来看一下吧,希望对大家有帮助。.markdown-body{word-break:

本篇文章给大家带来了关于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 = ''

如何控制二维码的时效性?

使用前端计时器setInterval, 初始化有效时间effectiveTime, 倒计时失效后重新刷新二维码

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

前端如何获取服务器二维码的状态?

前端向服务端发送二维码状态查询请求,通常使用轮询的方式

  • 定时轮询:间隔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 PC端如何实现扫码登录功能的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: 详解Vue PC端如何实现扫码登录功能

本文链接: https://www.lsjlt.com/news/206857.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 详解Vue PC端如何实现扫码登录功能
    本篇文章给大家带来了关于Vue的相关知识,其中主要介绍了在PC端实现扫码的原理是什么?怎么生成二维码图片?怎么用Vue实现前端扫码登录?感兴趣的朋友,下面一起来看一下吧,希望对大家有帮助。.markdown-body{word-break:...
    99+
    2023-05-14
    前端 Vue.js
  • Vue PC前端扫码登录功能实现
    目录需求描述思路解析PC 扫码原理?前端功能实现如何生成二维码图片?如何控制二维码的时效性?前端如何获取服务器二维码的状态?参考资料:总结需求描述 目前大多数PC端应用都有配套的移动...
    99+
    2022-12-29
    vue扫码登录功能 vue登录功能 vue 扫码登录
  • Vue PC端怎么实现扫码登录功能
    本文小编为大家详细介绍“Vue PC端怎么实现扫码登录功能”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue PC端怎么实现扫码登录功能”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。.markdown-bod...
    99+
    2023-07-05
  • VuePC端实现扫码登录功能示例代码
    目录需求描述思路解析前端功能实现如何控制二维码的时效性?前端如何获取服务器二维码的状态?本篇文章给大家带来了关于Vue的相关知识,其中主要介绍了在PC端实现扫码的原理是什么?怎么生成...
    99+
    2023-01-28
    Vue PC端扫码登录 Vue 扫码登录 vue登录功能
  • 如何使用PHP实现微信扫码登录功能
    随着移动互联网的快速发展,微信作为一种重要的社交工具,已经逐渐成为人们日常生活中必不可少的一个部分。在许多网站和应用程序中,微信登录功能已经成为了一种趋势,因为它可以让用户直接使用已有的微信账号来登录,不需要再创建新的账户,同时也能提供更便...
    99+
    2023-05-14
    微信扫码登录 php
  • Vue登录功能的实现流程详解
    目录Vue项目中实现登录大致思路安装插件创建store封装axiosqs vue 插件api.js的作用路由拦截登录页面实际使用Vue项目中实现登录大致思路 1、第一次登录的时候,前...
    99+
    2022-11-13
  • PythonFlask前端自动登录功能实现详解
    目录引言1. 登录时2. 定义全局拦截器引言 在已有的网站中,几乎所有的网站都已经实现了 自动登录 所谓自动登录,其实就是在你登录后,然后关闭浏览器,接着再启动浏览器重新进入刚刚的网...
    99+
    2022-11-11
  • springboot+vue如何实现登录功能
    小编给大家分享一下springboot+vue如何实现登录功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!目录结构前端端口:8080后端端口:8900login.vue<template> &nbs...
    99+
    2023-06-15
  • Vue登录功能实现全套详解(含封装axios)
    目录Vue项目中实现登录大致思路: 一、安装插件二、创建store 三、封装axiosapi.js的作用 四、路由拦截五、登录页面实际使用总结Vue项目...
    99+
    2022-12-28
    vue的登录功能的实现 vue怎么实现登录 vue实现用户登录
  • Vue如何实现登录记住账号密码功能
    本篇内容主要讲解“Vue如何实现登录记住账号密码功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue如何实现登录记住账号密码功能”吧!实现思路用户登录时若勾选“记住我”功能选项,则将登录名和...
    99+
    2023-06-21
  • Spring Boot实现登录验证码功能的案例详解
    目录验证码的作用案例要求前端页面准备准备login.html页面随机验证码工具类后端控制器验证码的作用 验证码的作用:可以有效防止其他人对某一个特定的注册用户用特定的程序暴力破解方式...
    99+
    2022-11-13
    springboot登录验证码 springboot验证码
  • 如何通过vue方式实现二维码扫码功能
    这篇文章主要为大家展示了“如何通过vue方式实现二维码扫码功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何通过vue方式实现二维码扫码功能”这篇文章吧。提示这个插件只能在https协议下才...
    99+
    2023-06-25
  • node+vue前后端分离实现登录时使用图片验证码功能
    目录后端代码前端代码获取验证码方法登录验证方法记录一下前端使用验证码登录的过程后端用的是node.js,关键模块是svg-captcha前端使用的是vue2最后的登录界面如下: 后...
    99+
    2022-11-13
     vue图片验证码登录 node前后端分离验证码登录
  • antd Vue实现Login登录页面布局案例详解 附带验证码验证功能
    效果 Login页面 <!-- * @Author: Jackie * @Date: 2022-05-07 14:34:06 * @LastEditTime: 2022...
    99+
    2022-11-13
  • java如何实现短信验证码登录功能
    小编给大家分享一下java如何实现短信验证码登录功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!业务案例如下所示,是一个大家熟知的采用短信登录的入口输入手机号之...
    99+
    2023-06-25
  • vue如何实现web前端登录页数字验证码
    这篇文章主要讲解了“vue如何实现web前端登录页数字验证码”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue如何实现web前端登录页数字验证码”吧!创建code.js文件夹下面是js代码...
    99+
    2023-07-02
  • Vue前端如何实现生成PDF并下载功能详解
    目录1. 安装及引入2. 封装导出 pdf 文件方法配置详解封装导出 pdf 文件方法(utils/htmlToPdf.js)相关组件中应用效果待优化部分总结思路: 通过 html2...
    99+
    2022-11-12
  • SpringBoot整合Vue实现微信扫码支付以及微信退款功能详解
    直接上代码,在order模块添加依赖 <dependency> <groupId>com.github.wxpay&l...
    99+
    2022-11-13
  • Android端如何实现单点登录“被挤下线”功能
    这篇文章主要为大家展示了“Android端如何实现单点登录“被挤下线”功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Android端如何实现单点登录“被挤下线”功能”这篇文章吧。单点登录(被...
    99+
    2023-05-30
    android
  • 实例详解uniapp如何实现电话录音功能(附代码)
    本篇文章给大家带来了关于uniapp的相关知识,其中主要介绍了怎么用uniapp实现拨打电话并且还能同步录音的功能,感兴趣的朋友一起来看一下吧,希望对大家有帮助。uniapp 实现打电话录音功能最近需要实现一个通过 uniapp 调用手机拨...
    99+
    2023-05-14
    uni-app
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作