Google OTP 사용해보기 - 2

지난 시간에 설정을 완료했다면 이번에는 직접 Google OTP를

이용해 QR 코드를 생성해보겠습니다.

 

먼저 아래의 코드를 보면 GoogleAuthenticatorKey를 이용해 키를 생성합니다.

생성한 키를 이용해 QR 코드를 생성합니다.

 

GoogleAuthenticatorQRGenerator.getOtpAuthTotpURL 함수를 호출하여 

QR코드 확인하는 URL이 생성됩니다.

try{
    GoogleAuthenticator gAuth = new GoogleAuthenticator();
    GoogleAuthenticatorKey key = gAuth.createCredentials();
    
    //생성된 Key!
    String Key = key.getKey();    
    String url = GoogleAuthenticatorQRGenerator.getOtpAuthTotpURL("test", "123456", key);
    
}catch(Exception e){
    e.printStackTrace();
}

URL 생성이 완료가 되었다면 키와 url, 키를 저장합니다.

저장한 URL을 우리가 알고 있는 QR 코드의 형태로 화면에 표현하도록 하겠습니다.

다음의 자바스크립트를 사용했습니다.

 

jquery.qrcode.min.js

qrcode.js

 

위 스크립트는 다운로드 가능하도록 첨부하겠습니다.

아래와 같이 jsp에서 구현하면 div에 qr코드가 생성됩니다.

<div id="qrcodeCanvas"></div>

jQuery('#qrcodeCanvas').qrcode({
      width : 150,
      height: 150,
      text  : '<c:out value="${otp.qrcodeUrl}" escapeXml="false"/>'
});

QR 검증하기

위에서 생성했던 QR을 검증하기 위해서는 핸드폰에 설치했던 Google Auth 앱에 QR을 등록합니다.

등록하였더면 생성되는 번호를 입력하여 검증하여 이상 없음을 사용자에게 알려 줍니다.

 

검즘 코드는 다음과 같습니다.

여기서 TimeUnit.SECONDS.toMillis(30)). setWindowSize(5) 설정은 AWS의 인증처럼 연속된 숫자를 2번

입력받아 확인하기 위한 설정입니다.

30초간 windowsize를 유지하는데 이유는 OTP 번호의 변경 주기가 10초 이기 때문에 30초면 2번의 연속 숫자 입력 가능합니다.

 

GoogleAuthenticatorConfigBuilder gAcb = new GoogleAuthenticatorConfigBuilder().setTimeStepSizeInMillis(TimeUnit.SECONDS.toMillis(30)).setWindowSize(5);
GoogleAuthenticator gAuth = new GoogleAuthenticator(gAcb.build());

check = gAuth.authorize(key, 1111);

여기까지 완료했다면 기본적인 Google OTP를 이용해 QR 코드를 생성해 보는 것은 성공입니다.

그런데 이전에 말했듯이 QR 코드에는 더 많은 정보를 저장하고 활용이 가능합니다.

다음에 기회가 실전에서 활용해 보도록 하겠습니다.