[API] 금융결제원 API 활용하기 #6. 계좌 QR코드 생성

.계좌 QR코드 생성

사용자 계좌 목록을 보여주는 화면에서 QR생성 버튼을 누르면 QR코드를 생성시켜주도록 만들어보자.

QR생성 버튼을 누르면 /qrcode page 로 이동하게 되고, qrcode.ejs 파일을 호출해준다.

1 2 3 4 5 6 7

/* Server.js */   app.get('/qrcode', function(req, res){     res.render('qrcode'); }) Colored by Color Scripter

cs

우선 qrcode 를 생성시켜주는 코드가 필요한데

이미 잘 만들어진 코드들이 많아서 검색해서 사용해도 좋고 직접 만들어서 사용해도 무방하다.

나는.. 나중에 만들어보는걸로 하고 일단 잘 만들어진 코드를 이용해 볼 것이다.

"qrcode generator javascript" 로 검색해보면 왠만해서 잘 나올 것이다.

이 곳에서 qrcode generator 를 다운받을 것인데,

.zip 으로 다운받은 후 압축을 풀어주면 qrcode.js 라는 파일이 있다.

이 파일을 프로젝트의 public/js/qrcode.js 에 넣어줄 것인데 js 파일들을 관리하는 디렉토리에 넣어주면 될 것이다.

이제 qrcode.ejs 파일을 보면

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<!-- qrcode.ejs -->       <!-- ... -->       <script src="js/qrcode.js"> </script>       <script>     function getQueryStringObject() {         var a = window.location.search.substr(1).split('&');         if (a == "") return {};         var b = {};         for (var i = 0; i < a.length; ++i) {             var p = a[i].split('=', 2);             if (p.length == 1)                 b[p[0]] = "";             else                 b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));         }         return b;     }       var qs = getQueryStringObject();     var jwtToken = sessionStorage.getItem('ourToken');       new QRCode(document.getElementById("qrcode"), qs.fin_use_num);     </script>       <!-- ... --> Colored by Color Scripter

cs

line 7) 다운받은 qrcode.js 파일을 사용하겠다고 명시해주고

line 24~25) fintech_use_num 정보와 jwtToken 정보를 얻고

line 27) fintech_use_num 을 이용하여 새로운 QRCode 를 생성해준다.

그럼 아래 그림과 같이 QRCode가 잘 생성될 것이다.

[API] 금융결제원 API 활용하기 #1.앱 등록 및 Key 발급, 사용자 토큰 발급

[API] 금융결제원 API 활용하기 #2. 로그인(jsonwebtoken)

[API] 금융결제원 API 활용하기 #3. 사용자 정보 조회 API

[API] 금융결제원 API 활용하기 #4. 잔액조회 API

[API] 금융결제원 API 활용하기 #5. 거래내역조회 API

[API] 금융결제원 API 활용하기 #6. 계좌 QR코드 생성