このページは Cloud Translation API によって翻訳されました。

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。

試してみる

前提条件

デスクトップパソコンまたはノートパソコン（Windows、Mac、Linux、ChromeOS）。
Google Play 開発者サービスバージョン 20.30.12 以降を搭載した Android スマートフォン
パソコンまたはノートパソコンとモバイルの両方で Chrome 93 以降。Chrome 93 ベータ版は 2021 年 7 月下旬よりご利用いただけます。
デスクトップ版 Chrome とモバイル版 Chrome の両方で同じ Google アカウントにログインする必要があります。（例: https://myaccount.google.com/、https://mail.google.com）。同期をオンにする必要はありません。
Android デバイスで、[設定] > [Google] から Android にログインする必要があります。
Android デバイスで Chrome 93 がデフォルトブラウザである必要があります。
Chrome 93 が Android デバイスのフォアグラウンドまたはバックグラウンドで実行されている必要があります。

デモ

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

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

重要なポイント: デモが機能しない場合は、次の点を確認してください。 1. すべての前提条件が満たされていることを再度確認します。2. 送信者の電話番号が受信者の連絡先リストに登録されている場合、SMS は WebOTP ダイアログをトリガーしません。これは設計上の仕様です。別の電話番号をお試しください。 3. 問題が解決しない場合は、SMS を受信した Android Chrome で chrome://sync-internals を開き、[Stop Sync] を押してから [Request Start] を押して同期を再開します。

パソコンで 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）