扫码登录(Nodejs+Vue+Uniapp)

bmy101860
2,638 阅读3分钟

1：仿微信，QQ，微博扫码登录

一直都感觉扫码登录很神奇啊！！然后谷歌一搜思路一看，发现还真是挺简单的，所以自己写个玩玩，代码里面的实现方式和思路可以借鉴。不要问为什么不用PHP,Java，我不会告诉你Node.js写起来更简单更方便，至于用什么后端语言实现这个不是关键，看你个人爱好。

项目地址：gitee.com/bmycode/Sca…

哦，对了。这里实现的是扫码登录的一整套代码，看懂了拿过去改改封装一下就可以在项目中使用了。这其中包含服务端(NodeServer)，App端(UniAppMobile)，Web端(VueQRCode)，可以直接部署跑起来哦。 不过你要先准备好以下环境才能愉快玩耍哦：

  • Nodejs
  • Mysql
  • Redis
  • Uni-app
  • Socket
  • Express
  • Vue.js

来自大佬 尤雨溪 的鼓励：

在这里插入图片描述

无图无真相，下面请接招：

效果图：

1.1 Web端未扫码：

在这里插入图片描述

1.2 Web端二维码失效：

在这里插入图片描述
1.3 Web端扫码成功：
在这里插入图片描述

1.4 App端首页

在这里插入图片描述

1.5 App端扫码页面

在这里插入图片描述

1.6 App端确认登录

在这里插入图片描述

2：实现的功能

额，类似你用过的QQ，微信，微博扫码登录的那些功能，简单说下：

  • web端从服务器获取二维码和uuid
  • web端处理二维码失效，重复扫码等
  • redis控制key的超时时间，前端二维码超时样式控制
  • App端扫码成功后，web端的样式控制和用户信息显示
  • App端首页扫码，login页面确认登录
  • 二维码失效后，可以点击重新获取
  • 等...

3 实现思路

在这里插入图片描述

4：项目结构

下面先看下项目的基本结构，后面再说实现思路。

4.1 NodeServer - 服务端

主要用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

4.2 UniAppMobile - Android App端

使用uni-app开发的android端，主要为了实现扫码然后把App上已登录的用户信息GET传到redis中。没什么，很简单。主要逻辑在：

  • pages/index/index.vue
  • pages/login/login.vue

如果uni-app不会，请自行看官方文档学习：

uni-app

4.3 VueQRCode - Vue web端

主要使用Vue写的Web，代码里面注释很多，看看就明白了。主要的代码逻辑都在这个web端中。

5 关于我

一个热爱编程喜欢折腾的人，一个曾经的后端但如今迷失在前端技术中的人，一个喜欢各种技术的人，更多开源项目请看：

avatar
文章
阅读
粉丝