WebOTP API を使用してパソコンで電話番号を確認する

Chrome 93 以降では、ウェブサイトではパソコンの Chrome で電話番号を確認できます。

Yi Gu
Eiji Kitamura

WebOTP を使用すると、ユーザーはアプリを切り替えることなく、モバイルサイトにワンタップで電話番号確認コードを入力できます。Chrome 93 ではこの機能がパソコンにも拡張されています。詳しくは以下をご覧ください。

はじめに

SMS OTP（ワンタイム パスワード）は、電話番号の確認（認証の 2 番目の手順など）や、ウェブでの支払いの確認によく使用されます。しかし、パソコンからモバイルへの切り替え、SMS アプリの起動、パソコン上での元のウェブサイトの OTP の記憶と入力というフロー全体が煩雑になります。このようにミスを犯しやすく、フィッシング攻撃に対して脆弱です。

WebOTP API を使用すると、ウェブサイトは SMS メッセージからワンタイム パスワードをプログラムで取得し、アプリを切り替えることなく、ユーザーがワンタップでフォームに自動入力できます。SMS には特定の形式があり、送信元にバインドされているため、フィッシング サイトによって OTP が盗まれるリスクも軽減されます。

WebOTP API の動作。

WebOTP でまだサポートされていないユースケースの 1 つは、リモート デスクトップ デバイスまたはノートパソコンからの電話番号確認リクエストをターゲットにすることです。この API は、電話機能のあるデバイスでのみ機能します。この API では、他のデバイスで受信した SMS をリッスンできるようになり、Chrome 93 ではユーザーがパソコンで電話番号の確認を完了できるようになっています。

パソコンの WebOTP API

試してみる

前提条件

デモ

このシームレスな電話番号確認フローをパソコンで試すには、次の手順を行います。

  1. パソコンで https://web-otp-demo.glitch.me/ にアクセスします。[確認] ボタンをクリックします。
  2. 画面に表示されたテキスト メッセージを 2 台目のスマートフォンから Android デバイスに送信します。
  3. SMS が Android デバイスに配信されると、デスクトップで電話番号を確認するかどうかを尋ねるダイアログが表示されます。[送信] をクリックして承認します。
  4. パソコンの場合は、Android デバイスに送信される確認コードが入力フィールドに自動入力されます。

WebOTP API の仕組み

WebOTP API の仕組みを見てみましょう。

…
  const otp = await navigator.credentials.get({
    otp: { transport:['sms'] }
  });
  if (otp.code) input.value = otp.code;
…

SMS メッセージは、送信元にバインドされたワンタイム コードの形式にする必要があります。

Your OTP is: 123456.

@web-otp-demo.glitch.me #123456

最後の行には、バインドされるオリジンが含まれています。先頭に @ が、その後に # で始まる OTP が続きます。

テキスト メッセージを受信すると、情報バーがポップアップ表示され、電話番号の確認を求めるメッセージが表示されます。ユーザーが Verify ボタンをクリックすると、ブラウザは自動的に OTP をサイトに転送して navigator.credentials.get() を解決します。その後、ウェブサイトは OTP を抽出し、検証プロセスを完了します。

詳しくは、WebOTP API を使用してウェブ上で電話番号を確認するをご覧ください。

パソコンで WebOTP API を使用する方法

SMS による電話番号の確認は広く使用されており、プラットフォームに依存しません。モバイル デバイス向けのユースケースはすべて、デスクトップ デバイスにも適用する必要があります。

パソコンで WebOTP API を使用するのはモバイルの場合と同じであるため、ウェブサイトはプラットフォーム間で同じコードをデプロイできます。

ブラウザ サポートと相互運用性

この機能は Chrome 同期を利用しているため、現時点では Chrome でのみ動作します。 iOS または iPad OS の Chrome では、SMS の送受信はサポートされていません。

Chromium 以外のブラウザエンジンは WebOTP API を実装していませんが、Safari は input[autocomplete="one-time-code"] サポートと同じ SMS 形式を共有します。Safari では、ユーザーが iMessage の自動同期をオンにしている限り、iOS または iPadOS で、オリジンにバインドされたワンタイム コード形式を含む SMS が一致したオリジンで到着すると、そのメッセージは macOS に転送されます。ユーザーが入力フィールドにフォーカスすると、Safari はユーザーに入力する OTP を提案します。

フィードバック

皆様からのフィードバックは、WebOTP API の改善に役立てさせていただきます。ぜひお試しいただき、ご意見やご感想をお寄せください。

写真撮影: Luis Villasmil、Unsplash