vue otp 구현

OTP란 Onte Time Password (일회성 비밀번호) 를 뜻한다

 

이중요소 인증방식(Two Factor Authentication)으로서 2단계 인증으로 많이 사용된다.

 

Back단에서 구현하는 방식도 있지만 오늘은 Front단에서 Vue로 구현!

 

 

1. speakeasy, qrcode INSTALL

 

1) npm install --save speakeasy

2) npm install --save qrcode

 

위와같이 터미널에서 두가지를 라이브러리를 모듈에 추가

 

2. generateSecret 사용 후 secret key 값 return 받기

 

const secret = speakeasy.generateSecret({
	length: 20,
	name: 'testId@naver.com',
	algorithm: 'sha512',
});

 

1) return data

{ ascii: '3[.y%wqCUVS?>d[t^4am',
  hex: '335b2e79257771435556533f3e645b745e34616d',
  base32: 'GNNS46JFO5YUGVKWKM7T4ZC3ORPDIYLN',
  otpauth_url: 'otpauth://totp/testid%40naver.com?secret=GNNS46JFO5YUGVKWKM7T4ZC3ORPDIYLN' }

 

 

3. Google OTP 호환되는 URL 만들기

const url = speakeasy.otpauthURL({
	secret: secret.ascii,
	issuer: 'OTP TEST', 
	label: 'jinseo@gmail.com',
	algorithm: 'sha512',
	period: 30,
});

 

secret  : 위 generateSecret 에서 구한 ascii 값

issuer : TITLE

period :  OTP에서 갱신 주기 set

 

 

4. QRCode 만들기

 

QRCode.toDataURL(url, (err, imgData) => {
	console.log(imgData);
});

console log 값 

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANQAAADUCAYAAADk3g0YAAATM0lEQVR4Xu3d3a4buw4D4Pb9H7oHOFedBJhvE5KTdIW9la0fipQ90yTr......

 

브라우저에 입력시 qrcode img 조회가능 

 

5. QRCode 인증값 만들기

 

const verified = speakeasy.totp.verify({
	secret: secret.base32,
	encoding: 'base32',
	algorithm: 'sha512',
	token: 892168,
});

- token은 Google OTP App 에서 토큰 num번호가 들어가야 한다 

- return 값은 true 아니면 false 로 반환된다.

 

6.  "list" argument must be an Array of Buffers 오류 발생시 대처

 

"node_modules / speakeasy / index.js 안의 39~ 41 행 코드를  아래와 같이 변경

if (!Buffer.isBuffer(secret)) {
    secret = encoding === 'base32' ? new Buffer(base32.decode(secret)) : new Buffer(secret, encoding);
  }

 

위와같이 사이트에 OTP 인증 QR코드를 생성

 

 

- Script 부분-

import speakeasy from 'speakeasy';
import QRCode from 'qrcode';

export default {
	data() {
		return {
			secret: {},
			secreatId: '',
			imgData: '',
			algorithm: 'sha512',
			token: '',
			loginId: '',
			otpCheck: false,
		};
	},
	methods: {
		checkOTP() {
			this.otpCheck = true;
			const secret = speakeasy.generateSecret({
				length: 20,
				name: this.loginId,
				algorithm: this.algorithm,
			});
			this.secret = secret;

			const url = speakeasy.otpauthURL({
				secret: secret.ascii,
				issuer: 'OTP TEST', // OTP 앱에 표시되는 부분
				label: this.loginId,
				algorithm: this.algorithm,
				period: 30,
			});

			QRCode.toDataURL(url, (err, imgData) => {
				console.log('err', err);
				this.imgData = imgData;
			});
		},
		tokenCheck() {
			const verified = speakeasy.totp.verify({
				secret: this.secret.base32,
				encoding: 'base32',
				algorithm: this.algorithm,
				token: this.token,
			});
			if (verified) {
				alert('PASS');  // true 
			} else {
				alert('NONE'); // flase  
			}
		},
	},
};

 

-Front 부분 - 

<template>
	<v-container>
		<v-card class="width_500 mt-3 mx-auto">
			<v-card-title class="text-center">
				LOGIN
			</v-card-title>

			<v-text-field label="id" v-model="loginId"></v-text-field>
			<v-text-field label="password" type="password"></v-text-field>
			<v-row>
				<v-col class="text-right">
					<v-btn @click="checkOTP()">확인</v-btn>
				</v-col>
			</v-row>
		</v-card>
		<v-card class="width_500 mt-3 mx-auto" v-if="otpCheck">
			<v-card-title class="text-center">
				OTP 인증
			</v-card-title>
			<v-img :src="imgData"></v-img>
			<v-text-field label="코드번호" v-model="token"></v-text-field>
			<v-row>
				<v-col class="text-right">
					<v-btn @click="tokenCheck()">확인</v-btn>
				</v-col>
			</v-row>
		</v-card>
	</v-container>
</template>

 

 

구글 OTP App 설치 경로

Android - play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=ko

Google OTP - Google Play 앱

ios - apps.apple.com/kr/app/google-authenticator/id388497605

‎Google Authenticator