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

Chrome 93 以降では、ウェブサイトはパソコン版 Chrome から電話番号を確認できるようになります。

Yi Gu
Eiji Kitamura

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

はじめに

SMS OTP（ワンタイム パスワード）は、認証の 2 つ目のステップとして、またはウェブでの支払いの確認など、電話番号の確認によく使用されます。ただし、デスクトップからモバイルに切り替え、SMS アプリを開き、OTP を覚えてデスクトップの元のウェブサイトに入力する、という一連のフローは手間がかかります。この方法ではミスが起こりやすいうえ、フィッシング攻撃の標的になりやすくなります。

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

WebOTP API の動作。

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

パソコン版の WebOTP API。

試してみる

前提条件

デモ

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

  1. パソコンで https://web-otp-demo.glitch.me/ にアクセスします。[検証] ボタンをクリックします。
  2. 画面に表示されていたテキスト メッセージを、別のスマートフォンから Android デバイスに送信します。
  3. Android デバイスに SMS が届くと、パソコンで電話番号を確認するかどうかを尋ねるダイアログが表示されます。[送信] を押して承認します。
  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 または iPadOS の Chrome で SMS の受信と送信はできません。

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

フィードバック

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

写真提供: Luis Villasmil（Unsplash）