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

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

Yi Gu
Eiji Kitamura

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

はじめに

SMS OTP（ワンタイム パスワード）は一般的に、電話番号の確認、 たとえば、認証の 2 つ目の手順として、またはウェブ上での支払いの確認に使用できます。 しかし、デスクトップからモバイルに切り替えるフロー全体で、 元のウェブサイトで OTP を記憶してパソコンで入力し、 手間がかかりますこういう方法はミスが起こりやすく、脆弱性が フィッシング攻撃から保護できます。

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

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
WebOTP API の実例

WebOTP で未対応のユースケースの一つとして、電話番号をターゲットにするものがあります。 リモート デスクトップ デバイスやノートパソコンから API はテレフォニー機能を備えたデバイスでのみ機能します。現在、API は 他のデバイスで受信した SMS のリスニングにより、 パソコンでの電話番号の確認を完了（Chrome 93）

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> デスクトップ版 WebOTP API

試してみる

前提条件

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

デモ

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

  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 でのみ動作します。 Chrome では、iOS または iPad OS での SMS の送受信はサポートされていません。

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

フィードバック

お寄せいただいた貴重なフィードバックは、WebOTP API の改善に活用させていただきます。試してみる お知らせください 思います。

写真撮影: Luis Villasmil オン スプラッシュを解除