扫码登录(uniapp&&vue)待验证

6 篇文章 0 订阅

手机 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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值