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 は、テレフォニー機能のあるデバイスでのみ機能します。Chrome 93 では、他のデバイスで受信した SMS のリスニングがサポートされます。これにより、ユーザーはパソコンで電話番号の確認を完了できます。

パソコン版の 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 でのみ動作します。 Chrome では、iOS または iPad OS での 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）