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

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。

試してみる

前提条件

デスクトップパソコンまたはノートパソコン（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 を開き、[同期を停止]、[開始をリクエスト] の順にクリックして同期を再開します。

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