广告
返回顶部
首页 > 资讯 > 后端开发 > Python >springboot扫码登录的简单实现
  • 284
分享到

springboot扫码登录的简单实现

springboot扫码登录 2022-11-12 14:11:18 284人浏览 薄情痞子

Python 官方文档:入门教程 => 点击学习

摘要

目录前言项目简介实现思路实现步骤前言 本文将介绍基于SpringBoot + Vue + Android实现的扫码登录demo的总体思路,完整代码已上传到GitHub。WEB端体验地

前言

本文将介绍基于SpringBoot + Vue + Android实现的扫码登录demo的总体思路,完整代码已上传到GitHubWEB端体验地址:Http://47.116.72.33/(只剩一个月有效期),apk下载地址:https://github.com/zhangjiwei1221/qrscan/releases/tag/0.0.1。用户名:非空即可,密码:123456,效果见文末,整体实现如有不妥之处,欢迎交流讨论,实现部分参考二维码扫码登录是什么原理。

项目简介

后端springBootRedis
前端VueVue RouterVueXAxiOSvue-qrElemntUI
安卓:ZXingXUIYHttp

实现思路

总体的扫码登录和OAuth2.0的验证逻辑相似,如下所示:

image-20210921205657426

用户选择扫码登录可以看作是A:前端发授权请求,等待app扫码。
用户使用app进行扫码可以看作是B:扫码进行授权,返回一个临时Token供二次认证。
用户在app进行确认登录可以看作是C:进行登录确认,授权用户在Web端登录。
后端在用户确认登录后返回一个正式Token即可看作是步骤D
后续前端根据正式Token访问后台接口,正式在Web端进行操作即可看作是EF

二次认证的原因

之所以在用户扫码之后还需要进行再一次的确认登录,而不是直接就登录的原因,则是为了用户安全考虑,避免用户扫了其他人需要登录的二维码,在未经确认就直接登录了,导致他人可能会在我们不知道的情况下访问我们的信息。

实现步骤

用户访问网页端,选择扫码登录

用户在选择扫码登录时,会向后端发送一个二维码的生成请求,后端生成UUID,并保存到Redis(固定有效时间),状态设置为UNUSED(未使用)状态,如果Redis缓存过期,则为EXPIRE(过期)状态,前端根据后端返回的内容生成二维码,并设置一个定时器,每隔一段时间根据二维码的内容中的UUID,向后端发送请求,获取二维码的状态,更新界面展示的内容。

生成二维码后端接口:



@GetMapping("/generate")
public BaseResult generate() {
    String code = IdUtil.simpleUUID();
    redisCache.setCacheObject(code, CodeUtils.getUnusedCodeInfo(), 
                              DEFAULT_QR_EXPIRE_SECONDS, TimeUnit.SECONDS);
    return BaseResult.success(GENERATE_SUCCESS, code);
}

前端获取内容,生成二维码:


getToken() {
    this.codeStatus = 'EMPTY'
    this.tip = '正在获取登录码,请稍等'
    // 有效时间 60 秒
    this.effectiveSeconds = 60
    clearInterval(this.timer)
    request({
        method: 'get',
        url: '/code/generate'
    }).then((response) => {
        // 请求成功, 设置二维码内容, 并更新相关信息
        this.code = `${HOST}/code/scan?code=${response.data}`
        this.codeStatus = 'UNUSED'
        this.tip = '请使用手机扫码登录'
        this.timer = setInterval(this.getTokenInfo, 2000)
    }).catch(() => {
        this.getToken()
    })
}

后端返回二维码状态信息的接口:



@GetMapping("/info")
public BaseResult info(String code) {
    CodeVO codeVO = redisCache.getCacheObject(code);
    if (codeVO == null) {
        return BaseResult.success(INVALID_CODE, StringUtils.EMPTY);
    }
    return BaseResult.success(GET_SUCCESS, codeVO);
}

前端轮询获取二维码状态:


getTokenInfo() {
    this.effectiveSeconds--
    // 二维码过期
    if (this.effectiveSeconds <= 0) {
        this.codeStatus = 'EXPIRE'
        this.tip = '二维码已过期,请刷新'
        return
    }
    // 轮询查询二维码状态
    request({
        method: 'get',
        url: '/code/info',
        params: {
            code: this.code.substr(this.code.indexOf('=') + 1)
        }
    }).then(response => {
        const codeVO = response.data
        // 二维码过期
        if (!codeVO || !codeVO.codeStatus) {
            this.codeStatus = 'EXPIRE'
            this.tip = '二维码已过期,请刷新'
            return
        }
        // 二维码状态为为正在登录
        if (codeVO.codeStatus === 'CONFIRMING') {
            this.username = codeVO.username
            this.avatar = codeVO.avatar
            this.codeStatus = 'CONFIRMING'
            this.tip = '扫码成功,请在手机上确认'
            return
        }
        // 二维码状态为确认登录
        if (codeVO.codeStatus === 'CONFIRMED') {
            clearInterval(this.timer)
            const token = codeVO.token
            store.commit('setToken', token)
            this.$router.push('/home')
            Message.success('登录成功')
            return
        }
    })
}

使用手机扫码,二维码状态改变

当用户使用手机扫码时(已登录并且为正确的app,否则扫码会跳转到自定义的宣传页),会更新二维码的状态为CONFIRMING(待确认)状态,并在Redis缓存中新增用户名及头像信息的保存供前端使用展示,此外还会返回用户的登录信息(登录地址、浏览器、操作系统)给app展示,同时生成一个临时Tokenapp(固定有效时间)。

用户扫码时的后台处理:



private BaseResult handleUnusedQr(String code, String token) {
    // 校验 app 端访问传递的 token
    boolean isLegal = JwtUtils.verify(token);
    if (!isLegal) {
        return BaseResult.error(AUTHENTICATioN_FaiLED);
    }
    // 保存用户名、头像信息, 供前端展示
    String username = JwtUtils.getUsername(token);
    CodeVO codeVO = CodeUtils.getConfirminGCodeInfo(username, DEFAULT_AVATAR_URL);
    redisCache.setCacheObject(code, codeVO, DEFAULT_QR_EXPIRE_SECONDS, TimeUnit.SECONDS);
    // 返回登录地址、浏览器、操作系统以及一个临时 token 给 app
    String address = HttpUtils.getRealAddressByIp();
    String browser = HttpUtils.getBrowserName();
    String os = HttpUtils.getOsName();
    String tmpToken = JwtUtils.sign(username);
    // 将临时 token 作为键, 用户名为内容存储在 redis 中
    redisCache.setCacheObject(tmpToken, username, DEFAULT_TEMP_TOKEN_EXPIRE_MINUTES, TimeUnit.MINUTES);
    LoginInfoVO loginInfoVO = new LoginInfoVO(address, browser, os, tmpToken);
    return BaseResult.success(SCAN_SUCCESS, loginInfoVO);
}

手机确认登录

当用户在app中点击确认登录时,就会携带生成的临时Token发送更新状态的请求,二维码的状态会被更新为CONFIRMED(已确认登录)状态,同时后端会生成一个正式Token保存在Redis中,前端在轮询更新状态时获取这个Token,然后使用这个Token进行登录。

后端处理确认登录的代码:



private BaseResult handleConfirmingQr(String code, String token) {
    // 使用临时 token 获取用户名, 并从 redis 中删除临时 token
    String username = redisCache.getCacheObject(token);
    if (StringUtils.isBlank(username)) {
        return BaseResult.error(AUTHENTICATION_FAILED);
    }
    redisCache.deleteObject(token);
    // 根据用户名生成正式 token并保存在 redis 中供前端使用
    String fORMalToken = JwtUtils.sign(username);
    CodeVO codeVO = CodeUtils.getConfirmedCodeInfo(username, DEFAULT_AVATAR_URL, formalToken);
    redisCache.setCacheObject(code, codeVO, DEFAULT_QR_EXPIRE_SECONDS, TimeUnit.SECONDS);
    return BaseResult.success(CONFIRM_SUCCESS);
}

效果演示

在这里插入图片描述

在这里插入图片描述

到此这篇关于springboot扫码登录的简单实现的文章就介绍到这了,更多相关springboot扫码登录内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: springboot扫码登录的简单实现

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

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

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

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

下载Word文档
猜你喜欢
  • springboot扫码登录的简单实现
    目录前言项目简介实现思路实现步骤前言 本文将介绍基于SpringBoot + Vue + Android实现的扫码登录demo的总体思路,完整代码已上传到GitHub。Web端体验地...
    99+
    2022-11-12
    springboot扫码登录
  • springboot简单实现单点登录的示例代码
    什么是单点登录就不用再说了,今天通过自定义sessionId来实现它,想了解的可以参考https://www.xuxueli.com/xxl-sso/ 讲一下大概的实现思路吧:这里有...
    99+
    2022-11-12
    springboot 单点登录
  • SpringBoot实现扫码登录的示例代码
    目录一、首先咱们需要一张表二、角色都有哪些三、接口都需要哪些?四、步骤五、疯狂贴代码Spring Boot中操作WebSocket最近有个项目涉及到websocket实现扫码登录,看...
    99+
    2022-11-13
    SpringBoot 扫码登录
  • springBoot基于webSocket实现扫码登录
    最近单位又有一个新Java项目。 涉及到扫码登录。之前项目使用的是 ajax轮询的方式。感觉太low了。 所以这次用webSocket的方式进行实现 好。废话不多说!咱们开始!! 一...
    99+
    2022-11-12
    springBoot 扫码登录 springBoot webSocket扫码登录
  • SpringBoot实现扫码登录的项目实践
    目录一、首先咱们需要一张表二、角色都有哪些三、接口都需要哪些?四、步骤五、疯狂贴代码Spring Boot中操作WebSocket一、首先咱们需要一张表 这表是干啥的呢?就是记录一下...
    99+
    2022-11-13
    SpringBoot 扫码登录
  • SpringBoot怎么实现二维码扫码登录
    本篇内容介绍了“SpringBoot怎么实现二维码扫码登录”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、手机扫二维码登录的原理二维码扫码...
    99+
    2023-07-05
  • SpringBoot如何实现简单的登录注册
    这篇文章将为大家详细讲解有关SpringBoot如何实现简单的登录注册,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。第一步:建立简单的项目第二步:建一个简单的数据表第三步:配置文件如下:pom.xml文件...
    99+
    2023-06-29
  • Java Spring Boot实现简易扫码登录详解
    目录前言项目简介实现思路实现步骤1.用户访问网页端,选择扫码登录2.使用手机扫码,二维码状态改变3.手机确认登录效果演示总结前言 本文将介绍基于SpringBoot + Vue + ...
    99+
    2022-11-12
    Java Spring Boot扫码登录 实现扫码登录
  • SpringBoot+Vue实现简单的登录注册功能
    文章目录 一、前言1.开发环境2.功能3.项目运行截图 二、撸代码1.构建前端项目2.构建后端项目3.前端页面编写4.后端代码编写5.前后端联调 三、小结 一、前言 ...
    99+
    2023-09-20
    vue.js spring boot java mysql
  • SpringBoot实现简单的登录注册的项目实战
    目录第一步:建立简单的项目第二步:建一个简单的数据表第三步:配置文件如下:第一步:建立简单的项目 第二步:建一个简单的数据表 第三步:配置文件如下: pom.xml文件配置:...
    99+
    2022-11-13
    SpringBoot 登录注册
  • SpringBoot实现二维码扫码登录的原理及项目实践
    目录一、手机扫二维码登录的原理二、SpringBoot如何实现二维码扫码登录三、总结手机二维码扫码登录已经成为了现代互联网时代的一种普遍的登录方式。它的出现,极大地方便了用户登录的流...
    99+
    2023-05-14
    SpringBoot 二维码扫码登录 SpringBoot 扫码登录
  • Django实现简单登录的示例代码
    目录创建django项目使用模型的url.py加载静态文件页面跳转创建数据库模型提交表单提交ajax提交创建django项目 创建项目的命令行语句: django-admin st...
    99+
    2022-11-12
    Django 登录
  • java编程之基于SpringBoot框架实现扫码登录
    目录项目简介实现思路二次认证的原因实现步骤用户访问网页端,选择扫码登录使用手机扫码,二维码状态改变手机确认登录效果演示完整代码已上传到GitHub。 Web端体验地址:http://...
    99+
    2022-11-12
    java编程 SpringBoot框架实现扫码登录
  • php怎么实现简单密码登录
    本文操作环境:Windows7系统、PHP7.1版、DELL G3电脑php怎么实现简单密码登录?PHP实现最简单的登录界面PHP学习路上的第一个完整的极小极小的项目,总算是看着了做项目的希望了,特意做个记录登录界面:html代码(logi...
    99+
    2021-01-30
    php
  • php如何实现简单密码登录
    php如何实现简单密码登录,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。php实现简单密码登录的方法:1、创建login.html;2、创建login.php;...
    99+
    2023-06-26
  • tp6 实现简单登录
    配置路由 //登录页面 Route::get('login','Login/login'); 写html表单页面 Title .main{ width: 500px; ...
    99+
    2023-09-20
    php
  • Java实现微信扫码登录
    微信扫码登录 1. 授权流程说明第一步:请求 code第二步:通过 code 获取 access_token第三步:通过 access_token 调用接口 2. 授权流程代码3...
    99+
    2023-09-01
    微信 java
  • PHP怎么实现扫码登录QQ
    本教程操作环境:Windows7系统、PHP8.1版、Dell G3电脑。PHP怎么实现扫码登录QQ?分享一下,PHP实现第四方QQ微信扫码登陆,不接入qq互联以及微信开发者平台就可以实现用户对接鹅厂,phpQQ微信扫码登陆 自己抓的QQ包...
    99+
    2022-11-21
    qq php
  • PHP如何实现扫码登录QQ
    这篇文章主要介绍“PHP如何实现扫码登录QQ”,在日常操作中,相信很多人在PHP如何实现扫码登录QQ问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”PHP如何实现扫码登录QQ”的疑惑有所帮助!接下来,请跟着小编...
    99+
    2023-07-04
  • SpringBoot单点登录怎么实现
    这篇文章主要介绍了SpringBoot单点登录怎么实现的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇SpringBoot单点登录怎么实现文章都会有所收获,下面我们一起来看看吧。1.具体实现步骤添加拦截器,设置U...
    99+
    2023-07-04
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作