WebOTP API を使用してウェブ上で電話番号を確認する

SMS で受信した OTP についてお客様をサポートする

WebOTP API とは

最近では世界中のほとんどのユーザーが モバイルデバイスを所有しており サービスのユーザーの ID として電話番号を使用することがよくあります。

電話番号の確認にはさまざまな方法がありますが、ランダムに生成される SMS で送信されるワンタイム パスワード(OTP)は、最も一般的なものの一つです。このコードを送信しています デベロッパーのサーバーに戻ると、電話番号の制御のデモンストレーションが表示されます。

このアイデアは、次の目標を達成するために、すでに多くのシナリオに導入されています。

  • ユーザーの ID としての電話番号。新規の ウェブサイトによっては、メールアドレスではなく電話番号の入力を求められることがあります。 アカウント ID として使用します。
  • 2 段階認証プロセス。ログイン時に、ウェブサイトからワンタイム コードの入力が求められる パスワードやその他の知識要素に追加して、 セキュリティです。
  • お支払いの確認。ユーザーが支払いを行う際に、 SMS で送信されたワンタイム コードを使用して、ユーザーの意図を確認できます。

現在のプロセスはユーザーに負担をかけています。SMS 内の OTP の検出 フォームにコピー&ペーストするのが面倒で、 コンバージョン率を改善できますこの簡易化は長年にわたり 大手グローバル デベロッパーの多くからウェブ リクエストを受けていました。Android には、まさにこれを行う API があります。同様に iOS および Safari

WebOTP API を使用すると、アプリが特定の形式のメッセージを受信し、 必要があります。ここから、プログラムで SMS から OTP を取得できます。 電話番号の確認を簡単に行えます。

実例を見る

ユーザーがウェブサイトで電話番号の確認を希望しているとします。ウェブサイト SMS でユーザーにテキスト メッセージを送信し、ユーザーが メッセージを表示して電話番号の所有権を確認します。

WebOTP API を使用すると、この手順をユーザーが デモでお見せしますテキスト メッセージが届くと、ボトムシートがポップアップ表示されます 電話番号の確認を求めるメッセージがユーザーに表示されます。[確認] をクリックした後 ボタンをクリックすると、ブラウザは OTP をフォームに貼り付け、 ユーザーが [続行] をクリックすることなく、フォームを送信します。

次の図に、プロセス全体を示します。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> WebOTP API の図
をご覧ください。

ぜひデモをお試しください。情報の取得や SMS の送信は可能ですが、 別のデバイスにコピーすることもできます。これが機能するのは、 WebOTP API を使用する場合、送信者は関係ありません。

  1. Chrome 84 で https://web-otp.glitch.me にアクセスする。または ダウンロードします
  2. 別の電話から、次の SMS テキスト メッセージをお使いのスマートフォンに送信します。
Your OTP is: 123456.

@web-otp.glitch.me #12345

SMS が届き、入力エリアにコードを入力するよう求めるメッセージが表示されましたか? これが、ユーザーにとっての WebOTP API の仕組みです。

WebOTP API は、次の 3 つの部分から使用します。

  • 適切にアノテーションが付けられた <input> タグ
  • ウェブアプリでの JavaScript
  • SMS 経由で送信された、フォーマットされたメッセージ テキスト。

まず、<input> タグについて説明します。

<input> タグにアノテーションを付ける

WebOTP 自体は HTML アノテーションなしで機能しますが、クロスブラウザ向けに機能します 互換性があるため、autocomplete="one-time-code" を ユーザーが OTP を入力するであろう箇所 <input> タグ。

これにより、Safari 14 以降では、<input> を自動入力することをユーザーに提案できます。 フィールドに OTP を設定します。WebOTP をサポートしていない場合でも、SMS メッセージのフォーマットに記載されている形式の SMS を受信した場合、

HTML

<form>
  <input autocomplete="one-time-code" required/>
  <input type="submit">
</form>

WebOTP API を使用する

WebOTP はシンプルなため、次のコードをコピーして貼り付けるだけで できます。どういうことか、順を追って説明するね。

JavaScript

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}

機能検出

機能検出は他の多くの API の場合と同じです。再生中: DOMContentLoaded イベントは、DOM ツリーがクエリ可能になるまで待機します。

JavaScript

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    
    const form = input.closest('form');
    
  });
}

OTP を処理する

WebOTP API 自体はとてもシンプルです。使用 navigator.credentials.get() 取得する必要がありますWebOTP は、このメソッドに新しい otp オプションを追加します。含まれているのは、 1 つのプロパティ transport があります。このプロパティの値は、文字列 'sms' の配列である必要があります。

JavaScript

    
    navigator.credentials.get({
      otp: { transport:['sms'] }
      
    }).then(otp => {
    

これにより、SMS メッセージを受信するとブラウザの権限フローがトリガーされます。権限が 付与された場合、返された Promise は OTPCredential オブジェクトで解決されます。

取得した OTPCredential オブジェクトのコンテンツ

{
  code: "123456" // Obtained OTP
  type: "otp"  // `type` is always "otp"
}

次に、OTP 値を <input> フィールドに渡します。フォームを直接送信する これにより、ユーザーがボタンをタップする必要がなくなります。

JavaScript

    
    navigator.credentials.get({
      otp: { transport:['sms'] }
      
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.error(err);
    });
    

メッセージの中止

ユーザーが手動で OTP を入力してフォームを送信した場合は、 get() 呼び出しは、options オブジェクトAbortController インスタンスを使用して行います。

<ph type="x-smartling-placeholder"></ph> JavaScript

    
    const ac = new AbortController();
    
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
    

SMS メッセージをフォーマットする

API 自体はシンプルに見えますが、いくつか注意すべき点があります。 知っておく必要があります。メッセージは、 navigator.credentials.get() が呼び出され、デバイスで受信する必要がある ここで get() が呼び出された。最後に、メッセージは以下の点に沿う必要があります。 形式:

  • メッセージは 4 ~ 10 個の文字を含む、人が読める形式のテキストで始まります(省略可)。 最後の行から 1 つ以上の数字を区切った英数字の文字列 URL とワンタイムパスワードの 両方が含まれています
  • API を呼び出したウェブサイトの URL のドメイン部分の前に付ける必要があります 作成者: @
  • URL には、ポンド記号(「#」)とそれに続く OTP を含める必要があります。

例:

Your OTP is: 123456.

@www.example.com #123456

以下は悪い例です。

不正な形式の SMS テキストの例 この方法が機能しない理由
Here is your code for @example.com #123456 @ は、最終行の最初の文字にする必要があります。
Your code for @example.com is #123456 @ は、最終行の最初の文字にする必要があります。
Your verification code is 123456

@example.com\t#123456
@host#code の間にはスペースを 1 つ入力する必要があります。
Your verification code is 123456

@example.com  #123456
@host#code の間にはスペースを 1 つ入力する必要があります。
Your verification code is 123456

@ftp://example.com #123456
URL スキームを含めることはできません。
Your verification code is 123456

@https://example.com #123456
URL スキームを含めることはできません。
Your verification code is 123456

@example.com:8080 #123456
ポートを含めることはできません。
Your verification code is 123456

@example.com/foobar #123456
パスを含めることはできません。
Your verification code is 123456

@example .com #123456
ドメインに空白文字がありません。
Your verification code is 123456

@domain-forbiden-chars-#%/:<>?@[] #123456
ドメインに禁止文字が含まれていない。
@example.com #123456

Mambo Jumbo
@host#code が最終行になります。
@example.com #123456

App hash #oudf08lkjsdf834
@host#code が最終行になります。
Your verification code is 123456

@example.com 123456
# がありません。
Your verification code is 123456

example.com #123456
@ がありません。
Hi mom, did you receive my last text @# がありません。

デモ

デモでさまざまなメッセージを試してみましょう。 https://web-otp.glitch.me

これをフォークして、バージョンを作成することもできます。 https://glitch.com/edit/#!/web-otp.

クロスオリジンの iframe から WebOTP を使用する

クロスオリジンの iframe への SMS OTP の入力は通常、支払いに使用される 特に 3D セキュアでは確認が難しくなります。サポートする共通の形式を持つことで クロスオリジンの iframe など、WebOTP API は、ネストされたオリジンにバインドされた OTP を配信します。次に例を示します。

  • ユーザーが shop.example にアクセスし、クレジット カードを使って靴を購入しました。
  • クレジット カード番号を入力すると、統合された決済機関に ユーザーに確認を求める、iframe 内の bank.example フォーム 電話番号を登録して、すばやく購入手続きを行えるようにします。
  • bank.example が OTP を含む SMS をユーザーに送信し、 本人確認のための質問を入力します。

クロスオリジンの iframe 内から WebOTP API を使用するには、次の 2 つのことを行う必要があります。

  • SMS テキスト内のトップフレームのオリジンと iframe のオリジンの両方にアノテーションを付ける 表示されます。
  • クロスオリジンの iframe が OTP を受信できるように権限ポリシーを設定する ユーザーから直接取得できるからです
で確認できます。 <ph type="x-smartling-placeholder">
</ph>
iframe 内で WebOTP API が動作する様子。

デモは https://web-otp-iframe-demo.stackblitz.io.

bound-origin を SMS テキスト メッセージにアノテーションを付ける

iframe 内から WebOTP API を呼び出す場合、SMS テキスト メッセージは 先頭に @ が付加されたトップフレーム オリジンと、その後に # が付加された OTP が含まれます。 と、最後の行の @ で始まる iframe のオリジンを指定します。

Your verification code is 123456

@shop.example #123456 @bank.exmple

権限ポリシーを構成

クロスオリジンの iframe で WebOTP を使用するには、埋め込み元がこのアクセス権を付与する必要があります。 otp-credentials 権限ポリシーを介した API の使用により、意図しない 確認します。一般的に、この目標を達成するには 2 つの方法があります。

HTTP ヘッダー経由:

Permissions-Policy: otp-credentials=(self "https://bank.example")

iframe の allow 属性を使用する場合:

<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

権限ポリシーの指定方法に関するその他の例 をご覧ください。

パソコンで WebOTP を使用する

Chrome では、WebOTP が他のデバイスで受信した SMS をリッスンして、 ユーザーがパソコンで電話番号の確認を行うのをサポートする。

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

この機能を利用するには、両方のデバイスで同じ Google アカウントにログインする必要があります。 パソコン版と Android 版 Chrome です。

デベロッパーは、PC 版ウェブサイトに WebOTP API を実装するだけで済みます。 モバイルサイトと同じように使用できますが 必要ありません。

詳しくは、WebOTP API を使用してパソコンで電話番号を確認するをご覧ください。

よくある質問

正しい形式のメッセージを送信してもダイアログが表示されない。何が問題なのでしょうか。

API をテストする際は、次の点に注意してください。

  • 送信者の電話番号が受信者の連絡先リストに登録されている場合、 基盤となる SMS User Consent API の設計上、API がトリガーされません。
  • Android デバイスで仕事用プロファイルを使用していて、WebOTP が 動作しない場合は、代わりに個人用プロファイルに Chrome をインストールして使用してみてください (SMS メッセージを受信するのと同じプロファイル)。

形式を見直して、SMS の形式が正しいかどうかを確認してください。

この API は異なるブラウザ間で互換性がありますか?

Chromium と WebKit は SMS テキスト メッセージの形式について合意し、Apple は iOS 14 以降でこの形式を Safari でサポートすることを発表 macOS Big Sur ですSafari は WebOTP JavaScript API をサポートしていませんが、 input 要素に autocomplete=["one-time-code"](デフォルト)のアノテーションを付ける SMS メッセージが準拠している場合、キーボードが OTP の入力を自動的に提案する 必要があります。

認証方法として SMS を使用することは安全ですか?

SMS OTP は、電話番号を最初に確認する際に電話番号を確認するのに便利ですが、 SMS による電話番号の確認は、 電話番号が乗っ取られて携帯通信会社によって再利用される可能性があるため、再認証が必要になります。 WebOTP は便利な再認証と復元メカニズムですが、サービスは さらなる要因(知識の課題など)と組み合わせるか、 Web Authentication API 認証が必要になります。

Chrome の実装に関するバグはどこに報告すればよいですか?

Chrome の実装にバグは見つかりましたか?

  • バグを報告: https://new.crbug.com. できるだけ多くの詳細、簡単な再現手順、 [Components] を Blink>WebOTP に設定します。

この機能に関するサポートにはどのようなものがありますか?

WebOTP API を使用する予定はありますか?皆様からの一般公開のサポートにより、Google は 他のブラウザ ベンダーのサポートの重要性についても説明しました。 ハッシュタグを使用して @ChromiumDev にツイートしてください #WebOTP どこで、どのように使用されているかをお知らせください。

リソース