二維碼的實(shí)踐應(yīng)用

一、前端可用的二維碼的生成器---QRCode.js

QRCode.js 是用于制作 QRCode 的 javascript 庫。QRCode.js 支持跨瀏覽器，使用 HTML5 Canvas 和 DOM 中的表格標(biāo)簽。QRCode.js 沒有依賴項(xiàng)

new QRCode(document.getElementById("qrcode"), {
            text: "http://www.baidu.com", // 生成二維碼的內(nèi)容
            width: 128, //生成的二維碼的寬度
            height: 128, //生成的二維碼的高度
            colorDark : "#000000", // 生成的二維碼的深色部分
            colorLight : "#ffffff", //生成二維碼的淺色部分
            correctLevel : QRCode.CorrectLevel.H // 糾錯(cuò)等級(jí)
        });

“糾錯(cuò)能力”具備4個(gè)級(jí)別，用戶可根據(jù)使用環(huán)境選擇相應(yīng)的級(jí)別。調(diào)高級(jí)別，糾錯(cuò)能力也相應(yīng)提高，但由于數(shù)據(jù)量會(huì)隨之增加，編碼尺寸也會(huì)變大。級(jí)別L: 約7%；級(jí)別M: 約15%；級(jí)別Q: 約25%；級(jí)別H: 約30%；

在使用 new QRCode() 生成二維碼時(shí)，我們可以將其過程大致分為三個(gè)步驟：

  1. 處理配置信息，即判斷用戶是否傳入配置信息，若有就使用，否則就用默認(rèn)的值。
  2. 生成繪制二維碼的對(duì)象。繪制方式分為 Canvas 和 table表格，代碼內(nèi)部會(huì)根據(jù)環(huán)境來判斷使用那種方式。
  3. 調(diào)用 QRCode.prototype.makeCode 方法制作二維碼。
  4. 調(diào)用 QRCode.prototype.makeImage 方法生成圖片 url。

二、實(shí)踐：vue在移動(dòng)端怎么動(dòng)態(tài)生成二維碼并實(shí)現(xiàn)長按保存圖片?

思路其實(shí)就是將鏈接先轉(zhuǎn)換成二維碼，然后再用canvas調(diào)用toDataURL()的方法得到以base64編碼的url,然后用img標(biāo)簽加載出來

至于為什么非得轉(zhuǎn)換成圖片呢？這就是利用了圖片在移動(dòng)端瀏覽器中或者微信中都是有自帶的長按響應(yīng)事件的，當(dāng)你長按對(duì)象是圖片的話就會(huì)提示你保存圖片

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

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

components: {
  QRcode:QRCode //注冊(cè)組件
},
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(); //實(shí)例一個(gè)img
    image.src = canvas.toDataURL("image/png"); //轉(zhuǎn)換成base64格式路徑的png圖片 
    image.style.width = "100%"; //設(shè)置樣式
    code.appendChild(image); //添加到code 容器中
    canvas.style.display = "none"; //隱藏掉canvas 
  }
}

三、業(yè)務(wù)實(shí)踐：如何實(shí)現(xiàn)掃碼登錄功能

分析：掃碼登錄中涉及3個(gè)角色，PC端，手機(jī)端，服務(wù)端
掃碼登錄本質(zhì)上是一種特殊的登錄認(rèn)證方式，我們面對(duì)的是兩個(gè)問題：
● 手機(jī)端如何完成認(rèn)證
● PC端如何完成登錄

1.手機(jī)端如何完成認(rèn)證？
二維碼怎么生成？
首先，二維碼是展示在我們的PC端，所以生成這個(gè)操作應(yīng)該由PC端去請(qǐng)求服務(wù)端，獲取相應(yīng)的數(shù)據(jù)，再由PC端生成這個(gè)二維碼
二維碼包含什么？
服務(wù)端必須給這個(gè)數(shù)據(jù)生成惟一的標(biāo)識(shí)作為二維碼ID，同時(shí)還應(yīng)該設(shè)置過期的時(shí)間。PC端根據(jù)二維碼ID等數(shù)據(jù)生成二維碼
服務(wù)端也應(yīng)該保存二維碼的一些狀態(tài)：未掃描、已成功、已失效
APP認(rèn)證機(jī)制
● APP登錄認(rèn)證的時(shí)候除了賬號(hào)密碼，還有設(shè)備信息
● 賬號(hào)密碼校驗(yàn)通過，服務(wù)端會(huì)把賬號(hào)與設(shè)備進(jìn)行一個(gè)綁定，進(jìn)行持久化的保存，包含了賬號(hào)ID，設(shè)備ID，設(shè)備類型等等
● APP每次請(qǐng)求除了攜帶token key，還需要攜帶設(shè)備信息

因?yàn)橐苿?dòng)端的設(shè)備具備唯一性，可以為每個(gè)客戶端生成專屬token，這個(gè)token也不用過期，所以這就是我們可以一次登錄，長久使用的原理

2.PC端如何完成登錄？
PC端通過token來標(biāo)識(shí)登錄狀態(tài)。那么手機(jī)端掃碼確認(rèn)之后，我們的服務(wù)端就應(yīng)該給PC生成相應(yīng)的token
PC端可以通過輪詢獲取二維碼的狀態(tài)來進(jìn)行相應(yīng)的響應(yīng)：
● 二維碼未掃描：無操作
● 二維碼已失效：提示刷新二維碼
● 二維碼已成功：從服務(wù)端獲取PC token

來看一看二維碼掃碼登錄的整體的實(shí)現(xiàn)流程：

  1. 訪問PC端二維碼生成頁面，PC端請(qǐng)求服務(wù)端獲取二維碼ID
  2. 服務(wù)端生成相應(yīng)的二維碼ID，設(shè)置二維碼的過期時(shí)間，狀態(tài)等。
  3. PC獲取二維碼ID，生成相應(yīng)的二維碼。
  4. 手機(jī)端掃描二維碼，獲取二維碼ID
  5. 手機(jī)端將手機(jī)端token和二維碼ID發(fā)送給服務(wù)端，確認(rèn)登錄
  6. 服務(wù)端校驗(yàn)手機(jī)端token，根據(jù)手機(jī)端token和二維碼ID生成PC端token

  7. PC端通過輪詢方式請(qǐng)求服務(wù)端，通過二維碼ID獲取二維碼狀態(tài)，如果已成功，返回PC token，登錄成功


如何實(shí)現(xiàn)掃碼支付功能?

常見的掃碼支付主要分為主掃（你掃商家）和被掃 （商家掃你）兩種；
主掃的核心邏輯
● 判斷二維碼鏈接是不是支付鏈接；
● 判斷該支付鏈接是不是自家的。如果不是，則攔截，目前支付寶的支付鏈接是“https://qr.alipay.com…”，則允許通過請(qǐng)求服務(wù)器，但如果檢測是“https://qr.wx.com…”，說明是微信支付鏈接，會(huì)被支付寶屏蔽
● 之后再去解析二維碼是否符合自家規(guī)則，目前支付寶的二維碼是“28”開頭，微信一般是”13“開頭;解析之后，再判斷二維碼是否有效；有效則進(jìn)行支付即可；無效則提示二維碼失效

被掃付款邏輯

靜態(tài)聚合碼：
消費(fèi)者通過這個(gè)碼使用微信付款，也可以使用支付寶付款，怎么實(shí)現(xiàn)的呢？
需要一個(gè)前置的中間環(huán)節(jié)，需要這樣的一個(gè)通用的二維碼來優(yōu)先判斷付款來源方。在技術(shù)實(shí)現(xiàn)上會(huì)有userAgent來判斷用戶來自哪種客戶端。如果是MicroMessenger 則表示微信；AlipayClient是支付寶

參考文獻(xiàn)：
快捷支付的本質(zhì)：拆解掃碼支付的實(shí)現(xiàn)原理
如何實(shí)現(xiàn)掃碼登錄功能
三種方式實(shí)現(xiàn)掃碼登錄
QRCode 源碼解析
QRCode糾錯(cuò)功能機(jī)制

學(xué)習(xí)視頻：如何實(shí)現(xiàn)二維碼掃碼登錄

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 他山之石，可以攻玉，你對(duì)產(chǎn)品和架構(gòu)思想都是來自于生活，也來自你對(duì)行業(yè)內(nèi)別的產(chǎn)品和架構(gòu)的學(xué)習(xí)，然后才有了創(chuàng)新。...
    耐寒閱讀 7,989評(píng)論 0贊 3
  • 操作步驟 PC端生成二維碼 手機(jī)端登錄后，才能掃描PC端二維碼。 手機(jī)端掃描二維碼發(fā)送通知給PC端。 手機(jī)端確認(rèn)登...
    何亮hook_8285閱讀 8,143評(píng)論 0贊 1
  • 二維碼，大家再熟悉不過了 購物掃個(gè)碼，吃飯掃個(gè)碼，坐公交也掃個(gè)碼 在掃碼的過程中，大家可能會(huì)有疑問：這二維碼安全嗎...
    趙客縵胡纓v吳鉤霜雪明閱讀 1,157評(píng)論 0贊 2
  • 二維碼登錄的本質(zhì) 二維碼登錄本質(zhì)上也是一種登錄認(rèn)證方式。既然是登錄認(rèn)證，要做的也就兩件事情！ 告訴系統(tǒng)我是誰 向系...
    涅槃快樂是金閱讀 1,823評(píng)論 0贊 32
  • 最近在做一個(gè)關(guān)于二維碼的組件，已發(fā)布，現(xiàn)總結(jié)下。開發(fā)的APP所需支持的最低版本為7.0，最初的方案為掃描使用蘋果自...
    LeverTsui閱讀 14,421評(píng)論 14贊 31

友情鏈接更多精彩內(nèi)容