SMS OTP 양식을 최적화하고 사용자 환경을 개선하는 방법을 알아보세요.
SMS로 전송된 OTP (일회용 비밀번호)를 사용자에게 제공하도록 요청하는 것이 일반적임 사용자 전화번호를 확인하는 방법이 있습니다. SMS OTP의 사용 사례는 다음과 같습니다.
- 2단계 인증. 사용자 이름과 비밀번호 외에도 SMS OTP는 을(를) 받은 사람이 계정을 소유하고 있다는 강력한 신호로 사용하는 것입니다. SMS OTP.
- 전화번호 인증. 일부 서비스는 기본 식별자로 사용됩니다. 이러한 서비스에서 사용자는 전화번호와 본인 확인을 위해 SMS를 통해 OTP가 수신되었습니다. 경우에 따라 PIN과 결합되기도 합니다. 2단계 인증을 구성합니다.
- 계정 복구. 사용자가 계정에 액세스할 수 없는 경우 그것을 복구하는 방법이 될 수 있습니다. 등록된 이메일 주소로 이메일을 보내거나 전화번호 SMS OTP가 일반적인 계정 복구 방법입니다.
- 결제 확인: 결제 시스템에서는 일부 은행이나 신용카드를 사용합니다. 발급자가 보안상의 이유로 결제자에게 추가 인증을 요청합니다. SMS OTP는 일반적으로 이러한 용도로 사용됩니다.
이 게시물에서는 위 용도의 SMS OTP 양식을 작성하기 위한 권장사항을 설명합니다. 있습니다.
체크리스트
SMS OTP를 사용하여 최상의 사용자 환경을 제공하려면 다음 단계를 따르세요.
- 다음과 함께
<input>
요소를 사용합니다. <ph type="x-smartling-placeholder">- </ph>
type="text"
inputmode="numeric"
autocomplete="one-time-code"
@BOUND_DOMAIN #OTP_CODE
를 OTP SMS 메시지의 마지막 줄로 사용합니다.- WebOTP API를 사용합니다.
<input>
요소 사용
<input>
요소가 포함된 양식을 사용하는 것이 가장 중요한 권장사항입니다.
모든 브라우저에서 작동하므로 따라올 수 있습니다. 여러분이
이 게시물이 일부 브라우저에서 작동하지 않을 경우, 사용자는 여전히 OTP를 입력하고 제출할 수 있습니다.
작업을 수행할 수 있습니다
<form action="/verify-otp" method="POST">
<input type="text"
inputmode="numeric"
autocomplete="one-time-code"
pattern="\d{6}"
required>
</form>
다음은 입력 필드를 최대한 활용하기 위한 몇 가지 아이디어입니다. 있습니다.
type="text"
OTP는 보통 다섯 자리 또는 6자리 숫자이므로
입력란의 type="number"
는 모바일 환경에 변화를 주어 직관적으로 보일 수 있습니다.
숫자만 입력할 수도 있습니다 브라우저에서는
입력 필드를 여러 숫자의 시퀀스가 아닌 셀 수 있는 숫자로 설정합니다.
예기치 않은 동작을 일으킬 수 있습니다 type="number"
를 사용하면 위아래로 이동
입력란 옆에 표시할 버튼 이 버튼 누르기
는 숫자를 늘리거나 줄이며 앞의 0은 삭제할 수 있습니다.
대신 type="text"
를 사용하세요. 이렇게 하면 모바일 키보드가 숫자로 변환되지 않습니다.
하지만 괜찮습니다. inputmode="numeric"
사용에 관한 다음 도움말에서
확인할 수 있습니다
inputmode="numeric"
inputmode="numeric"
사용
을 클릭합니다.
일부 웹사이트에서는 type="tel"
도 OTP 입력란에 사용합니다.
- 다음 경우 모바일 키보드를 숫자 (*
및 #
포함)로 바꿉니다.
초점을 맞추고 있습니다. 이 해킹은 이전에 inputmode="numeric"
이(가) 사용되었을 때 사용되었습니다.
널리 지원되지 않았습니다 Firefox가
inputmode="numeric"
,
의미상으로 잘못된 type="tel"
해킹을 사용할 필요가 없습니다.
autocomplete="one-time-code"
autocomplete
드림
속성을 사용하면 개발자가 브라우저에서
자동완성 지원을 제공해야 하며 브라우저에
입력란에 입력해야 하는 정보 유형을 나타냅니다.
사용자가 SMS 메시지를 받을 때마다 autocomplete="one-time-code"
를 사용합니다.
양식이 열리면 운영 체제가 SMS의 OTP를 발견적으로 파싱하고
키보드에서 사용자에게 입력할 OTP를 제안합니다. Safari 12 및
나중에 iOS, iPadOS, macOS에서 사용할 수 있지만,
이러한 플랫폼에서 SMS OTP 환경을 쉽게 개선할 수 있습니다.
autocomplete="one-time-code"
은(는) 사용자 경험을 개선해 주지만 그 외에도 다양한 기능이 있습니다.
SMS 메시지가 출처 바인드 메시지를 준수하도록 하여 실행할 수 있습니다.
형식을 참고하세요.
SMS 문자 메시지 형식 지정
SMS를 통해 전송되는 출처 바인딩 일회성 코드 지정할 수도 있습니다
형식 규칙은 간단합니다. 수신자 도메인으로 SMS 메시지를 마무리합니다.
앞에 @
, OTP가 앞에 #
가 붙었습니다.
예를 들면 다음과 같습니다.
Your OTP is 123456
@web-otp.glitch.me #123456
OTP 메시지에 표준 형식을 사용하여 추출 더 쉽고 안정적으로 만들 수 있습니다. OTP 코드와 연결 사용자를 속여 악성 사이트에 코드를 제공하도록 하기가 더 어려워집니다.
이 형식을 사용하면 다음과 같은 몇 가지 이점이 있습니다.
- OTP가 도메인에 결합됩니다. 사용자가 OTP 제안이 표시되지 않습니다. 이렇게 하면 피싱 공격 및 잠재적 계정 도용의 위험도 완화됩니다.
- 이제 브라우저에서 Chrome OS에 의존하지 않고 안정적으로 OTP를 추출할 수 신비하고 불안정한 휴리스틱입니다.
웹사이트에서 autocomplete="one-time-code"
, iOS 14 이상이 설치된 Safari를 사용하는 경우
위의 규칙에 따라 OTP를 제안합니다.
이 SMS 메시지 형식은 Safari 이외의 브라우저에도 유용합니다. Chrome, Opera
Android의 Vivaldi는 또한
WebOTP API를 사용할 수 있습니다.autocomplete="one-time-code"
WebOTP API 사용
WebOTP API는 OTP에 대한 액세스를 제공합니다.
SMS 메시지로 받은 시간 호출
navigator.credentials.get()
드림
otp
유형 (OTPCredential
)으로 구성. 여기서 transport
에는 웹사이트 sms
가 포함됩니다.
원본 바운드 일회성 코드를 준수하는 SMS가
권한을 부여할 수 있습니다. OTP가 자바스크립트로 전달되면
웹 사이트에서 이를 양식에 사용하거나 서버에 직접 게시할 수 있습니다.
navigator.credentials.get({
otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
<ph type="x-smartling-placeholder">
웹에서 전화번호 인증하기에서 WebOTP API 사용 방법에 대해 자세히 알아보세요.
사용하거나 다음 스니펫을 복사하여 붙여넣습니다. (제조업체
<form>
요소에 action
및 method
속성이 올바르게 설정되어 있는지 확인합니다.)
// Feature detection
if ('OTPCredential' in window) {
window.addEventListener('DOMContentLoaded', e => {
const input = document.querySelector('input[autocomplete="one-time-code"]');
if (!input) return;
// Cancel the WebOTP API if the form is submitted manually.
const ac = new AbortController();
const form = input.closest('form');
if (form) {
form.addEventListener('submit', e => {
// Cancel the WebOTP API.
ac.abort();
});
}
// Invoke the WebOTP API
navigator.credentials.get({
otp: { transport:['sms'] },
signal: ac.signal
}).then(otp => {
input.value = otp.code;
// Automatically submit the form when an OTP is obtained.
if (form) form.submit();
}).catch(err => {
console.log(err);
});
});
}
사진 제공: Jason Leung 스플래시 해제.