आम तौर पर, उपयोगकर्ता से एक बार इस्तेमाल होने वाला पासवर्ड (ओटीपी) मांगा जाता है, ताकि एसएमएस भेजकर उसकी पहचान की पुष्टि की जा सके. एसएमएस से ओटीपी पाने की सुविधा के कुछ उदाहरण यहां दिए गए हैं:
- दो तरीकों से पुष्टि करने की सुविधा. उपयोगकर्ता नाम और पासवर्ड के अलावा, एसएमएस से मिलने वाले ओटीपी का इस्तेमाल, इस बात के मज़बूत सिग्नल के तौर पर किया जा सकता है कि खाता उस व्यक्ति का है जिसे एसएमएस से ओटीपी मिला है.
- फ़ोन नंबर की पुष्टि करना. कुछ सेवाएं, उपयोगकर्ता के मुख्य आइडेंटिफ़ायर के तौर पर फ़ोन नंबर का इस्तेमाल करती हैं. इन सेवाओं में, उपयोगकर्ता अपनी पहचान की पुष्टि करने के लिए, अपना फ़ोन नंबर और एसएमएस से मिला ओटीपी डाल सकते हैं. कभी-कभी इसे पिन के साथ जोड़कर, दो तरीकों से पुष्टि करने की सुविधा बनाई जाती है.
- खाता वापस पाने की सुविधा. जब कोई उपयोगकर्ता अपने खाते का ऐक्सेस खो देता है, तो उसे वापस पाने का कोई तरीका होना चाहिए. खाता वापस पाने की सुविधा के लिए, रजिस्टर किए गए ईमेल पते पर ईमेल भेजना या फ़ोन नंबर पर एसएमएस के ज़रिए ओटीपी भेजना आम तौर पर इस्तेमाल किए जाने वाले तरीके हैं.
- पेमेंट की पुष्टि पेमेंट सिस्टम में, कुछ बैंक या क्रेडिट कार्ड जारी करने वाली कंपनियां, सुरक्षा की वजहों से पेमेंट करने वाले व्यक्ति से अतिरिक्त पुष्टि का अनुरोध करती हैं. आम तौर पर, इस काम के लिए एसएमएस से ओटीपी भेजा जाता है.
इन मामलों में, एसएमएस ओटीपी फ़ॉर्म बनाने के सबसे सही तरीकों के बारे में जानने के लिए, आगे पढ़ें.
चेकलिस्ट
एसएमएस से ओटीपी पाने की सुविधा का इस्तेमाल करने वाले लोगों को बेहतर अनुभव देने के लिए, यह तरीका अपनाएं:
<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" की मदद से, जब भी किसी उपयोगकर्ता को फ़ॉर्म भरने के दौरान एसएमएस मिलता है, तो ऑपरेटिंग सिस्टम, एसएमएस में मौजूद ओटीपी को अपने-आप पार्स कर लेता है. इसके बाद, कीबोर्ड उपयोगकर्ता को ओटीपी डालने का सुझाव देता है. यह सिर्फ़ iOS, iPadOS, और macOS पर Safari 12 और इसके बाद के वर्शन पर काम करता है. हालांकि, हमारा सुझाव है कि आप इसका इस्तेमाल करें, क्योंकि यह उन प्लैटफ़ॉर्म पर एसएमएस ओटीपी के अनुभव को बेहतर बनाने का सबसे अच्छा तरीका है.
autocomplete="one-time-code" के कुछ खास पल.
autocomplete="one-time-code" से उपयोगकर्ता अनुभव बेहतर होता है. हालांकि, यह पक्का करके कि एसएमएस मैसेज, ओरिजिन-बाउंड मैसेज फ़ॉर्मैट के मुताबिक हो, और भी बेहतर अनुभव दिया जा सकता है.
ऐसे एट्रिब्यूट जो ज़रूरी नहीं हैं
ऐसे एट्रिब्यूट जो ज़रूरी नहीं हैं:
patternइससे यह तय होता है कि डाले गए ओटीपी का फ़ॉर्मैट क्या होना चाहिए. मैचिंग पैटर्न तय करने के लिए, रेगुलर एक्सप्रेशन का इस्तेमाल करें. उदाहरण के लिए,\d{6}ओटीपी को छह अंकों की स्ट्रिंग तक सीमित करता है.patternके बारे में ज़्यादा जानने के लिए, ज़्यादा मुश्किल रीयल-टाइम पुष्टि के लिए JavaScript का इस्तेमाल करना लेख पढ़ें.requiredइससे पता चलता है कि उपयोगकर्ता को फ़ील्ड भरना होगा.
ज़्यादा सलाह पाने के लिए, साइन-इन फ़ॉर्म के सबसे सही तरीके पढ़ें.
एसएमएस के टेक्स्ट को फ़ॉर्मैट करना
ओटीपी डालने के उपयोगकर्ता अनुभव को बेहतर बनाएं. इसके लिए, एसएमएस से भेजे गए, ओरिजिन-बाउंड वन-टाइम कोड की खास जानकारी के साथ अलाइन करें.
फ़ॉर्मैट का मुख्य नियम यह है: एसएमएस के आखिर में, मैसेज पाने वाले का डोमेन और ओटीपी शामिल करें. डोमेन से पहले @ और ओटीपी से पहले # लगाएं.
उदाहरण के लिए:
Your OTP is 123456
@web-otp.example.com #123456
ओटीपी मैसेज के स्टैंडर्ड फ़ॉर्मैट की वजह से, ओटीपी को आसानी से और ज़्यादा भरोसेमंद तरीके से निकाला जा सकता है. ओटीपी कोड को वेबसाइटों से जोड़ने पर, उपयोगकर्ताओं को धोखा देकर नुकसान पहुंचाने वाली साइटों को कोड देने के लिए मजबूर करना मुश्किल हो जाता है.
फ़ॉर्मैटिंग के सटीक नियम
इसके लिए ये नियम हैं:
- मैसेज की शुरुआत, किसी व्यक्ति के लिए आसानी से पढ़े जा सकने वाले टेक्स्ट से होती है. यह टेक्स्ट डालना ज़रूरी नहीं है. इसमें चार से दस वर्णों की एक स्ट्रिंग होती है, जिसमें अक्षर और अंक शामिल होते हैं. साथ ही, इसमें कम से कम एक नंबर होता है. इसके बाद, आखिरी लाइन में यूआरएल और ओटीपी होता है.
- एपीआई को शुरू करने वाली वेबसाइट के यूआरएल के डोमेन वाले हिस्से से पहले,
@होना चाहिए. - यूआरएल में
#होना चाहिए. इसके बाद, ओटीपी होना चाहिए. वर्णों की संख्या 140 या उससे कम होनी चाहिए.
इस फ़ॉर्मैट का इस्तेमाल करने के कई फ़ायदे हैं:
- ओटीपी, डोमेन से जुड़ा होगा. अगर उपयोगकर्ता, एसएमएस में बताए गए डोमेन के अलावा किसी अन्य डोमेन पर है, तो ओटीपी का सुझाव नहीं दिखेगा. इससे फ़िशिंग हमलों और खाते को हाइजैक किए जाने के जोखिम को भी कम किया जा सकता है.
- अब ब्राउज़र, ओटीपी को भरोसेमंद तरीके से निकाल पाएगा. इसके लिए, उसे किसी रहस्यमयी और कमज़ोर ह्यूरिस्टिक पर निर्भर नहीं रहना पड़ेगा.
जब कोई वेबसाइट autocomplete="one-time-code" का इस्तेमाल करती है, तो iOS 14 या इसके बाद के वर्शन वाला Safari, इन नियमों के मुताबिक ओटीपी का सुझाव देगा.
एसएमएस मैसेज के इस फ़ॉर्मैट से, Safari के अलावा अन्य ब्राउज़र को भी फ़ायदा मिलता है. Android पर Chrome, Opera, और 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);
});
});
}