WebのSMS Receiver API (WebOTP API)

Webにおいて、二要素認証やアカウント復旧のためにSMSでワンタイムパスワードを発行し、フォームに入力させる事がある。

ユーザはSMSで送られたきたワンタイムパスワードをコピー&ペーストなり手入力することになる。

端末(電話番号)の所持確認をより自動的に行えるように、「SMS Receiver API」という機能がChromeの開発者メーリングリスト(Blink-dev)で議論されている。(AndroidのSMS Retriever APIをもとにしている)

提案自体は、下記URLにある。
https://github.com/samuelgoto/sms-receiver

Demo

Githubリポジトリ上にあるgitアニメーションがわかりやすい。幾つか検討案があり、オプトアウト
をするかや、モーダルを出すかの違いがある。

• ユーザは電話番号を入力する (もしくは候補から選択する)
• 電話番号がサーバに送られ、ワンタイムパスワードを含むSMSが送られる
• ブラウザは、送られてきたSMSをパースしフォームに入力する

API

ふたつのAPIが検討されている

Declarative API

INPUTタグに autocomplete="one-time-code" を入れる

<input autocomplete="one-time-code"/>

Imperative API

JavaScriptのAPI

try {
  let {content} = await navigator.sms.receive();
  alert("sms received! " + content);
} catch (e) {
  alert("time out!");
}

Format

SMSをパース出来るようにフォーマットが定義されている。
また、SMSがどのWebサイト向けに送られたものなのか識別できるようになっている(WebViewは一旦は非対応)。

Your OTP is: 123ABC78.
For: https://example.com