首页 > 编程语言 >小程序扫码登录网页端原理

小程序扫码登录网页端原理

时间:2023-02-02 15:00:21浏览次数:52  
标签:扫码 网页 uuid 登录 用户 二维码

目录

 

作者:雨飞

一、问题引入

在设计用于管理社团信息的网页端时,我们需要解决的一个问题是怎样让社团管理员很方便地登录到管理平台中去。出于提高用户体验角度的考虑,我们的小程序在用户第一次登录时,只需要微信授权获得身份信息,就可以自动完成注册和登录流程,用户无需手动输入密码或创建新的账号,一切都是与微信绑定的。这种做法固然方便,但缺点在于登录流程和微信环境高度绑定,脱离微信环境之后再想获取并验证用户的身份信息就比较困难。

最后我们选择了在网页端设置小程序扫码登录,用户只需要打开我们的小程序,在“我的”页面中点击“扫描二维码”,便可以自动登录到网页端社团数据管理平台。在实现这个功能的过程中,我们遇到了一些问题,这些问题在经历了一段时间的学习研究之后得以解决,我们觉得有必要在此把解决问题的过程记录下来,作为技术博客。因此有了这篇文章。

二、几个难题

1. 网页端是怎么知道哪个用户扫描的二维码?

这是很多人在第一次看到”扫码登录“这种登录方式时的第一反应。的确,这个过程看起来有点神奇,网页上只是显示了一个二维码而已,为什么小程序扫码之后,网页端就知道是哪个用户扫描的二维码呢?如果我们要自己去实现这个功能的话,也必然面临着同样的问题。

2. 小程序扫码,扫出来的是什么东西?

第二个问题实际上是由第一个问题引出的。既然网页端不需要任何额外信息就能知道是哪个用户扫描的二维码,那么二维码里就必然包含着对识别用户身份至关重要的信息。这里面的信息具体有哪些内容?这也是我们着重要解决的事情。

3. 小程序扫到二维码以后,做了什么事情,怎么和网页端通讯的?

从用户体验的角度来看,小程序扫码登录是一件十分自然的事情:网页端显示二维码,小程序扫码,网页端便可以正常登录。然而小程序扫码之后,网页端怎么知道小程序已经扫码了?小程序是如何把自身存储的用户信息发送给网页端的?只有解决这些问题,扫码登录的流程才可以说是被真正打通。

三、解决方案

1. 至关重要的uuid

uuid(通用唯一识别码)是解决以上难题的关键。其实扫码登录的根本难题在于如何在小程序和网页端之间共享用户的身份信息,因此势必需要一个识别码来进行网页端和小程序的通信绑定。

后端服务器对外提供一个接口,网页端每次访问这个接口,都会获得一个全局唯一的uuid。网页端获取uuid之后,将其转换为二维码展示在页面上,二维码包含且只包含这个uuid。

我们使用了qrcode.react作为网页端生成二维码的组件。

2. 用户信息与uuid的绑定

后端服务器生成uuid之后,便会将这个uuid存入redis缓存中。小程序扫描到带有uuid信息的二维码,获得用户身份信息之后,访问服务器的另一个接口,将用户信息和uuid一起发送给后端。后端把身份信息与刚刚存入redis的uuid绑定在一起,由此完成用户信息和uuid(也即二维码)的绑定。

3. 网页端轮询uuid,直至获取到用户身份信息

网页端知道,在未来的某一时刻,小程序会把当前登录用户的身份信息和uuid绑定在一起,因此网页端只需要不断轮询后端服务器,并把自己的uuid作为参数,就可以知道uuid是否已经绑定了用户信息。如果还未绑定,则等待直至uuid失效;如果已绑定,就使用该身份信息登录。至此,扫码登录的流程全部打通。

四、一些技术细节

  1. redis在存储uuid时,出于安全考虑,必须设置过期时间
  2. 网页端轮询时,需要注意轮询时间间隔,避免对服务器造成过大压力
  3. uuid一旦与用户身份信息绑定,一次使用后则需失效,否则会带来安全隐患

转自  https://www.cnblogs.com/buaareadsun/p/10886866.html

标签:扫码,网页,uuid,登录,用户,二维码
From: https://www.cnblogs.com/siyunianhua/p/17086027.html

相关文章

  • 用小程序来实现扫码登录
    小程序扫码登录的优点不需要企业资质,个人用户就可以注册小程序;不需要认证,每年可以省300元;打通小程序端的用户数据,可以让PC网站往移动端引流,用户不流失;流程......
  • 网页布局自适应问题;隐藏滚动条;
    环境:vue3+JS/TS+Vite1、引入flexble.js文件varDesign_Width=1920;varDesign_Height=1080;varREM=16;varbaseFontSize=14;(functionflexible(window,......
  • SpringBoot框架下shiro与jwt的结合的用户登录
    写了一次使用shiro和jwt的用户登录(没有涉及到用户权限的控制),下面进行很简单的技术总结之前使用的是Redis中保存用户信息,使用uuid-用户信息的键值对来判断用户......
  • 前端CSS网页布局新技术(双屏和折叠屏手机)解决方案
    三星GalaxyFold和SurfaceDuo以及华为mateX等系列折叠屏手机问世至今已有三年多的时间。此后,三星GalaxyZFold3和GalaxyZFlip3、华为mateX2S、荣耀magicV......
  • CentOS7登录到控制台后无网络
    1、找到网卡配置文件ll/etc/sysconfig/network-scripts/|grepifcfg-en2、编辑配置文件开启系统启动时自动启动网络,并保存文件 vi /etc/sysconfig/network-scripts......
  • CentOS7安装了图形界面为默认如何修改默认登录到控制台
    在安装的时候,选择了图形界面安装,一段时间后,想还是直接登录到控制台,需要的时候在手动登录到图形界面,在CentOS7中的设置方法不同与之前的版本 在之前的版本中是修改配置......
  • 直播系统app源码,简洁好看的登录页面
    直播系统app源码,简洁好看的登录页面1.html <!DOCTYPEhtml><html><head>  <metacharset="UTF-8">  <title>登录界面</title>  <linkrel="stylesheet"hr......
  • 网页请求数据的方式和请求方式
    如果要在网页中请求服务器上的数据资源,需要用到XMLHttpRequest对象XMLHttpRequest(简称xhr)是浏览器提供的JS成员,通过它,可以请求服务器上的数据资源最简单的用法varxh......
  • curl模拟登录
    $post_data=array("username"=>"[email protected]","password"=>"yuejide198225","remember"=>0);$data=http_build_query($post_data);$ch=curl_init();curl_setop......
  • Hive 刷题——查询每个用户登录日期的最大空档期
    需求描述从登录明细表(user_login_detail)中查询每个用户两个登录日期(以login_ts为准)之间的最大的空档期。统计最大空档期时,用户最后一次登录至今的空档也要考虑在内,假设今......