728x90

WebOTP API는 웹 애플리케이션이 SMS 또는 기타 메시징 앱에서 OTP(일회용 암호)를 받을 수 있도록 하는 JavaScript API입니다. 이 API는 OTP 입력을 자동화하여 사용자의 로그인 프로세스를 단순화하는 데 사용할 수 있습니다.

문법

WebOTP API는 메시징 앱에서 OTP를 검색하는 데 사용되는 `navigator.credentials.get()`이라는 단일 메서드로 구성됩니다. 메서드의 구문은 다음과 같습니다.

navigator.credentials.get(options)

`options` 매개변수는 OTP 요청에 대한 구성 옵션을 지정하는 개체입니다. 사용 가능한 옵션은 다음과 같습니다.

  • `signal`: OTP 요청을 취소하는 데 사용할 수 있는 AbortSignal 개체입니다.
  • `timeout`: OTP 요청에 대한 시간 제한(밀리초)입니다. 이 시간 내에 OTP를 받지 못하면 요청이 실패합니다.
  • `message`: OTP 프롬프트에 표시할 메시지입니다.
  • `transport`: OTP를 수신하기 위해 사용되는 전송 방법. 이것은 `"sms"` 또는 `"whatsapp"`로 설정할 수 있습니다.

다음은 웹 애플리케이션에서 WebOTP API를 사용하는 방법의 예입니다.

// Request OTP

navigator.credentials.get({

otp: { transport: ['sms'] },

signal: new AbortController().signal,

}).then((credential) => {

const code = credential.code;

// Use the OTP to authenticate the user

}).catch((err) => {

// Handle errors

});

이 예제에서 `navigator.credentials.get()` 메서드는 `sms` 전송 메서드를 사용하여 OTP를 요청하는 데 사용됩니다. `signal` 매개변수는 OTP 요청을 취소하는 데 사용할 수 있는 `AbortSignal` 개체를 만드는 데 사용됩니다. OTP가 수신되면 OTP 코드가 포함된 `Credential` 개체와 함께 `then()` 메서드가 호출됩니다. 그런 다음 이 코드를 사용하여 사용자를 인증할 수 있습니다.

브라우저 지원

WebOTP API는 Chrome, Firefox, Safari 및 Edge를 포함한 최신 브라우저의 최신 버전에서 지원됩니다. 그러나 이러한 브라우저의 이전 버전에서는 지원되지 않을 수 있으므로 웹 애플리케이션에서 이 API를 사용하기 전에 호환성을 확인하는 것이 중요합니다.

728x90

'IT' 카테고리의 다른 글

자바스크립트 "WebCodecs API"  (0) 2023.03.09
자바스크립트 "WebGL API"  (0) 2023.03.09
자바스크립트, WebRTC  (0) 2023.03.08
자바스크립트, WebTransport API  (0) 2023.03.08
자바스크립트, WebUSB API  (0) 2023.03.08

+ Recent posts