SMS OTP フォームを最適化し、ユーザー エクスペリエンスを向上させる方法について説明します。
SMS で配信される OTP（ワンタイム パスワード）の入力をユーザーに求めることは、 ユーザーの電話番号を確認する手段です。SMS OTP のユースケースはいくつかあります。
- 2 要素認証。SMS OTP は、ユーザー名とパスワードに加えて、 受け取ったユーザーによってアカウントの所有者であることを示す強いシグナルとして使用されます。 SMS OTP。
- 電話番号の確認。一部のサービスでは、電話番号をユーザーの あります。このようなサービスでは、ユーザーは自分の電話番号と 身元を証明するために SMS で受信した OTP。PIN と組み合わせて使用されることもあります。 2 ファクタ認証を構成します
- アカウント復元。ユーザーがアカウントにアクセスできなくなった場合、 復元する方法となります。登録済みのメールアドレスにメールを送信する 電話番号への SMS OTP は、一般的なアカウント復元方法です。
- お支払いの確認: お支払いシステム、一部の銀行やクレジット カード カード発行会社は、セキュリティ上の理由から支払人に追加の認証を要求します。 SMS OTP は、その目的によく使用されます。
この投稿では、上記の用途で SMS OTP フォームを作成するためのベスト プラクティスについて説明します。 対応できます
チェックリスト
SMS OTP で最適なユーザー エクスペリエンスを提供するには、次の手順を実施します。
<input>要素を次のように設定します。 <ph type="x-smartling-placeholder">- </ph>
type="text"inputmode="numeric"autocomplete="one-time-code"
- OTP SMS メッセージの最後の行として
@BOUND_DOMAIN #OTP_CODEを使用します。 - WebOTP API を使用する。
<input> 要素を使用する
<input> 要素を含むフォームを使用することが、最も重要なベスト プラクティスです。
すべてのブラウザで機能します。他の候補からの
この投稿は一部のブラウザで機能しません。ユーザーは OTP を入力して送信できます
できます。
<form action="/verify-otp" method="POST">
<input type="text"
inputmode="numeric"
autocomplete="one-time-code"
pattern="\d{6}"
required>
</form>
以下に、入力フィールドを最大限に活用するためのヒントをいくつか紹介します。 使用できます。
type="text"
OTP は通常 5 ～ 6 桁の数字なので、
入力フィールドの type="number" はモバイルを変更するため、直感的に思えるかもしれません。
キーボードを数字のみに変換できますこの方法は推奨されません。ブラウザでは、
入力フィールドを、複数の数字のシーケンスではなくカウント可能な数にする
予期しない動作が発生する可能性があります。type="number" を使用するとスケールアップまたはスケールダウンが発生する
入力フィールドの横に表示されるボタンこれらのボタンを押す
数値をインクリメントまたはデクリメントします。また、先行するゼロを削除できます。
代わりに type="text" を使用してください。モバイル キーボードは数字に変換されません
ただし、inputmode="numeric" の使用に関する次のヒントでは、
できます。
inputmode="numeric"
inputmode="numeric" を使用する
モバイルキーボードを数字のみに変更します
一部のウェブサイトでは、OTP の入力フィールドに type="tel" を使用しています。
次の場合にモバイル キーボードを数字のみ（* と # を含む）に切り替える
できます。このハッキングは、以前 inputmode="numeric" のときに使用されました。
広くは支持されていなかったからですFirefox がサポートを開始し、
inputmode="numeric",
意味的に正しくない type="tel" ハックを使用する必要はありません。
autocomplete="one-time-code"
autocomplete
属性を使用すると、ブラウザに付与される権限を
により、ブラウザに対して予測入力の支援が必要となり、
入力が求められる情報のタイプ。
autocomplete="one-time-code" で、ユーザーが SMS メッセージを受信したときに
開いた場合、オペレーティング システムは SMS 内の OTP をヒューリスティックに解析し、
入力する OTP がキーボードで提案されます。Safari 12 以降でのみ動作します。
iOS、iPadOS、macOS です。ただし、iOS、iPad、
これらのプラットフォームで SMS OTP のエクスペリエンスを簡単に改善できます。
autocomplete="one-time-code" を使用するとユーザー エクスペリエンスが向上しますが、その他の機能もあります
SMS メッセージが送信元宛てのメッセージに準拠していることを確認すること
形式。
SMS テキストのフォーマット
以下と連携して OTP 入力のユーザー エクスペリエンスを向上させる SMS で配信される送信元宛てのワンタイム コード 仕様。
フォーマット ルールはシンプル: 受信者のドメインで SMS メッセージを完成させる
先頭は @、OTP は # でした。
例:
Your OTP is 123456
@web-otp.glitch.me #123456
OTP メッセージの標準形式を使用すると、 簡単かつ信頼性の高い方法で実行できます。OTP コードを ユーザーをだまして悪意のあるサイトにコードを提供させようとするのを防ぐ。
この形式を使用すると、次の 2 つのメリットがあります。
- OTP はドメインにバインドされます。ユーザーが SMS メッセージで指定された宛先である場合、OTP の候補は表示されません。 これにより、フィッシング攻撃や潜在的なアカウントの不正使用のリスクを軽減できます。
- ブラウザは、ソフトウェアに依存せずに OTP を確実に抽出できるようになります。 不思議で不安定なヒューリスティックです
ウェブサイトで autocomplete="one-time-code"、iOS 14 以降の Safari
上記のルールに従って OTP が提案されます。
この SMS メッセージ形式は、Safari 以外のブラウザにもメリットをもたらします。Chrome、Opera、
Android 版 Vivaldi も、オリジン限定のワンタイム コード ルールをサポートしています。
autocomplete="one-time-code" 経由ではなく、WebOTP API を使用します。
WebOTP API を使用する
WebOTP API: OTP へのアクセスを提供します。
メッセージで受信したメッセージ。通話
navigator.credentials.get()
otp タイプ（OTPCredential）。transport には、ウェブサイトの sms が含まれる
は、配信元にバインドされたワンタイム コードに準拠する SMS が届くのを待ちます。
ユーザーによって付与され、アクセス権が付与されています。OTP が JavaScript に渡されると
フォームで使用したり、サーバーに直接 POST で送信したりできます。
navigator.credentials.get({
otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
WebOTP API の使用方法について詳しくは、ウェブ上で電話番号を確認する
（WebOTP API を使用する）か、次のスニペットをコピーして貼り付けます。（
<form> 要素の action 属性と method 属性が適切に設定されていることを確認してください）。
// Feature detection
if ('OTPCredential' in window) {
window.addEventListener('DOMContentLoaded', e => {
const input = document.querySelector('input[autocomplete="one-time-code"]');
if (!input) return;
// Cancel the WebOTP API if the form is submitted manually.
const ac = new AbortController();
const form = input.closest('form');
if (form) {
form.addEventListener('submit', e => {
// Cancel the WebOTP API.
ac.abort();
});
}
// Invoke the WebOTP API
navigator.credentials.get({
otp: { transport:['sms'] },
signal: ac.signal
}).then(otp => {
input.value = otp.code;
// Automatically submit the form when an OTP is obtained.
if (form) form.submit();
}).catch(err => {
console.log(err);
});
});
}
写真撮影: Jason Leung スプラッシュを解除。