WebOTP API로 웹에서 전화번호 인증

SMS를 통해 수신된 OTP와 관련하여 사용자 지원하기

Eiji Kitamura

WebOTP API란 무엇인가요?

오늘날 전 세계 대부분의 사람들이 휴대기기를 소유하고 있으며 개발자는 일반적으로 전화번호를 서비스 사용자를 위한 식별자로 사용하는 행위

전화번호를 확인하는 방법에는 여러 가지가 있지만 무작위로 생성된 전화번호는 SMS로 전송된 일회용 비밀번호 (OTP)는 가장 일반적인 방법 중 하나입니다. 코드 전송 중 다시 구현되어 전화 번호 제어 방법을 보여줍니다.

이 아이디어는 다음을 달성하기 위해 이미 많은 시나리오에 배포되었습니다.

• 사용자 식별자로서의 전화번호. 새 일부 웹사이트는 이메일 주소 대신 전화번호를 요청하고, 계정 식별자로 사용할 수 있습니다.
• 2단계 인증. 로그인 시 웹사이트에서 일회성 코드를 요청함 추가 정보를 받기 위해 비밀번호 또는 기타 지식 계수 외에 SMS를 통해 전송됨 있습니다.
• 결제 확인. 사용자가 결제할 때 SMS를 통해 전송된 일회성 코드를 사용하면 그 사람의 의도를 확인하는 데 도움이 될 수 있습니다.

현재 프로세스는 사용자에게 불편을 야기합니다. SMS에서 OTP 찾기 복사하여 양식에 붙여넣는 작업은 번거롭고 전환율을 높일 수 있습니다 이 문제는 오랫동안 웹 요청을 제출할 수 있습니다. Android에는 이 작업을 수행하는 API가 있습니다. 마찬가지로 iOS 및 Safari

WebOTP API를 사용하면 앱이 변경할 수 있습니다. 이를 통해 프로그래매틱 방식으로 SMS에서 OTP를 가져올 수 있습니다. 메시지를 보내고 사용자의 전화번호를 보다 쉽게 인증할 수 있습니다.

실제 사례 보기

사용자가 웹사이트에서 전화번호를 인증한다고 가정해 보겠습니다. 웹사이트 SMS를 통해 사용자에게 문자 메시지를 전송하고 사용자는 OTP의 메시지를 사용하여 전화번호의 소유권을 확인합니다.

WebOTP API를 사용하면 사용자가 탭 한 번으로 이러한 단계를 쉽게 수행할 수 있습니다. 설명하겠습니다 문자 메시지가 도착하면 하단 시트가 나타남 사용자에게 전화번호를 인증하라는 메시지를 표시합니다. 인증 버튼을 클릭한 후 버튼을 누르면 브라우저가 OTP를 양식에 붙여넣고 양식이 제출되면 사용자가 계속을 누르지 않아도 됩니다.

전체 프로세스는 아래 이미지에 다이어그램으로 나와 있습니다.

</ph> <ph type="x-smartling-placeholder">

직접 데모를 사용해 보세요. 그것은 다음을 묻지 않습니다 SMS를 보낼 수 있지만, SMS를 전송할 때는 다른 기기에 앱을 설치할 수 있습니다. 이렇게 하면 발신자가 누구인지는 중요하지 않습니다.

1. Chrome 84에서 https://web-otp.glitch.me로 이동하거나 나중에 Android 기기에서 실행할 수 있습니다.
2. 다른 휴대전화에서 다음 SMS 문자 메시지를 내 휴대전화로 보냅니다.

Your OTP is: 123456.

@web-otp.glitch.me #12345

SMS를 받고 입력 영역에 코드를 입력하라는 메시지가 표시되었나요? 이것이 사용자에게 WebOTP API가 작동하는 방식입니다.

WebOTP API 사용은 다음 세 부분으로 구성됩니다.

• 제대로 주석 처리된 <input> 태그
• 웹 앱의 JavaScript
• SMS를 통해 전송된 서식 있는 메시지 텍스트입니다.

먼저 <input> 태그를 살펴보겠습니다.

<input> 태그에 주석 달기

WebOTP 자체는 HTML 주석 없이 작동하지만 브라우저 간 호환성을 위해 autocomplete="one-time-code"를 추가하는 것이 좋습니다. 사용자가 OTP를 입력할 것으로 예상되는 <input> 태그

이렇게 하면 Safari 14 이상에서 사용자에게 <input>를 자동 완성하도록 제안할 수 있습니다. WebOTP를 지원하지 않는 경우에도 SMS 메시지 형식 지정에 설명된 형식의 SMS를 수신할 때 OTP를 사용하여 OTP를 인증할 수 있습니다.

HTML

<form>
  <input autocomplete="one-time-code" required/>
  <input type="submit">
</form>

WebOTP API 사용

WebOTP는 간단하기 때문에 다음 코드를 복사하여 붙여넣기만 하면 작업을 수행합니다 어떤 상황인지 안내해 드리겠습니다.

자바스크립트

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}

특성 감지

특성 감지는 다른 많은 API와 동일합니다. 듣는 중 DOMContentLoaded 이벤트는 DOM 트리가 쿼리할 준비가 될 때까지 기다립니다.

자바스크립트

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    …
    const form = input.closest('form');
    …
  });
}

OTP 처리

WebOTP API 자체는 매우 간단합니다. 사용 navigator.credentials.get() 드림 OTP를 얻습니다. WebOTP는 이 메서드에 새로운 otp 옵션을 추가합니다. 여기에는 하나의 속성: transport(값은 문자열 'sms'이 있는 배열이어야 함).

자바스크립트

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
    …

그러면 SMS 메시지가 도착할 때 브라우저의 권한 흐름이 트리거됩니다. 권한이 부여된 프로미스가 OTPCredential 객체로 확인됩니다.

가져온 OTPCredential 객체의 콘텐츠

{
  code: "123456" // Obtained OTP
  type: "otp"  // `type` is always "otp"
}

그런 다음 OTP 값을 <input> 입력란에 전달합니다. 양식을 직접 제출하기 사용자가 버튼을 탭해야 하는 단계가 필요하지 않습니다.

자바스크립트

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.error(err);
    });
    …

메시지 취소

사용자가 직접 OTP를 입력하고 양식을 제출하는 경우 options 객체에서 AbortController 인스턴스를 사용하여 get() 호출을 수행합니다.

<ph type="x-smartling-placeholder"></ph> JavaScript 를 통해 개인정보처리방침을 정의할 수 있습니다.

    …
    const ac = new AbortController();
    …
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    …
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
    …

SMS 메시지 형식 지정

API 자체는 꽤 단순해 보이지만, 몇 가지 유의해야 할 사항이 있습니다. 알 수 있습니다. 메시지는 다음 날짜 이후에 전송되어야 합니다. navigator.credentials.get()가 호출되고 기기에서 수신되어야 합니다. 여기서 get()이 호출되었습니다. 마지막으로 메시지는 다음을 준수해야 합니다. 형식 지정:

• 메시지는 4~10개의 마지막 줄에 하나 이상의 숫자가 포함된 영숫자 문자열 확인할 수 있습니다.
• API를 호출한 웹사이트 URL의 도메인 부분이 앞에 나와야 합니다. 아티스트: @
• URL에는 파운드 기호('#')가 포함되어야 하며 뒤에 OTP가 있어야 합니다.

예를 들면 다음과 같습니다.

Your OTP is: 123456.

@www.example.com #123456

다음은 잘못된 예입니다.

데모

데모에서 다양한 메시지를 사용해 보세요. https://web-otp.glitch.me

이 버전을 포크하여 버전을 만들 수도 있습니다. https://glitch.com/edit/#!/web-otp.

교차 출처 iframe에서 WebOTP 사용

일반적으로 교차 출처 iframe으로 SMS OTP를 입력하는 것이 결제에 사용됩니다. 특히 3D Secure를 통해 확인할 수 있습니다. 일반적인 형식을 사용하면 교차 출처 iframe에서 WebOTP API는 중첩된 출처에 연결된 OTP를 전달합니다. 예를 들면 다음과 같습니다.

• 사용자가 shop.example에 방문하여 신용카드로 신발 한 켤레를 구매합니다.
• 신용카드 번호를 입력하면 통합 결제 시스템 공급자가 iframe 내 bank.example에서 사용자에게 전화번호가 표시되어 빠르게 결제할 수 있습니다.
• bank.example에서 OTP가 포함된 SMS를 전송하여 사용자가 인증할 수 있도록 합니다. 본인 인증을 할 수 있습니다.

교차 출처 iframe 내에서 WebOTP API를 사용하려면 다음 두 가지 작업을 수행해야 합니다.

• SMS 텍스트에서 상단 프레임 출처와 iframe 출처 모두에 주석을 답니다. 메시지가 표시됩니다.
• 교차 출처 iframe에서 OTP를 수신하도록 권한 정책 구성 사용자로부터 직접 받을 수 있습니다.

다음 페이지에서 데모를 사용해 보실 수 있습니다. https://web-otp-iframe-demo.stackblitz.io.

SMS 문자 메시지에 bound-origins 주석 달기

iframe 내에서 WebOTP API를 호출할 때 SMS 문자 메시지는 @ 뒤의 상단 프레임 출처와 # 뒤의 OTP를 포함합니다. 마지막 줄에서 @ 앞에 있는 iframe 출처가 있어야 합니다.

Your verification code is 123456

@shop.example #123456 @bank.exmple

권한 정책 구성

교차 출처 iframe에서 WebOTP를 사용하려면 삽입자가 의도하지 않은 것을 방지하기 위해 otp-credentials 권한 정책을 통한 API 있습니다. 일반적으로 이 목표를 달성하는 데는 두 가지 방법이 있습니다.

HTTP 헤더를 통해 전송:

Permissions-Policy: otp-credentials=(self "https://bank.example")

iframe allow 속성을 통해:

<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

권한 정책을 지정하는 방법에 관한 추가 예시 를 참고하세요.

데스크톱에서 WebOTP 사용

Chrome에서는 WebOTP가 다른 기기에서 수신된 SMS를 수신하여 사용자가 데스크톱에서 전화번호 인증을 완료하도록 지원합니다.

이 기능을 사용하려면 사용자가 두 기기에서 동일한 Google 계정에 로그인해야 합니다. 데스크톱 Chrome 및 Android Chrome입니다.

개발자는 데스크톱 웹사이트에 WebOTP API를 구현하기만 하면 됩니다. 모바일 웹사이트와 동일한 방식으로 작동하지만 필요합니다.

자세한 내용은 WebOTP API를 사용하여 데스크톱에서 전화번호 인증하기를 참고하세요.

FAQ

올바른 형식의 메일을 보내도 대화상자가 표시되지 않습니다. 이유가 무엇일까요?

API를 테스트할 때 몇 가지 주의사항이 있습니다.

• 발신자의 전화번호가 수신자의 연락처 목록에 포함되어 있는 경우 기본 SMS User Consent API의 설계로 인해 API가 트리거되지 않습니다.
• Android 기기에서 직장 프로필을 사용하고 있고 WebOTP에서는 개인 프로필에 Chrome을 설치하고 사용해 보세요. (즉, SMS 메시지를 수신하는 프로필과 동일한 프로필)

SMS 형식이 올바른지 확인하려면 형식을 다시 확인하세요.

이 API는 여러 브라우저 간에 호환되나요?

Chromium과 WebKit은 SMS 문자 메시지 형식에 동의했으며 iOS 14부터 Safari에 이 기능을 지원한다고 발표했습니다. macOS Big Sur가 포함됩니다. Safari는 WebOTP JavaScript API를 지원하지 않지만 input 요소에 기본값 autocomplete=["one-time-code"]로 주석 달기 SMS 메시지가 조건에 맞는 경우 키보드가 자동으로 OTP를 입력하라고 제안합니다. .

인증 방법으로 SMS를 사용하는 것은 안전한가요?

SMS OTP는 전화번호가 처음 나왔을 때 전화번호를 확인하는 데 유용하지만 SMS를 통한 전화번호 인증은 다음 사항에 대해 주의해서 사용해야 합니다. 이동통신사가 전화번호를 도용하여 재활용할 수 있기 때문입니다. WebOTP는 편리한 재인증 및 복구 메커니즘이지만, 지식 챌린지와 같은 추가 요소와 결합하거나 Web Authentication API 제공합니다

Chrome 구현과 관련된 버그는 어디에 신고해야 하나요?

Chrome 구현에서 버그를 발견하셨나요?

• 버그 신고: https://new.crbug.com. 재현을 위한 간단한 지침과 가능한 한 많은 세부정보를 포함하세요. 구성요소를 Blink>WebOTP로 설정합니다.

이 기능에 어떻게 도움을 줄 수 있나요?

WebOTP API를 사용할 계획이신가요? 여러분의 공개적 후원은 YouTube가 우선순위를 정하는 데 도움이 됩니다 기능을 지원하는 것이 얼마나 중요한지 다른 브라우저 공급업체에 보여줍니다. 해시태그를 사용하여 @ChromiumDev에 트윗을 보냅니다. #WebOTP 어디서 어떻게 사용하는지 Google에 알려주세요.

리소스

• SMS OTP 양식 권장사항
• WebOTP API를 사용하여 데스크톱에서 전화번호 인증하기
• WebOTP API로 교차 출처 iframe 내에서 OTP 양식 작성하기
• Yahoo! JAPAN은 비밀번호를 사용하지 않는 인증으로 문의량이 25% 감소하고 로그인 시간이 2.6배 빨라졌습니다.