핸드폰에 있는 Google OTP, 크롬 브라우저에서 똑같이 사용하기

그밖의

매번 OTP를 입력할 때마다 핸드폰을 켜는 게 너무 귀찮아서
핸드폰에 있는 Google OTP를 브라우저에서 사용하고 싶어서 찾아보고 그 방법을 기록해 둔다.

1. 크롬 확장프로그램 설치

크롬 웹스토어에서 “인증 도구“를 찾아서 설치 해준다.

확장프로그램 "인증 도구" 목록 캡쳐 이미지

2. 핸드폰의 OTP 내보내기

1. Google Authenticator 앱을 켜고 좌측 상단 햄버거 바를 눌러 “계정 전송” 메뉴로 접속.

햄버거 메뉴를 누른 이미지


2. “계속“을 눌러 보안 인증을 하고 내보내고자 하는 서비스의 OTP를 선택하고 “내보내기“.


3. QR코드를 “캡쳐“해두고 “내보낸 계정 모두 유지“를 선택.
유지를 해야 핸드폰과 브라우저에서도 동시에 사용할 수 있으니 주의하자.

3. 확장프로그램에 OTP 복사하기

1. 캡쳐한 이미지를 확장프로그램이 인식할 수 있게 아래 코드를 복사하여 HTML 파일을 생성한다.
HTML 파일로 만들지 않고 이미지 자체를 브라우저로 열고 스캔을 시도하면 스캔이 실패한다. (왜?)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QR</title>
</head>
<body>
  <img src="이미지 경로" alt="">
</body>
</html>

⚠️ img 태그의 이미지 경로는 캡쳐한 이미지로 적절히 변경하자.
경로 관련 참고글 (외부링크)


2. 생성한 HTML 파일을 더블클릭 해서 브라우저로 열고 확장프로그램으로 스캔한다.

빨갛게 표기한 버튼을 누르면 QR코드를 스캔할 수 있는데,
로컬 파일로부터 QR 코드 스캔을 시도“한다고 물어보면 “아니오“를 눌러 브라우저에서 QR코드를 스캔할 수 있게 할 수 있다.
(확장 프로그램이 안내하는 대로 하면 스캔 실패)

버튼을 누르면 화면이 반투명 되면서 QR 코드를 드래그할 수 있는 영역을 그릴 수 있게 된다.
QR 코드를 드래그해서 추가 해주자.


3. 완료

성공이라는 메세지가 뜨면 OTP의 복제가 끝난다.
이제 핸드폰과 브라우저에서 모두 OTP를 사용할 수 있게 됐다. 🙌🏻


끝.

AuthenticatorGoogleOTP모바일브라우저크롬크롬 확장프로그램
블로그
프로젝트
스터디