एसएमएस से मिलने वाले ओटीपी के फ़ॉर्म को ऑप्टिमाइज़ करने और उपयोगकर्ता अनुभव को बेहतर बनाने का तरीका जानें.
उपयोगकर्ता से एसएमएस के ज़रिए भेजा गया ओटीपी (एक बार इस्तेमाल होने वाला पासवर्ड) देने के लिए कहना एक आम बात है उपयोगकर्ता के फ़ोन नंबर की पुष्टि करने का तरीका बताया गया है. एसएमएस ओटीपी इस्तेमाल करने के कुछ उदाहरण:
- दो तरीकों से पुष्टि करने की सुविधा. उपयोगकर्ता नाम और पासवर्ड के अलावा, एसएमएस ओटीपी इस बात की पुष्टि के लिए कि खाते का मालिकाना हक उस व्यक्ति के पास है जिसे ओटीपी एसएमएस.
- फ़ोन नंबर की पुष्टि करना. कुछ सेवाएं उपयोगकर्ता के फ़ोन नंबर का इस्तेमाल प्राइमरी आइडेंटिफ़ायर. ऐसी सेवाओं में, उपयोगकर्ता अपना फ़ोन नंबर और पहचान की पुष्टि करने के लिए, एसएमएस से मिला ओटीपी. कभी-कभी इसे पिन के साथ जोड़ा जाता है इसे दो तरीकों से पुष्टि करने के लिए इस्तेमाल किया जाता है.
- खाता वापस पाना. जब किसी उपयोगकर्ता के पास अपने खाते का ऐक्सेस नहीं रहता है, तो उसे वापस पाना है. अपने रजिस्टर किए गए ईमेल पते पर ईमेल भेजना या उनके फ़ोन नंबर पर एसएमएस से भेजा जाने वाला ओटीपी, खाता वापस पाने के आम तरीके हैं.
- पेमेंट की पुष्टि करना पेमेंट सिस्टम में, कुछ बैंकों या क्रेडिट कार्ड में सुरक्षा के लिहाज़ से, जारी करने वाले, पेमेंट करने वाले से अतिरिक्त पुष्टि का अनुरोध करते हैं. आम तौर पर, इस काम के लिए एसएमएस ओटीपी का इस्तेमाल किया जाता है.
इस पोस्ट में ऊपर दिए गए इस्तेमाल के लिए, एसएमएस ओटीपी फ़ॉर्म बनाने के सबसे सही तरीके बताए गए हैं मामले.
चेकलिस्ट
एसएमएस पर मिलने वाले ओटीपी से बेहतरीन उपयोगकर्ता अनुभव देने के लिए, यह तरीका अपनाएं:
<input>एलिमेंट का इस्तेमाल इनके साथ करें:type="text"inputmode="numeric"autocomplete="one-time-code"
- ओटीपी वाले एसएमएस की आखिरी लाइन के तौर पर
@BOUND_DOMAIN #OTP_CODEका इस्तेमाल करें. - WebOTP API का इस्तेमाल करें.
<input> एलिमेंट का इस्तेमाल करना
<input> एलिमेंट के साथ फ़ॉर्म का इस्तेमाल करना, सबसे सही तरीका है
को फॉलो कर सकता है, क्योंकि यह सभी ब्राउज़र में काम करता है. भले ही अन्य सुझाव
यह पोस्ट कुछ ब्राउज़र में काम नहीं करती है. उपयोगकर्ता फिर भी ओटीपी डाल सकते हैं और सबमिट कर सकते हैं
मैन्युअल रूप से.
<form action="/verify-otp" method="POST">
<input type="text"
inputmode="numeric"
autocomplete="one-time-code"
pattern="\d{6}"
required>
</form>
यहां कुछ आइडिया दिए गए हैं, जिनकी मदद से इनपुट फ़ील्ड में बेहतर नतीजे पाए जा सकते हैं ब्राउज़र के सही तरीके से काम करने के लिए किया जा सकता है.
type="text"
ओटीपी आम तौर पर पांच या छह अंकों की होती हैं. इसलिए, ओटीपी इस्तेमाल होने से
इनपुट फ़ील्ड के लिए type="number" को इस्तेमाल करना आसान लग सकता है, क्योंकि इससे मोबाइल बदल जाता है
कीबोर्ड का इस्तेमाल सिर्फ़ नंबर के लिए करें. इसकी सलाह नहीं दी जाती है क्योंकि ब्राउज़र को
इनपुट फ़ील्ड को कई संख्याओं के क्रम के बजाय एक गिने जा सकने वाला नंबर होना चाहिए,
जिसकी वजह से अनचाहा व्यवहार देखने को मिल सकता है. type="number" का इस्तेमाल करने से समस्या आ सकती है
बटन, इनपुट फ़ील्ड के बगल में दिखाए जाएंगे; इन बटन को दबाकर
संख्या को बढ़ाता या घटाता है और पिछले शून्यों को हटा सकता है.
इसके बजाय, type="text" का इस्तेमाल करें. इससे मोबाइल कीबोर्ड अंकों में नहीं बदलेगा
ही, लेकिन यह ठीक है, क्योंकि inputmode="numeric" का उपयोग करने की अगली सलाह है
वह काम.
inputmode="numeric"
inputmode="numeric" का इस्तेमाल करें
मोबाइल कीबोर्ड को केवल अंकों में बदलने के लिए.
कुछ वेबसाइटें ओटीपी इनपुट फ़ील्ड के लिए type="tel" का इस्तेमाल करती हैं, क्योंकि यह भी
मोबाइल कीबोर्ड को केवल संख्याओं (* और # सहित) में तब बदलता है, जब
फ़ोकस्ड. इस हैक का इस्तेमाल पहले तब किया गया था, जब inputmode="numeric"
व्यापक रूप से समर्थित नहीं था. जब से Firefox ने अपने ब्राउज़र पर
inputmode="numeric",
शब्दों के हिसाब से गलत type="tel" हैक का इस्तेमाल करने की ज़रूरत नहीं है.
autocomplete="one-time-code"
autocomplete
एट्रिब्यूट का इस्तेमाल करके डेवलपर यह तय कर सकते हैं कि ब्राउज़र को
को अपने-आप पूरा होने वाली सहायता देनी होगी और ब्राउज़र को
फ़ील्ड में किस तरह की जानकारी चाहिए.
autocomplete="one-time-code" से तब, जब किसी उपयोगकर्ता को मैसेज (एसएमएस) मिलता है
फ़ॉर्म खुला है, तो ऑपरेटिंग सिस्टम एसएमएस में ओटीपी को मैन्युअल तरीके से पार्स करेगा और
ऐसा करने पर, कीबोर्ड आपको ओटीपी का सुझाव देगा. यह सिर्फ़ Safari 12 और
हालाँकि, हम इसका इस्तेमाल करने का सुझाव देते हैं, क्योंकि यह
एसएमएस के ज़रिए ओटीपी पाने के अनुभव को बेहतर बनाने का आसान तरीका बताया गया है.
autocomplete="one-time-code" से उपयोगकर्ता अनुभव को बेहतर बनाया जा सकता है, लेकिन आपकी सुविधा के अलावा अन्य सुविधाएं भी हैं
यह सुनिश्चित करके कर सकता है कि SMS संदेश मूल-बाधित संदेश का अनुपालन करता है
फ़ॉर्मैट.
एसएमएस टेक्स्ट फ़ॉर्मैट करना
ओटीपी डालने के अनुभव को बेहतर बनाने के लिए एसएमएस से डिलीवर किए गए ऑरिजिन-बाउंड एक बार इस्तेमाल किए जाने वाले कोड स्पेसिफ़िकेशन.
फ़ॉर्मैट का नियम आसान है: पाने वाले डोमेन का इस्तेमाल करके मैसेज (एसएमएस) भेजें
ओटीपी के पहले @ और ओटीपी के पहले #.
उदाहरण के लिए:
Your OTP is 123456
@web-otp.glitch.me #123456
ओटीपी वाले मैसेज के लिए स्टैंडर्ड फ़ॉर्मैट का इस्तेमाल करने पर, मैसेज निकाला जा सकता है उन्हें सुरक्षित और भरोसेमंद बनाने के लिए इस्तेमाल किया जा सकता है. ओटीपी कोड को इसके साथ जोड़ा जा रहा है वेबसाइटों के ज़रिए, उपयोगकर्ताओं को धोखे में रखकर, नुकसान पहुंचाने वाली साइटों पर कोड हासिल करना मुश्किल हो जाता है.
इस फ़ॉर्मैट का इस्तेमाल करने के कुछ फ़ायदे हैं:
- ओटीपी डोमेन से ही लिया जाएगा. अगर उपयोगकर्ता, डोमेन के अलावा किसी दूसरे डोमेन पर है एसएमएस में बताया गया है, तो ओटीपी का सुझाव नहीं दिखेगा. इससे फ़िशिंग हमलों और खाते के संभावित रूप से हाइजैक होने का खतरा भी कम हो जाता है.
- अब ब्राउज़र बिना किसी परेशानी के ओटीपी को सुरक्षित तरीके से निकाल पाएगा रहस्यमयी और अजीब अनुभव उपलब्ध हैं.
अगर कोई वेबसाइट autocomplete="one-time-code" का इस्तेमाल करती है, तो उसमें iOS 14 या उसके बाद के वर्शन वाले Safari में
ऊपर दिए गए नियमों का पालन करके, ओटीपी का सुझाव देगा.
यह मैसेज (एसएमएस) फ़ॉर्मैट, Safari के अलावा दूसरे ब्राउज़र को भी फ़ायदा पहुंचाता है. Chrome, Opera,
और Android पर Vivaldi पर, ऑरिजिन-बाउंड वन-टाइम कोड नियम भी काम करते हैं
WebOTP API का इस्तेमाल करता है, हालांकि autocomplete="one-time-code" के ज़रिए नहीं.
WebOTP API का इस्तेमाल करना
WebOTP API, ओटीपी का ऐक्सेस देता है
जो एसएमएस में मिला हो. कॉल करके
navigator.credentials.get()
otp टाइप (OTPCredential) के साथ, जहां transport में sms शामिल है, वेबसाइट
ऐसे एसएमएस का इंतज़ार करेगा जो ऑरिजिन के लिए एक बार इस्तेमाल होने वाले कोड का पालन करता है
डिलीवर किया जाता है और उपयोगकर्ता ने उसे ऐक्सेस दिया होता है. JavaScript को ओटीपी भेजे जाने के बाद,
तो वेबसाइट किसी फ़ॉर्म में इसका इस्तेमाल कर सकती है या उसे सीधे सर्वर पर पोस्ट कर सकती है.
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);
});
});
}
इस डिवाइस पर जेसन लियॉन्ग की खींची गई फ़ोटो अनस्प्लैश.