扫码登录（uniapp&&vue）

手机 app 扫码登录网站

用户打开web端网页，进入扫码登录的界面；
从web端服务器获取二维码的唯一标识，用于表示该二维码所对应的用户，方便后面 PC端网页异步轮询xmlhttprequest (ajax)，定期轮询后台查看用户是否扫描二维码
web端服务器在生成二维码时，与请求会的唯一标识（uuid）进行关联，后端将uuid存储到数据库中，方便后面轮询后台
用户打开APP端，扫描二维码进行授权登录操作
APP客户端从二维码中读取到uuid，带着APP内的身份信息访问服务器也就是token
服务器获取到用户信息之后，将用户的id更新到数据库前面存储的单条数据uuid中，此时web服务器就能拿到对应的用户id，之后生成登录身份信息返回给浏览器，即用户在web端完成了登录

代码实现

PC端

// 首先下载 qrcodejs2 模块  npm i qrcodejs2 --save
// 在组件中使用
<template><div class="qrcode" ref="qrCodeUrl"></div>
</template><script>
import QRCode from "qrcodejs2";
import axios from "axios";
export default {data() {return {uuid: "",  // 请求回来的唯一标识timer: "",};},methods: {// 获取唯一id生成二维码async getUuid() {const {data: { uuid },} = await axios.get("http://127.0.0.1:3000/ewm");this.uuid = uuid;// 生成二维码this.creatQrCode();},creatQrCode() {var qrcode = new QRCode(this.$refs.qrCodeUrl, {text: JSON.stringify({uuid: this.uuid,token: "123",}), // 需要转换为二维码的内容width: 100,height: 100,colorDark: "#000000",colorLight: "#ffffff",correctLevel: QRCode.CorrectLevel.H,});// 二维码显示成功之后 运行PC端网页异步轮询xmlhttprequest (ajax)，定期轮询后台  每隔200毫秒向后端发送一次请求 查看是否登录成功this.getStatus();},// 轮询后端async getStatus() {let _this = this;const {data: { status },} = await axios.get("http://127.0.0.1:3000/isLogin", {params: {uuid: this.uuid,},});// 如果没有登录成功的话  一直询问是否登录成功if (status === 400) {this.timer = setTimeout(function () {_this.getStatus();}, 200);}clearTimeout(this.timer);},},mounted() {this.getUuid();},
};
</script>

APP端

<template><view class="content"><view @click="scan">扫码验证</view></view>
</template><script>export default {data() {return {}},methods: {scan() { //扫码验证var _this = this;uni.scanCode({onlyFromCamera: false, //为true只允许相机扫码，不加允许相册扫码success: function(res) {console.log(res.result, '@@@')// 发送请求将获取的  {"uuid":1650462410424,"token":"123"}  数据发送到服务端  服务端返回用户数据到浏览器  浏览器页面进行跳转页面uni.showToast({title: '扫码成功'})},fail: function(err) {console.log('扫码失败', err)}})},}}
</script>

扫码登录（uniappvue）相关推荐

一文详析微信和淘宝扫码登录背后的实现原理！
关注上方"深度学习技术前沿",选择"星标公众号", 资源干货,第一时间送达! 作者:imtech my.oschina.net/u/4231722/blog/3 ...
Django使用Social-Auth实现微信第三方网站扫码登录
前言之前让网页公司制作新官网的时候规划有第三方账号的登录功能,但由于当时的一些开放平台申请步骤比较繁琐(尤其是微信开放平台),所以一直拖延着,到了最近只能自己添加相关的功能. 由于是刚接触Pytho ...
Spring Boot 实现扫码登录，这种方式太香了！！
作者 | 93年颈椎病人来源 | https://blog.csdn.net/q826qq1878/article/details/91041679 最近有个项目涉及到websocket实现扫码登录 ...
扫码登录是如何实现的？
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | 精品唯居来源 | https://www.c ...
面试官：说说微信和淘宝扫码登录背后的实现原理？
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 来源 | my.oschina.net/u/423172 ...
钉钉扫码登录第三方_在钉钉发布公司重要文件，真的安全吗？
钉钉以疫情在家办公为契机,加上"幸运地"被教育部"选中",在2月5日,钉钉下载量首次超过微信,跃居苹果App Store排行榜第一,并打破App Store记录 ...
面试官：聊聊微信和淘宝扫码登录背后的实现原理？
本文来源: my.oschina.net/u/4231722/blog/3154805 <Java工程师面试突击(第3季)>重磅升级,由原来的70讲增至140讲,内容扩充一倍,升级部分内容 ...
微信公众号开发扫码登录（java版）
文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源. 商家信息管理系统登录时可以用微信扫码登录. 参考文档是微信开放平台,**着重需要关注文档(开 ...
网站使用微信扫码登录流程
微信扫码登录是一个标准的oauth 2.0的过程. 1.用户请求访问网站,选择微信登录. 2.redirect到微信二维码页面 3.获取微信登录二维码,请求参数包括本网站的appId和登录成功后跳转回 ...

扫码登录（uniappvue）

扫码登录（uniapp&&vue）

手机 app 扫码登录网站

代码实现

PC端

APP端

扫码登录（uniappvue）相关推荐

最新文章

热门文章