二维码的实践应用

一、前端可用的二维码的生成器---QRCode.js

QRCode.js 是用于制作 QRCode 的 javascript 库。QRCode.js 支持跨浏览器，使用 HTML5 Canvas 和 DOM 中的表格标签。QRCode.js 没有依赖项

new QRCode(document.getElementById("qrcode"), {
            text: "http://www.baidu.com", // 生成二维码的内容
            width: 128, //生成的二维码的宽度
            height: 128, //生成的二维码的高度
            colorDark : "#000000", // 生成的二维码的深色部分
            colorLight : "#ffffff", //生成二维码的浅色部分
            correctLevel : QRCode.CorrectLevel.H // 纠错等级
        });

“纠错能力”具备4个级别，用户可根据使用环境选择相应的级别。调高级别，纠错能力也相应提高，但由于数据量会随之增加，编码尺寸也会变大。级别L: 约7%；级别M: 约15%；级别Q: 约25%；级别H: 约30%；

在使用 new QRCode() 生成二维码时，我们可以将其过程大致分为三个步骤：

1. 处理配置信息，即判断用户是否传入配置信息，若有就使用，否则就用默认的值。
2. 生成绘制二维码的对象。绘制方式分为 Canvas 和 table表格，代码内部会根据环境来判断使用那种方式。
3. 调用 QRCode.prototype.makeCode 方法制作二维码。
4. 调用 QRCode.prototype.makeImage 方法生成图片 url。

二、实践：vue在移动端怎么动态生成二维码并实现长按保存图片?

思路其实就是将链接先转换成二维码，然后再用canvas调用toDataURL()的方法得到以base64编码的url,然后用img标签加载出来

至于为什么非得转换成图片呢？这就是利用了图片在移动端浏览器中或者微信中都是有自带的长按响应事件的，当你长按对象是图片的话就会提示你保存图片

第一步:安装qrcode.js包
npm install qrcode --save-dev
第二步:在vue中引入
import QRCode from 'qrcode'；//如果有很多页面使用的话可以在main中引入，挂载在全局；

<div id="code">
<canvas id="canvas" ></canvas>
</div>

components: {
  QRcode:QRCode //注册组件
},
mounted(){
  var xxx="www.baidu.com";
  this.getUrl(xxx);
},
methods:{
  getUrl(xxx){
    var canvas=document.getElementById("canvas"); //获取到canvas
    var code=document.getElementById("code"); //获取到code容器
    QRCode.toCanvas(canvas,xxx, error=> {
      if (error) console.error(error);
      console.log("success!");
    });
    var image = new Image(); //实例一个img
    image.src = canvas.toDataURL("image/png"); //转换成base64格式路径的png图片 
    image.style.width = "100%"; //设置样式
    code.appendChild(image); //添加到code 容器中
    canvas.style.display = "none"; //隐藏掉canvas 
  }
}

三、业务实践：如何实现扫码登录功能

分析：扫码登录中涉及3个角色，PC端，手机端，服务端
扫码登录本质上是一种特殊的登录认证方式，我们面对的是两个问题：
● 手机端如何完成认证
● PC端如何完成登录

1.手机端如何完成认证？
二维码怎么生成？
首先，二维码是展示在我们的PC端，所以生成这个操作应该由PC端去请求服务端，获取相应的数据，再由PC端生成这个二维码
二维码包含什么？
服务端必须给这个数据生成惟一的标识作为二维码ID，同时还应该设置过期的时间。PC端根据二维码ID等数据生成二维码
服务端也应该保存二维码的一些状态：未扫描、已成功、已失效
APP认证机制
● APP登录认证的时候除了账号密码，还有设备信息
● 账号密码校验通过，服务端会把账号与设备进行一个绑定，进行持久化的保存，包含了账号ID，设备ID，设备类型等等
● APP每次请求除了携带token key，还需要携带设备信息

因为移动端的设备具备唯一性，可以为每个客户端生成专属token，这个token也不用过期，所以这就是我们可以一次登录，长久使用的原理

2.PC端如何完成登录？
PC端通过token来标识登录状态。那么手机端扫码确认之后，我们的服务端就应该给PC生成相应的token
PC端可以通过轮询获取二维码的状态来进行相应的响应：
● 二维码未扫描：无操作
● 二维码已失效：提示刷新二维码
● 二维码已成功：从服务端获取PC token

来看一看二维码扫码登录的整体的实现流程：

1. 访问PC端二维码生成页面，PC端请求服务端获取二维码ID
2. 服务端生成相应的二维码ID，设置二维码的过期时间，状态等。
3. PC获取二维码ID，生成相应的二维码。
4. 手机端扫描二维码，获取二维码ID
5. 手机端将手机端token和二维码ID发送给服务端，确认登录
6. 服务端校验手机端token，根据手机端token和二维码ID生成PC端token

7. PC端通过轮询方式请求服务端，通过二维码ID获取二维码状态，如果已成功，返回PC token，登录成功

   
   

如何实现扫码支付功能?

常见的扫码支付主要分为主扫（你扫商家）和被扫 （商家扫你）两种；
主扫的核心逻辑
● 判断二维码链接是不是支付链接；
● 判断该支付链接是不是自家的。如果不是，则拦截，目前支付宝的支付链接是“https://qr.alipay.com…”，则允许通过请求服务器，但如果检测是“https://qr.wx.com…”，说明是微信支付链接，会被支付宝屏蔽
● 之后再去解析二维码是否符合自家规则，目前支付宝的二维码是“28”开头，微信一般是”13“开头;解析之后，再判断二维码是否有效；有效则进行支付即可；无效则提示二维码失效

被扫付款逻辑

静态聚合码：
消费者通过这个码使用微信付款，也可以使用支付宝付款，怎么实现的呢？
需要一个前置的中间环节，需要这样的一个通用的二维码来优先判断付款来源方。在技术实现上会有userAgent来判断用户来自哪种客户端。如果是MicroMessenger 则表示微信；AlipayClient是支付宝

---

参考文献：
快捷支付的本质：拆解扫码支付的实现原理
如何实现扫码登录功能
三种方式实现扫码登录
QRCode 源码解析
QRCode纠错功能机制

学习视频：如何实现二维码扫码登录