SMS OTP 양식 권장사항

SMS OTP 양식을 최적화하고 사용자 환경을 개선하는 방법을 알아보세요.

Eiji Kitamura

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);

웹에서 전화번호 인증하기에서 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 스플래시 해제.