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

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

Eiji Kitamura

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

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

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

चेकलिस्ट

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

• इसके साथ <input> एलिमेंट का इस्तेमाल करें:
  • type="text"
  • inputmode="numeric"
  • autocomplete="one-time-code"
• ओटीपी वाले एसएमएस के आखिरी लाइन के तौर पर @BOUND_DOMAIN #OTP_CODE का इस्तेमाल करें.
• WebOTP एपीआई का इस्तेमाल करें.

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

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

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

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

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

Your OTP is 123456

@web-otp.glitch.me #123456

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

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

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

जब कोई वेबसाइट 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);
    });
  });
}

Unsplash पर जेसन ल्युंग की फ़ोटो.