QR코드 인증방식 원리

QR코드란?

QR 코드는 Quck Response Code의 약자로 컴퓨터가 만든 흑백 격자무늬 패턴 코드입니다.

이 코드를 통해 정보를 나타낼 수 있는 매트릭스 형태의 이차원 코드입니다.

각 사각형 또는 점은 문자, 숫자 또는 기호와 같은 정보를 나타냅니다.

QR 코드는 어디에 사용될까?

QR 코드는 웹사이트 URL, 쿠폰, 제품 코드 또는 연락처 정보와 같은 정보를 인코딩하는 데 자주 사용됩니다.

 

내가 하려고 하는 것

앱을 이용해 QR로그인을 생성하고 TV에서 편리하게 로그인할 수 있도록 한다.

1. TV에서 로그인 시도 시, QR코드를 제공한다.

2.앱에서 QR코드 인식 시, 계정 정보를 TV로 전달한다.

3. TV에서 로그인이 완료된다.

 

QR 코드의 인증방식

1. 사용자가 앱에 로그인한다.

2. 사용자가 QR 코드를 요청하면 TV에 QR코드를 생성합니다. (제한시간이 있거나 일회성)

3. 사용자는 QR 코드를 스캐닝합니다.

4. 스캐닝한 앱은 인코딩된 정보를 해독하과 확인하기 위해 서버로 보냅니다.(정보에는 QR 코드의 고유 식별자와 기타 인증 관련 정보가 포함)

5. 서버는 정보를 확인하고 사용자의 신원을 확인하고 로그인을 허용하는 응답을 다시 보냅니다.

6. 사용자는 로그인을 수행할 수 있습니다.

 

QR인증 기능의 단점

QR코드를 캡처하여 타인에게 보낼경우 원격 인증이 가능해집니다.

즉, 제3자가 해당 인증코드를 사용할 수 있습니다.

 

네이버의 QR로그인 동작과정

QR로그인에 접근하면 QR코드가 생성됩니다.

해당 QR 코드를 휴대폰으로 찍으면 앱에서 로그인을 하는 화면로그인을 허락하겠냐는 메시지가 출력됩니다.

 

QR 코드를 식별하면 다음과 같은 URL로 이동하게 합니다.

https://nid.naver.com/nidlogin.qrcode?mode=qrcode&qrcodesession=s3IWPeX2kjdnraCtMSYvGdIUyvRWmB5K

mode는 qrcode

qrcodesession은 매번 새로 생성됩니다.

 

개발자 도구의 Console

qr 로그인을 시도하면 해당 세션에 대해서 eventStream을 연결하고 10초마다 ping으로 연결을 확인하는 것을 볼 수 있습니다.

 

Javascript

var Polling = function (option) {
	"use strict";
	var nativeEventSource = window.EventSource !== undefined;

	function loggingPanel(msg) {
		try {
			console.log(msg);
		} catch (e) {}
	}
	var receiver = null;
	return {
		init: function () {
			loggingPanel("init");
			loggingPanel('event source is ' + (nativeEventSource ? "enable" : 'disable'));
			var session = getObjValue("qrcodesession");
			loggingPanel(session +" init");
			receiver = new EventReceiver('/push/qrcode?session='+session);
			loggingPanel('enable session ' + session);
			receiver.then(function (data){
				if (isObjExist("isPollingDisabled")) {
					console.log("polling disabled")
					return;
				}
				loggingPanel('data('+new Date().toString()+'): ' + JSON.stringify(data));
				try {
					if (data.msgType=="CANCEL") {
						alert(getObjValue("alert_cancel"));
						qrCancel();
					} else if (data.msgType=="CHECK" || data.msgType=="ERROR") {
					} else {
						doLogin();
					}
				} catch (e) {}
				receiver.close();
			}).ping(function (ping) {
				loggingPanel('ping: ' + ping.time);
			}).error(function (error) {
				loggingPanel('error:' + JSON.stringify(error));
			});
		},
		close: function () {
			loggingPanel("close");
			receiver.close();
		}
	};
};

Javascript는 손놓은지 좀 오래됬지만 window.EventSource를 수행하고 연결되어있는 경우 console에 enable을 출력합니다.

 

위의 정보를 토대로 네이버에서는 WebSocket 방식대신 SSE(Server Sent Event)를 활용했음을 알 수 있습니다.

 

WebSocket과 SSE

일반적인 HTTP 방식과 다르게 유저가 QR를 캡처하여 서버에 전송하면 양방향 통신이 가능해야 합니다.

이럴 경우 두가지의 선택지가 있습니다.

 

SSE의 경우에는 HTML5부터 등장하여 서버가 필요할때마다 클라이언트에게 데이터를 풀 수 있게 해주는 서버 푸시 기술입니다.

 

SSE는 다음과 같은 장점을 가집니다.

• 전통적인 HTTP를 통해 통신하므로 다른 프로토콜이 필요 없습니다.
• 표준 기술답게 IE를 제외한 브라우저 대부분을 지원합니다.
• 재접속 처리 같은 대부분의 저수준 처리가 자동으로 됩니다.
• polyfill을 이용해 브라우저가 지원하지 않는 API를 크로스 브라우징가능합니다.
• 무엇보다 간편하다

SSE는 다음과 같은 단점을 가집니다.

• 빈도가 높은 업데이트 또는 지연 시간이 짧은 통신이 필요한 경우 WebSocket보다 느리고 응답성이 낮습니다.
• 양방향 통신이 지원되지 않습니다.

 

WebSocket의 경우에는 완전한 양방향 통신을 지원합니다.

WebSocket라는 독자 프로토콜이 사용되는 표준 기술이며, 브라우저 지원 범위도 더 넓습니다.

 

대게 채팅이나 게임 같이 사용자가 서버의 데이터에 즉각 반응해야 하는 경우, 양방향 통신이 빈번하게 발생하는 경우에는 WebSocket을 사용하는 것이 좋습니다.

 

WebSocket은 다음과 같은 장점을 가집니다.

• 한번의 연결 후 지속적인 연결이 가능해서 불필요한 커넥션 오버헤드를 줄일 수 있습니다.
• real time 서비스가 가능합니다.

 

WebSocket은 다음과 같은 단점을 가집니다.

• 비정상적으로 연결이 끊어졌을 때 대응이 필요하는 등 구현이 복잡해진다.
• 서버와 클라이언트 간 Socket 연결을 유지하는데 SSE보다 더 많은 리소스가 활용됩니다.

 

 

 

 

 

참고자료

https://www.keyence.co.kr/ss/products/auto_id/barcode_lecture/basic_2d/qr/

QR 코드란 무엇입니까?｜2D 코드의 기본｜"바코드의 지식과 힌트" 바코드의 규격이나 판독 노하우

https://hi098123.tistory.com/371

QR코드 인증방식 원리

https://velog.io/@ch_kang/Spring-QR-Code-Login%EC%9D%84-%EA%B5%AC%ED%98%84%ED%95%B4%EB%B3%B4%EC%9E%90

Spring) QR-Code Login을 구현해보자

https://spoqa.github.io/2014/01/20/sse.html

SSE를 이용한 실시간 웹앱