एसएमएस से ओटीपी फ़ॉर्म इस्तेमाल करने के सबसे सही तरीके

Eiji Kitamura

एसएमएस भेजकर, उपयोगकर्ता से उसकी पहचान की पुष्टि करने के लिए एक बार इस्तेमाल होने वाला पासवर्ड (ओटीपी) मांगना आम बात है. एसएमएस ओटीपी के इस्तेमाल के कुछ उदाहरण यहां दिए गए हैं:

• दो तरीकों से पुष्टि करने की सुविधा. उपयोगकर्ता नाम और पासवर्ड के अलावा, एसएमएस ओटीपी का इस्तेमाल यह पुष्टि करने के लिए किया जा सकता है कि खाते का मालिकाना हक उस व्यक्ति के पास है जिसे एसएमएस ओटीपी मिला है.
• फ़ोन नंबर की पुष्टि करना. कुछ सेवाएं, फ़ोन नंबर को उपयोगकर्ता के मुख्य आइडेंटिफ़ायर के तौर पर इस्तेमाल करती हैं. इन सेवाओं में, उपयोगकर्ता अपनी पहचान की पुष्टि करने के लिए, अपना फ़ोन नंबर और एसएमएस से मिला ओटीपी डाल सकते हैं. कभी-कभी इसे पिन के साथ मिलाकर, दो तरीकों से पुष्टि करने की सुविधा के तौर पर इस्तेमाल किया जाता है.
• खाता वापस पाना. जब कोई उपयोगकर्ता अपने खाते का ऐक्सेस खो देता है, तो उसे वापस पाने का तरीका होना चाहिए. खाता वापस पाने के लिए, आम तौर पर इन तरीकों का इस्तेमाल किया जाता है: रजिस्टर किए गए ईमेल पते पर ईमेल भेजना या फ़ोन नंबर पर एसएमएस के ज़रिए ओटीपी भेजना.
• पेमेंट की पुष्टि पेमेंट सिस्टम में, कुछ बैंक या क्रेडिट कार्ड जारी करने वाली कंपनियां, सुरक्षा की वजहों से पेमेंट करने वाले व्यक्ति से पुष्टि करने के लिए कहती हैं. इसके लिए, आम तौर पर एसएमएस ओटीपी का इस्तेमाल किया जाता है.

इन उदाहरणों के लिए, एसएमएस ओटीपी फ़ॉर्म बनाने के सबसे सही तरीकों के बारे में जानने के लिए पढ़ते रहें.

चेकलिस्ट

एसएमएस ओटीपी की सुविधा का इस्तेमाल करके, लोगों को बेहतरीन अनुभव देने के लिए यह तरीका अपनाएं:

• <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" से उपयोगकर्ता अनुभव बेहतर होता है. हालांकि, यह पक्का करके कि एसएमएस मैसेज, ओरिजिन से जुड़े मैसेज के फ़ॉर्मैट के मुताबिक हो, उपयोगकर्ता अनुभव को और बेहतर बनाया जा सकता है.

ऐसे एट्रिब्यूट जो ज़रूरी नहीं हैं

ऐसे एट्रिब्यूट जो ज़रूरी नहीं हैं:

• pattern यह बताता है कि डाले गए ओटीपी का फ़ॉर्मैट कैसा होना चाहिए. मिलान करने वाले पैटर्न के बारे में बताने के लिए, रेगुलर एक्सप्रेशन का इस्तेमाल करें. उदाहरण के लिए, \d{6}, ओटीपी को छह अंकों की स्ट्रिंग तक सीमित करता है. pattern के बारे में ज़्यादा जानने के लिए, रीयल-टाइम में ज़्यादा जटिल पुष्टि के लिए JavaScript का इस्तेमाल करना लेख पढ़ें.
• required से पता चलता है कि उपयोगकर्ता को यह फ़ील्ड भरना होगा.

ज़्यादा सलाह पाने के लिए, साइन-इन फ़ॉर्म से जुड़े सबसे सही तरीके लेख पढ़ें.

एसएमएस के टेक्स्ट को फ़ॉर्मैट करना

एसएमएस से भेजे गए, ऑरिजिन से जुड़े सिर्फ़ एक बार इस्तेमाल किए जा सकने वाले कोड के स्पेसिफ़िकेशन के मुताबिक, ओटीपी डालने के उपयोगकर्ता अनुभव को बेहतर बनाएं.

फ़ॉर्मैट का नियम यह है: एसएमएस मैसेज के आखिर में, पाने वाले का डोमेन @ के साथ और ओटीपी # के साथ लिखें.

उदाहरण के लिए:

Your OTP is 123456

@web-otp.glitch.me #123456

ओटीपी मैसेज के स्टैंडर्ड फ़ॉर्मैट की वजह से, ओटीपी को आसानी से और भरोसेमंद तरीके से निकाला जा सकता है. ओटीपी कोड को वेबसाइटों से जोड़ने पर, उपयोगकर्ताओं को नुकसान पहुंचाने वाली साइटों पर कोड देने के लिए गुमराह करना मुश्किल हो जाता है.

फ़ॉर्मैटिंग के सटीक नियम

सटीक नियम ये हैं:

• मैसेज की शुरुआत में (ज़रूरी नहीं) ऐसा टेक्स्ट होता है जिसे आसानी से पढ़ा जा सकता है. इसमें चार से दस वर्णों की ऐसी स्ट्रिंग होती है जिसमें अक्षर और अंक शामिल होते हैं. साथ ही, इसमें कम से कम एक संख्या होती है. आखिरी लाइन में यूआरएल और ओटीपी होता है.
• एपीआई को कॉल करने वाली वेबसाइट के यूआरएल के डोमेन वाले हिस्से से पहले @ होना चाहिए.
• यूआरएल में # होना चाहिए. इसके बाद, ओटीपी होना चाहिए. वर्णों की संख्या 140 या इससे कम होनी चाहिए.

इस फ़ॉर्मैट का इस्तेमाल करने के कई फ़ायदे हैं:

• ओटीपी, डोमेन से जुड़ा होगा. अगर उपयोगकर्ता, एसएमएस मैसेज में बताए गए डोमेन के अलावा किसी दूसरे डोमेन पर है, तो उसे ओटीपी का सुझाव नहीं दिखेगा. इससे फ़िशिंग हमलों और खाते के हैक होने का जोखिम भी कम हो जाता है.
• अब ब्राउज़र, अनुमान लगाने के मुश्किल और भरोसेमंद तरीकों पर निर्भर न रहकर, ओटीपी को भरोसेमंद तरीके से निकाल पाएगा.

जब कोई वेबसाइट autocomplete="one-time-code" का इस्तेमाल करती है, तब iOS 14 या इसके बाद के वर्शन वाला Safari इन नियमों के मुताबिक ओटीपी का सुझाव देगा.

एसएमएस मैसेज के इस फ़ॉर्मैट से, Safari के अलावा अन्य ब्राउज़र को भी फ़ायदा मिलता है. Android पर Chrome, Opera, और Vivaldi ब्राउज़र में भी WebOTP API के साथ, ओरिजिन से जुड़े एक बार इस्तेमाल किए जा सकने वाले कोड के नियम का इस्तेमाल किया जा सकता है. हालांकि, ऐसा autocomplete="one-time-code" के ज़रिए नहीं किया जा सकता.

WebOTP API का इस्तेमाल करना

WebOTP API, एसएमएस मैसेज में मिले ओटीपी को ऐक्सेस करने की सुविधा देता है. otp टाइप (OTPCredential) के साथ navigator.credentials.get() को कॉल करने पर, वेबसाइट ऐसे एसएमएस का इंतज़ार करेगी जो ओरिजिन से जुड़े एक बार इस्तेमाल किए जा सकने वाले कोड के मुताबिक हो. इसके बाद, उपयोगकर्ता को एसएमएस डिलीवर किया जाएगा और उसे ऐक्सेस दिया जाएगा.transportsms ओटीपी को 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);
    });
  });
}