Chrome 93부터 웹사이트에서 데스크톱 Chrome의 전화번호를 인증할 수 있습니다.
WebOTP는 사용자가 앱 간에 전환할 필요 없이 탭 한 번으로 사용할 수 있습니다. Chrome 93에서는 이 기능을 있습니다. 자세한 내용을 알아보려면 계속 읽어보세요.
소개
SMS OTP (일회용 비밀번호)는 일반적으로 예를 들어 인증의 두 번째 단계로 사용하거나 웹에서 결제를 확인할 수 있습니다. 하지만 데스크톱에서 모바일로 전환하는 전체 흐름은 원래 웹사이트의 OTP를 기억하여 데스크톱으로 다시 입력 불편이 가중됩니다 이런 식으로 실수하기 쉬우며 있습니다.
WebOTP API는 웹사이트에 다음과 같은 기능을 제공합니다. 프로그래밍 방식으로 SMS 메시지에서 일회용 비밀번호를 가져오고 앱을 전환하지 않고도 탭 한 번으로 양식을 자동으로 완성해 줍니다. SMS는 특정 형식이 있고 출처에 바인딩되어 있으므로 피싱 웹사이트가 OTP를 도용할 위험도 있습니다.
<ph type="x-smartling-placeholder">아직 WebOTP에서 지원되지 않는 한 가지 사용 사례는 전화번호를 타겟팅하는 것입니다. 확인 요청을 보낼 수 있습니다. API는 전화 통신 기능이 있는 기기에서만 작동합니다. 현재 API 다른 기기에서 수신된 SMS를 수신하여 Chrome 93의 데스크톱에서 전화번호 인증을 완료합니다.
<ph type="x-smartling-placeholder">사용해 보기
기본 요건
- 데스크톱 또는 노트북 컴퓨터 (Windows, Mac, Linux 또는 ChromeOS)
- Google Play 서비스 버전 20.30.12 이상을 실행하는 Android 휴대전화
- Chrome 93 이상(데스크톱 또는 노트북, 모바일) Chrome 93 베타는 2021년 7월 말부터 사용할 수 있습니다.
- 데스크톱 Chrome과 있습니다. 예를 들어 https://myaccount.google.com/ 또는 https://mail.google.com. 동기화를 사용 설정할 필요가 없습니다.
- Android 기기에서 '설정->Google'을 통해 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에서만 작동합니다. iOS 또는 iPad OS의 Chrome에서는 SMS 수신 및 전송이 지원되지 않습니다.
Chromium 이외의 브라우저 엔진은 WebOTP API를 구현하지 않지만
Safari는 동일한 SMS 형식을 공유합니다.
input[autocomplete="one-time-code"] 지원이 필요합니다. Safari에서
출처 바운드가 포함된 SMS가 iMessage 자동 동기화를 사용 설정한 경우
일회성 코드 형식이 iOS 또는 iPadOS에서 일치하는 출처와 함께 도착하면
macOS로 전달됩니다. 사용자가 입력란에 포커스를 맞추면 Safari는
입력할 OTP를 제안합니다.
의견
여러분의 의견은 WebOTP API를 개선하는 데 큰 도움이 됩니다. 직접 해 보기 Google에 알려 주세요. 여러분의 의견을 들려주세요.
사진: Luis Villasmil 의 스플래시 해제