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

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

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

Eiji Kitamura

WebOTP API とは

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

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

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

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

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

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

実例を見る

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

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

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

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

Chrome 84 で https://web-otp.glitch.me にアクセスする。またはダウンロードします
別の電話から、次の 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>

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

注: 現時点では、Chrome はクロスオリジンの iframe からの WebOTP API 呼び出しのみをサポートしています。一意のオリジンが祖先チェーンに 1 つだけであることを意味します。次のようなシナリオがあります。 <ph type="x-smartling-placeholder">

a.com -> b.com
a.com →b.com →b.com
a.com →a.com →b.com
a.com →b.com →c.com

で確認できます。 b.com での WebOTP の使用はサポートされていますが、c.com ではサポートされていません。以下のシナリオも、需要が不足しているためサポートされていません。 UX の複雑さです

a.com →b.com →a.com（WebOTP API を呼び出す）

パソコンで WebOTP を使用する

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

</ph>

</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 どこで、どのように使用されているかをお知らせください。

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

WebOTP API とは

実例を見る

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

WebOTP API を使用する

機能検出

OTP を処理する

メッセージの中止

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

デモ

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

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

権限ポリシーを構成

パソコンで WebOTP を使用する

よくある質問

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

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

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

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

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

リソース

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

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