同步操作将从 编码猿/ScanCodeLogin 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
一直都感觉扫码登录很神奇啊!!然后谷歌一搜思路一看,发现还真是挺简单的,所以技痒自己写个玩玩,代码里面的实现方式和思路可以借鉴。不要问为什么不用PHP
,Java
,我不会告诉你Node.js
写起来更简单更方便,至于用什么后端语言实现这个不是关键,看你个人爱好。
哦,对了。这里实现的是扫码登录的一整套代码,看懂了拿过去改改封装一下就可以在项目中使用了。这其中包含服务端(NodeServer),App端(UniAppMobile),Web端(VueQRCode),可以直接部署跑起来哦。 不过你要先准备好以下环境并且掌握不少的前后端技术点才能愉快玩耍哦:
来自大佬 尤雨溪 的鼓励:
无图无真相,下面请接招:
效果图:
1.1 Web端未扫码:
1.2 App端已扫码,但未在App端确认登录:
1.3 Web端二维码失效:
1.4 Web端扫码成功:
1.5 App端首页
1.6 App端扫码页面
1.7 App端确认登录
额,类似你用过的QQ
,微信
,微博
扫码登录的那些功能,简单说下:
下面先看下项目的基本结构,后面再说实现思路。
主要用Node.js
实现后端,通过socket.io
+redis
实现web
端的二维码生成,uuid
等,同时还实现了android
端的扫码登录的接口等。具体看下面目录结构
├── BroadcastChannel # 广播频道,主要为了让在socket.io中能及时知道 redis 订阅key的失效事件
│ └── index.js
├── app.js # express 框架的启动入口文件
├── bin # express 框架的启动脚本文件
│ └── www
├── mysql # mysql的封装,主要使用了我自己开发的npm插件"yn-mysql-utils"
│ └── index.js
├── node_modules # 依赖包,没什么好说的
├── package.json # 项目依赖配置文件,没什么好说的
├── redis # redis 的简单封装
│ └── index.js
├── routes # 路由接口
│ ├── index.js # 这里面实现的接口主要给APP端使用
│ └── socket.js # 实现socket.io,主要给Vue的web端使用
└── utils # 工具类的封装
├── index.js
使用uni-app
开发的android
端,主要为了实现扫码然后把App
上已登录的用户信息GET传到redis
中。没什么,很简单。主要逻辑在:
如果uni-app
不会,请自行看官方文档学习:
主要使用Vue
写的Web
,代码里面注释很多,看看就明白了。主要的代码逻辑都在这个web
端中。
一个热爱编程喜欢折腾的人,一个曾经的后端但如今迷失在前端技术中的人,一个喜欢各种技术的人,更多开源项目请看:
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。