Preface

今日的目標很簡單，就是將之前取得的 NFT 的資料先經過一些處理（Add Salt），再透過一些套件產生出一組 QRCode。

這組 QRCode 可以再被我們系統的另一個頁面掃描，掃描後可以再與合約互動，進行驗證的動作。

今日會做到掃描後可以取得資料的狀態，驗證的部分就交給之後在多做著墨了！

Working Flow

Review

還記得之前我完成了 Verify 這個頁面，可以透過 Opensea 的 end-point 取得 Ticket 的資料，並顯示 Ticket 的圖案與張數在頁面上。

Generate QRcode

QRcode npm

node-qrcode 是一個 npm 套件，可以將資訊（type: String）轉成一個 2d 的 QRcode（俗稱二維碼 XD）。

它除了可以使用在 Server 也可以運作在 Client 端，同時也可以在 cli 中使用，是個好用又方便的套件，generate QRcode 我都會使用這個套件。

使用前先 npm 套件即可：

npm install --save qrcode
// 或是 
npm i --save qrcode

Generate Flow

這邊介紹一下我設計的「產生 QRCode」的流程

1. 首先先取得 NFT 資訊。
2. 將這些資料丟到一個 useState() 中。
3. 將得到的資料做預處理。
4. 透過 qrcode 套件產生 QRcode。
5. 按下顯示的圖案時可以轉變成 QRcode
6. 用手機掃描看看能不能取得正確的資訊。

Generation Implement

我原本在【DAY3】的時候有提到這個系統的驗證概念，主要是想將擁有 ticket 的地址 addr add salt（再做加減乘除或 hash()），最後再去做拆解便可以認證這個 ticket 的擁有者是否真的是 addr。

但是後續驗證方法我想要再多做一些改變以確保安全性與隱私性，因此這邊會先暫時先不做說明。

另外 generate QRcode 的部分會使用到三個 useState()：
string nftUrl: 用來儲存 add salt 後的資料。
string imgUrl: 用來儲存要放在 image.src 上的 url。
boolean hideNft: 用於顯示 QRcode 與隱藏 NFT 圖案的布林值。

// ? 先 import toDataUrl 和拿來雜湊的 keccak256
import { toDataUrl } from 'qrcode';
import keccak256 from 'keccak256';

// ? options 是關於 QRCode 的一些細節
let opts = {
    errorCorrectionLevel: 'H',
    type: 'image/jpeg',
    quality: 0.3,
    margin: 4,
    color: {
      dark:"#000000",
      light:"#FFFFFF"
    }
}

const handleQRCode = () => {
    // ? add salt
    let url = buf2hex(keccak256("Audience Ticket Verify!" + accounts[0]));
    setNftUrl(url);
    
    // ? 透過 toDataUrl 產生 QRCode 的 url
    toDataURL(nftUrl, opts, (err, url) => {
      if (err) throw err;
      setImgUrl(url);
      setHide(true);
    })
} 

在 QRCode 製作之前可以依照想要的樣式調整成你想要的結果。

• errorCorrectionLevel: QRCode 產生的容錯率，就是在 QRCode 受汙損的時候還是可以正常被掃描。
  • 等級分成 Low、Medium、Quartile、High。等級越低可以更容易的在受汙染被系統辨識。
  • 這邊因為是用電子裝置因此用 'H'。
• type: 可以選擇要產生何種形式？可選擇 png、jpeg 或 webp。
• quality: 解析度。
• margin: 外圍界線（越大外圍越多）
• color: 就是深色與淺色的顏色各為什麼。

在 QRCode npm 的官網中提供的示範是使用 QRCode 這個 object，但我實做的時候會跑出這個 error:

ERROR in ./src/Verify.js 62:4-20

export 'QRCode' (imported as 'QRCode') was not found in 'qrcode' 
(possible exports: create, toCanvas, toDataURL, toString)

我按照他的建議直接 import toDataUrl 就可以使用了。

另外使用 hideNft 的流程就不做贅述了，之前做過很多次類似的機制！

利用上面的程式最後可以產生一個 QRCode：

用手機掃描的確可以掃出正確的資訊（hash(地址)）：

QRCode Scanner

QRCode Scanner 的部分就比較簡單了，我會比較快速的帶過。

這邊直接開啟一個新的分頁。

import CreateQRScanner from 'component-qrscanner';

const QRScan = (e) => {
  const fn = (e) => {
    if(e.text) {
      alert('text: ' + e.text);
    }
    else {
      alert('error: ' +  e.error);
    }
  }
  const scanner = new CreateQRScanner(fn);
  scanner.start()
  return ( 
    <div></div>
  );
}
 
export default QRScan;

使用的是 component-qrscanner 這個套件。

npm i component-qrscanner

需要 import CreateQRScanner

import CreateQRScanner from 'component-qrscanner'

此外這邊只是測試，因此沒有太多其它的內容。

首先按照官網示範的 function fn 並透過 event 來抓取得到的資訊。

呼叫一個新的 QRScanner 物件，並使用 scanner.start() 便會開始掃描了。

可以看到結果：

可以成功取得上面得到的那一串 hash 值。

Closing

用一些套件時很常會遇到版本或是套件出現錯誤的問題，雖然有時候沒辦法查到解決的方法，但找到問題所在還有解決問題也是成為工程師的必經之路吧！

Ref:

• QRCode npm
• component-qrscanner npm