Chrome 93부터 웹사이트에서 데스크톱 Chrome의 전화번호를 인증할 수 있습니다.
WebOTP를 사용하면 사용자가 앱 간에 전환하지 않고도 모바일 웹사이트에서 전화번호 인증 코드를 한 번에 입력할 수 있습니다. Chrome 93에서는 이 기능을 데스크톱으로 확장합니다. 자세한 내용을 알아보려면 계속 읽어보세요.
소개
SMS OTP(일회용 비밀번호)는 일반적으로 전화번호를 확인하는 데 사용됩니다(예: 인증의 두 번째 단계로 사용하거나 웹에서 결제를 확인하는 경우). 하지만 데스크톱에서 모바일로 전환하고, SMS 앱을 열고, OTP를 기억한 후 데스크톱의 원래 웹사이트에서 다시 입력하는 전체 흐름은 불편함을 가중시킵니다. 이 방법은 실수가 쉽고 피싱 공격에 취약합니다.
WebOTP API를 사용하면 웹사이트에서 SMS 메시지에서 일회용 비밀번호를 프로그래매틱 방식으로 가져와 앱을 전환하지 않고도 탭 한 번으로 사용자의 양식을 자동으로 작성할 수 있습니다. SMS는 특정 형식을 사용하며 출처에 연결되므로 피싱 웹사이트에서 OTP를 도용하는 위험도 완화됩니다.
WebOTP에서 아직 지원되지 않는 한 가지 사용 사례는 원격 데스크톱 기기 또는 노트북의 전화번호 확인 요청을 타겟팅하는 것입니다. 이 API는 전화 기능이 있는 기기에서만 작동합니다. 이제 API는 사용자가 Chrome 93의 데스크톱에서 전화번호 인증을 완료할 수 있도록 다른 기기에서 수신된 SMS를 리슨하는 기능을 지원합니다.
사용해 보기
기본 요건
- 데스크톱 또는 노트북 컴퓨터 (Windows, Mac, Linux 또는 ChromeOS)
- Google Play 서비스 버전 20.30.12 이상을 실행하는 Android 휴대전화
- 데스크톱 또는 노트북과 모바일 모두에서 Chrome 93 이상 2021년 7월 말부터 Chrome 93 베타를 사용할 수 있습니다.
- 데스크톱 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가 포함되어 있습니다.
문자 메시지가 도착하면 정보 표시줄이 표시되고 사용자에게 전화번호를 인증하라는 메시지가 표시됩니다. 사용자가 Verify 버튼을 클릭하면 브라우저가 자동으로 OTP를 사이트로 전달하고 navigator.credentials.get()를 확인합니다. 그러면 웹사이트에서 OTP를 추출하고 인증 절차를 완료할 수 있습니다.
WebOTP API로 웹에서 전화번호 인증하기에서 자세히 알아보세요.
데스크톱에서 WebOTP API를 사용하는 방법
SMS를 통한 전화번호 인증은 널리 사용되며 플랫폼에 종속되지 않습니다. 휴대기기의 모든 사용 사례는 데스크톱 기기에 적용할 수 있어야 합니다.
데스크톱에서 WebOTP API를 사용하는 방법은 모바일에서 사용하는 방법과 동일하므로 웹사이트에서 플랫폼 전반에 동일한 코드를 배포할 수 있습니다.
브라우저 지원 및 상호 운용성
이 기능은 Chrome 동기화를 기반으로 하므로 현재 Chrome에서만 작동합니다. Chrome에서 iOS 또는 iPadOS에서 SMS를 수신하고 전송하는 기능은 지원되지 않습니다.
Chromium 이외의 브라우저 엔진은 WebOTP API를 구현하지 않지만 Safari는 input[autocomplete="one-time-code"] 지원과 동일한 SMS 형식을 공유합니다. Safari에서는 사용자가 iMessage 자동 동기화를 사용 설정한 경우 iOS 또는 iPadOS에서 일치하는 출처와 함께 출처에 연결된 일회용 코드 형식이 포함된 SMS가 도착하면 메시지가 macOS로 전달됩니다. 사용자가 입력란에 포커스를 맞추면 Safari에서 사용자가 입력할 OTP를 추천합니다.
의견
보내주신 의견은 WebOTP API를 개선하는 데 큰 도움이 됩니다. 사용해 보고 의견을 공유해 주세요.