php技术网站PC端用手机APP扫码实现登录

去年做的功能,整理一下分享出来

如淘宝,腾讯等网站登录页面,都有APP扫码登录这个功能,去年也做了一个,基于自己的APP实现, 并非第三方登陆.

思路:1. 生成一个二维码, 二维码链接带有密钥. 2. 用数据库表记录这次的密钥, 方便APP返回用户ID时比对. 3. 前端页面需要进行ajax轮询,去获取用户ID是否登陆的状态

1. 点击右上角时, 要ajax生成一个二维码. 不要一开始就生成, 或许别人不用扫码登录呢

2. 二维码生成方法.

前端, 切换二维码登录时触发, 所以要用ajax,去填充iframe, 当然你可以直接给iframe的src上加二维码的方法路径,

2.生成二维码后, sign的密钥就写入了数据库, 前端ajax开始轮询,如果轮询为1,则说明已经登录

3. 我是统一写的一个apilogin控制器, 这个是二维码生成方法. 方法里带有sign,主要就是这个. sign方法是oauth2.0协议

二维码生成的只是个链接, url的话, 是一个回调的接口地址, 为了安全,其实可以略去, 只用网址加参数

签名方法:

4. 这时 APP端需要实现, 扫码功能, 扫码后,手机app端就读取到了这个网址链接, 获得了参数, APP端点击确认登录按钮,

5.APP端确认时,验证sign密钥, 如果正确就跳转到接收到的url接口地址, 并且带上sign签名(token), addtime当前时间,userid.

token和url 是扫码获得的, 再返回给接口. addtime是确认时间, 可以做过期验证. userid是手机端用户id, 可以进行加密保护, 也可以直接明文, 反正别人看不到

6. 回调方法, 接收APP返回的接口,根据token去查询二维码登录表.

7.数据库字段

id, username 用户ID, token 签名, add_time生成时间, 还可以加回调时间

当PC端生成时, 是没有用户ID的, APP扫码后,回调给了用户ID, 需要更新记录

8. 最后PC端的轮询. 轮询前端探查是否扫码登录状态, 我加了个计数变量, 避免长时间轮询消耗资源,

上面点击二维码时, 生成二维码 , 有个开始轮询, 3秒执行一次轮询, 轮询方法里面还加了一个计算, 执行一次+1, 达到20次时, 20*3=60秒.刷新一次页面.

9.ajax轮询的请求方法, 根据当前session记录的sign进行查询, 这是为了避免客户端开多个窗口同时扫码,

10.查询到以后, 写入session, 返回1 ,告诉前端, 登录成功进行跳转到index.

php技术网站PC端用手机APP扫码实现登录相关推荐

Java PC端微信、支付宝扫码支付（二）
Java PC端微信.支付宝扫码支付(二) 前几天写了微信支付,附上链接 https://blog.csdn.net/qq_43494610/article/details/90411391 ,今天抽 ...
vue qrcodejs2生成二维码实现手机APP扫码进行web网页登录
在vue中使用 qrcodejs2 1.安装 npm install qrcodejs2 --save 2.引入 import QRCode from "qrcodejs2" 3 ...
【vue+pc端】实现微信扫码登录pc端，后端通过微信开发平台，前端生成二维码（仅供参考）
这两周的需求是通过微信扫码登录pc端,刚定下需求原型图还没出来前,后端特意发了微信开发平台的链接给我,关于如何生成二维码的文档,以及扫码跳转后如何传code给他. 请戳这里准备工作|微信开放文档我最 ...
pc端网页实现微信扫码登录
微信开发文档:https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html 点击按 ...
心通达OA 实现APP扫码登录过程
1.PC端web页面上登录切换到二维码 2.打开手机APP扫码 3.扫描 4.扫描后确认登录. 完成登录,进入心通达OA系统.
nginx pc 端和手机移动端分离
pc 端和手机移动端分离随着移动互联网时代的来临,很多WEB网站都已经推出了基于手机,Ipad等移动客户端的页面访问,这里介绍一下如何利用用户UA实现用户不同终端下的用户访问: $http_use ...
PC端和移动APP端CSS样式初始化
CSS样式初始化分为PC端和移动APP端 1.PC端:使用Normalize.css Normalize.css是一种CSS reset的替代方案. 我们创造normalize.css有下面这几个目的 ...
物联网模块ESP8266-01S实现PC端和Android APP同时连接通信
本设计实现了PC端和Android APP与物联网模块ESP8266-01S通信. 1,Android APP采用E4A编写,PC端使用TCP调试助手. 首先最关键的需要对ESP8266-01S物联网 ...
服务端给手机APP写支付接口（微信）
本文主要介绍怎么在服务端给手机APP写支付接口:以POST的方式. 需要引用第三方. using Senparc.Weixin.MP.TenPayLibV3; 整体来说就是写一个方法罢了. /// & ...

php技术网站PC端用手机APP扫码实现登录

php技术网站PC端用手机APP扫码实现登录相关推荐

最新文章

热门文章

php技术 网站PC端用手机APP扫码实现登录

php技术 网站PC端用手机APP扫码实现登录相关推荐

最新文章

热门文章

php技术网站PC端用手机APP扫码实现登录

php技术网站PC端用手机APP扫码实现登录相关推荐