vuejs用APP客户端扫描PC端二维码登录

philadelphia 发布于2019-08-20 19:05 / 3327人阅读

摘要：最近在做客户端扫描端二维码登录，于是记录一下实现过程，前端是，是和安卓客户端安装，就可以了。

最近在做APP客户端扫描PC端二维码登录，于是记录一下实现过程，前端是vuejs，APP是IOS和安卓客户端：
1.安装QRCode，npm i QRCode --save-dev就可以了。
2.安装成功后在对应的单页面中引用import QRCode from "qrcode",如果此时页面没有报错，说明引入成功了
3.向服务端获取qrcode字符串

  getQrcode: function () {
    this.$http.jsonp("这里是接口地址", {}).then((response) => {
      const data = response.body
      if(data.ok === 1) {
         this.qrCode = data.qrCode
         this.screenLogin() //调用生成二维码方法
      }
    })
  },

4.获取到qrcode字符串后生成二维码

  qrcodeShow: function () {
    this.qrcodeShow = true //显示二维码div
    var QRCodeDraw = new QRCode.QRCodeDraw() //创建二维码变量
    var canvas = document.getElementById("qrcode") //获取div
    //开始生产二维码
    QRCodeDraw.draw(canvas, "qrcode:" + this.qrCode, {//this.qrCode是上面获取到的字符串
      width: 300,//二维码宽和高
      height: 300
    }, (err, canvas) => {
      if (err) {
        console.error(err);
      } else {
        console.info("success")
      }
    })
  },

5.html里面二维码div的写法

6.qrcodeShow是在
data () {

return {
  qrcodeShow: false //默认不可见
}

}
6.最后就是获取和发送websocket

  websocket: function() {
    var ws //定义websocket变量
    try {//使用try catch
      var _this = this //this指向
      var WS_URL = "/websocket" //websocket地址
      if (location.protocol == "http:") {
        ws = new WebSocket("ws://"+WS_URL)
      } else {
        ws = new WebSocket("wss://"+WS_URL)
      }
      //接收服务端推送过来的信息
      ws.onmessage = function(event) {//event参数接收
          //接收到服务器推送信息并转换成json对象
          var re = JSON.parse(event.data)
          //判断action是否正确，然后执行登录方法,这里的action是和服务端约定好的参数
          if(re.action === "qrCode") {
            _this.getLogin() //扫描成功调用登录方法
            _this.qrcodeShow = false //隐藏二维码div
          }
      }
      //发送socket给服务端判断
      ws.onopen = (event) => {
        if (this.id) {
          ws.send(JSON.stringify({
            //与服务端约定好发送这两个参数
            room: "topic:" + this.id,
            action: "join"
          }))
        } else if (this.qrCode) {
          ws.send(JSON.stringify({
            room: "qrCode:" + this.qrCode,
            action: "join"
          }))
        } else {
           ws.send(JSON.stringify({
             room: "home",
             action: "join"
           }))
        }
      };
    } catch (ex) {
      if (console)
          console.info(ex);
    }
  }

GPU云服务器云服务器扫描二维码登录扫描二维码扫描二维码接口支付宝扫描二维码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85112.html

聊聊二维码登录

摘要：场景主要的场景有如下几个扫二维码登录版系统比如微信版，在手机端微信登录的前提下，扫二维码确认，自动登录网页版。小结二维码扫描登录是个挺潮流的功能，这要求既有系统增加改造，也要求针对这种形式的登录带来潜在的攻击进行安全防范。序本文主要来研究一下二维码登录的相关场景和原理。场景主要的场景有如下几个： app扫二维码登录pc版系统比如微信web版，在手机端微信登录的前提下，扫二维码...

Tikitoo 2019-06-21 16:38 评论0 收藏0
微信第三方登录（PC网站、APP、移动网页）

摘要：最近搞微信第三方登录，搞蒙圈了。当你把服务号绑定到开放平台之后，网页授权返回的数据会多一个，同一个微信账号在同一个开放平台账号下的是一致的。最近搞微信第三方登录，搞蒙圈了。我们的业务有两个场景需要使用微信第三方登录：1、APP 第三方登录2、H5网页第三方登录，具体流程：用户微信端收到一个二维码--->扫码后同意微信授权-->绑定手机号码一开始纠结着是不是需要申请公众号，找了个专...

RobinQu 2019-07-01 11:05 评论0 收藏0
beecloud对接——微信支付

摘要：微信支付方式付款码支付适用于线下场所支付支付是指商户通过调用微信支付提供的接口，在支付场景中调起微信支付模块完成收款。主要用于触屏版的手机浏览器请求微信支付的场景。可以方便的从外部浏览器唤起微信支付。微信支付方式（https://pay.weixin.qq.com/sta...）： 1、付款码支付————————适用于线下场所 2、JSAPI支付————————JSAPI支付是指商户...

FingerLiu 2019-07-01 12:32 评论0 收藏0
基于 Swoole 的微信扫码登录

摘要：随着微信的普及，扫码登录方式越来越被现在的应用所使用。这里基于微信公众平台的带参数临时二维码，并且结合的服务实现扫码登录。对于用户扫临时的二维码，微信会触发相应的回调事件，我们需要在该回调事件中处理用户的扫码行为。随着微信的普及，扫码登录方式越来越被现在的应用所使用。它因为不用去记住密码，只要有微信号即可方便快捷登录。微信的开放平台原生就有支持扫码登录的功能，不过大部分人还是在用公众...

Half 2019-06-28 14:39 评论0 收藏0