저번 글에서는 QR코드를 생성하는것까지 완료되었고, 이제 QR 코드를 검증
해 주는 부분이 추가 되어야 한다.
QR 코드가 추가된 페이지에 접속하기 위해서 Google Authenticator
나 microsoft Authenticator
등을 이용해서 QR을 찍고, 생성된 OTP 번호를 찍어줄텐데 이 OTP 번호가 생성된 번호와 맞는 번호인지 확인을 하는 코드가 필요하다.
// verifyOTP 함수 정의, 2단계 인증 (TOTP) 토큰을 검증
const verifyOTP = (secret, secure_code) => {
// speakeasy 모듈에서 totp.verify 메서드를 사용하여 TOTP 토큰 검증
var verified = speakeasy.totp.verify({
secret: secret, // 검증할 TOTP 토큰의 비밀키
encoding: "base32", // 비밀키 인코딩 방식 (base32 사용)
algorithm: 'sha512', // 해시 알고리즘 지정 (SHA-512 사용)
token: secure_code // 사용자가 입력한 TOTP 토큰
});
// 검증 결과를 반환 (true: 유효한 토큰, false: 유효하지 않은 토큰)
return verified;
}
다음과 같이 입력 해 주면 된다~~ 사용자와 입력한 값과 생성된 secret Key 가 일치하는지 확인 해 주는 부분인데, 유효할 경우 true
, 유효하지 않을 경우 false
를 반환 해 준다.
verify = verifyOTP(생성된 토큰값, 사용자 입력값);
if(verify == true){
// 인증 성공 했을 경우 소스코드
loginResult.message = 'OTP코드가 일치합니다.';
}else{
// 인증 실패 했을 경우 소스코드
loginResult.message = 'OTP코드가 일치하지 않습니다.';
}
이건 간단하게 작성한거긴한데, 다음과 같은 방식으로 인증 성공 시와 실패 시 코드를 나눠서 작성 해 주면 된다....!!
성공 시 생성된 시크릿키를 DB에 담아주면, 이후 인증 시에는 굳이 QR을 생성하고 인증하는 단계 없이 바로 인증코드만 입력하면 인증 되도록 구현 가능하다. (AWS 2차 인증과 비슷하게 가는 것 같다.)
이제 여기까지 하면 OTP 인증 코드 작성 끝 !!!
해당 코드로 QR을 생성 후 생성된 번호를 입력 하자 번호가 일치하지 않는 경우가 발생했었는데, 다음과 같은 방법으로 해결했다!!
TOTP 방식은 시간 기반으로 인증이 되기 때문에 서버
와 클라이언트
시간이 일치하는지 확인 해야 한다고 한다.
만약 생성된 인증번호로 인증이 되지 않을 경우 콘솔창을 이용해서 서버와 클라이언트 시간이 일치하는지 확인하는 작업이 필요하다!
- iOS에서 표준시 설정하는 방법:
설정> 일반> 날짜 및 시간> 시간대가 정확하지 확인 > 자동 설정 켜기
- Android에서 설정하는 방법
Google OTP를 열고 오른쪽 상단의 "메뉴" 버튼 클릭 > "설정" 클릭 > "인증 코드 생성에 사용하는 시간 수정"을 클릭 >"지금 동기화"를 클릭
이거는 휴대폰 표준 시간을 설정하는 방식이라고 하니 혹시 일치하지 않다면 확인 !!
시간을 일치 시켜도 오류가 발생한다면 확인 해 봐야 할 부분은
먼저 verifyOTP 부분의 algorithm
이다!!
나 같은 경우 algorithm: 'sha512'
해당 코드가 누락되어있었는데, 이걸 추가하니까 오류가 해결되었다.
그런데 이번에는 또 ios 인증이 실패하는 문제가 생겼다. (그 와중에 google 어플로는 실패하고 microsoft 어플로는 성공함..)
확인 해 보니 speakeasy.otpauthURL
해당 부분에 period : 300
이 선언되어 있었다.
해당 코드는 OTP(Timed One-Time Password) 토큰의 갱신 주기
를 설정하는 옵션인데, 300으로 설정하면 토큰이 5분(300초) 마다 갱신된다고 한다..
안드로이드는 이 설정을 무시하는데 ios로 google OTP 어플을 사용하면 이 설정을 무시하지 않는건지 토큰이 갱신이 안되고 있었다.
흠 . . 하여튼 제거하니까 정상적으로 작동됨 !!!!!