Chrome 93부터 웹사이트에서 데스크톱 Chrome의 전화번호를 인증할 수 있습니다.
WebOTP를 사용하면 사용자가 앱 간에 전환하지 않고도 탭 한 번으로 모바일 웹사이트에 전화번호 인증 코드를 입력할 수 있습니다. Chrome 93에서는 이 기능이 데스크톱에도 확장됩니다. 자세한 내용을 알아보려면 계속 읽어보세요.
소개
SMS OTP(일회용 비밀번호)는 일반적으로 전화번호를 인증하거나(예: 인증의 두 번째 단계) 웹에서 결제를 확인하는 데 사용됩니다. 그러나 데스크톱에서 모바일로 전환하고 SMS 앱을 열고 원래 웹사이트에서 다시 데스크톱에서 OTP를 기억하고 입력하는 전체 흐름이 더 복잡해집니다. 이런 식으로 실수하기가 쉽고 피싱 공격에 취약합니다.
WebOTP API를 사용하면 웹사이트에서 프로그래매틱 방식으로 SMS 메시지에서 일회용 비밀번호를 가져오고 앱을 전환하지 않고도 탭 한 번으로 사용자를 위해 양식을 자동으로 채울 수 있습니다. SMS는 특정 형식이 있으며 출처에 바인딩되므로 피싱 웹사이트에서 OTP를 도용할 위험도 완화됩니다.
WebOTP에서 아직 지원되지 않는 한 가지 사용 사례는 원격 데스크톱 기기나 노트북의 전화번호 인증 요청을 타겟팅하는 것입니다. 이 API는 전화 통신 기능이 있는 기기에서만 작동합니다. 이제 API는 다른 기기에서 수신된 SMS의 수신 대기를 지원하여 사용자가 Chrome 93의 데스크톱에서 전화번호 인증을 완료할 수 있도록 지원합니다.
사용해 보기
기본 요건
- 데스크톱 또는 노트북 컴퓨터 (Windows, Mac, Linux 또는 ChromeOS)
- Google Play 서비스 버전 20.30.12 이상을 실행하는 Android 휴대전화
- 데스크톱, 노트북 및 모바일에서 Chrome 93 이상 Chrome 93 베타는 2021년 7월 말부터 제공됩니다.
- 데스크톱 Chrome과 모바일 Chrome 모두에서 동일한 Google 계정에 로그인해야 합니다. 예를 들어 https://myaccount.google.com/ 또는 https://mail.google.com을 통해 이루어집니다. 동기화를 사용 설정할 필요가 없습니다.
- Android 기기에서 '설정->Google'을 통해 Android에 로그인해야 합니다.
- Android 기기의 Chrome 93이 기본 브라우저여야 합니다.
- Chrome 93이 Android 기기에서 포그라운드 또는 백그라운드에서 실행되고 있어야 합니다.
데모
데스크톱에서 이 원활한 전화번호 인증 절차를 직접 시도해 보려면 다음 단계를 따르세요.
- 데스크톱에서 https://web-otp-demo.glitch.me/로 이동합니다. 확인 버튼을 클릭합니다.
- 두 번째 휴대전화에서 Android 기기로 화면에 표시된 정확한 문자 메시지를 전송합니다.
- SMS가 Android 기기로 전송되면 데스크톱에서 전화번호를 인증할지 묻는 대화상자가 표시됩니다. 제출을 눌러 승인합니다.
- 데스크톱에서 Android 기기로 전송되는 인증 코드를 입력란에 자동 완성해야 합니다.
WebOTP API 작동 방식
WebOTP API의 작동 방식을 살펴보겠습니다.
…
const otp = await navigator.credentials.get({
otp: { transport:['sms'] }
});
if (otp.code) input.value = otp.code;
…
SMS 메시지는 원본 귀속 일회성 코드 형식이어야 합니다.
Your OTP is: 123456.
@web-otp-demo.glitch.me #123456
마지막 줄에는 앞에 @가 오는 OTP와 #가 앞에 오는 OTP가 뒤에 오는 출처가 포함됩니다.
문자 메시지가 도착하면 정보 표시줄이 나타나고 사용자에게 전화번호를 확인하라는 메시지가 표시됩니다. 사용자가 Verify 버튼을 클릭하면 브라우저가 자동으로 OTP를 사이트에 전달하고 navigator.credentials.get()를 확인합니다. 그러면 웹사이트에서 OTP를 추출하여 인증 절차를 완료할 수 있습니다.
WebOTP API로 웹에서 전화번호 인증하기에서 자세히 알아보세요.
데스크톱에서 WebOTP API를 사용하는 방법
SMS를 통한 전화번호 인증은 널리 사용되며 플랫폼에 구애받지 않습니다. 휴대기기의 사용 사례는 데스크톱 기기에 적용 가능해야 합니다.
데스크톱에서 WebOTP API를 사용하는 것은 모바일에서와 동일하므로 웹사이트는 여러 플랫폼에 동일한 코드를 배포할 수 있습니다.
브라우저 지원 및 상호 운용성
이 기능은 Chrome 동기화를 기반으로 하기 때문에 현재 Chrome에서만 작동합니다. Chrome의 iOS 또는 iPad OS에서는 SMS 수신 및 전송이 지원되지 않습니다.
Chromium 이외의 브라우저 엔진은 WebOTP API를 구현하지 않지만 Safari는 input[autocomplete="one-time-code"] 지원과 동일한 SMS 형식을 공유합니다. Safari에서는 사용자가 iMessage 자동 동기화를 사용 설정한 경우 iOS 또는 iPadOS에서 일치하는 출처와 함께 출처 바운드 일회성 코드 형식이 포함된 SMS가 수신되면 메시지가 macOS로 전달됩니다. 사용자가 입력란에 포커스를 맞추면 Safari에서 사용자에게 입력할 OTP를 제안합니다.
의견
여러분의 의견은 WebOTP API를 개선하는 데 큰 도움이 됩니다. 사용해 보고 의견을 알려주세요.
사진: Luis Villasmil(Unsplash 제공)