WebOTP API का इस्तेमाल करके, वेब पर मौजूद फ़ोन नंबर की पुष्टि करें

एसएमएस से मिले ओटीपी से उपयोगकर्ताओं की मदद करें

WebOTP API क्या है?

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

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

कई स्थितियों में इस आइडिया को पहले ही लागू किया जा चुका है, ताकि:

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

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

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

उदाहरण देखें

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

WebOTP API के साथ, ये चरण उपयोगकर्ता के लिए एक टैप करने जितना ही आसान हैं, जैसा कि वीडियो में दिखाया गया है. मैसेज मिलते ही, एक बॉटम शीट पॉप-अप होती है. इसमें, उपयोगकर्ता से अपने फ़ोन नंबर की पुष्टि करने के लिए कहा जाता है. बॉटम शीट पर मौजूद पुष्टि करें बटन पर क्लिक करने के बाद, ब्राउज़र, फ़ॉर्म में ओटीपी को चिपकाता है. इसके बाद, फ़ॉर्म सबमिट कर दिया जाता है. इसके लिए, उपयोगकर्ता को जारी रखें बटन दबाने की ज़रूरत नहीं होती.

नीचे दी गई इमेज में, पूरी प्रोसेस को डायग्राम दिखाया गया है.

WebOTP एपीआई का डायग्राम

डेमो में खुद देखें. यह ऐप्लिकेशन आपके फ़ोन नंबर के बारे में नहीं मांगता है और न ही आपके डिवाइस पर कोई मैसेज (एसएमएस) भेजता है. हालांकि, डेमो में दिख रहे टेक्स्ट को कॉपी करके, इसे दूसरे डिवाइस से भेजा जा सकता है. यह काम करता है, क्योंकि इससे कोई फ़र्क़ नहीं पड़ता कि ईमेल भेजने वाला कौन है, WebOTP API का इस्तेमाल करते समय.

  1. Chrome 84 में या बाद में किसी Android डिवाइस में, https://web-otp.glitch.me पर जाएं.
  2. अपने फ़ोन को दूसरे फ़ोन से निम्न एसएमएस टेक्स्ट संदेश भेजें.
Your OTP is: 123456.

@web-otp.glitch.me #12345

क्या आपको एसएमएस मिला और आपको इनपुट एरिया में कोड डालने का अनुरोध मिला? WebOTP API, उपयोगकर्ताओं के लिए इसी तरह काम करता है.

WebOTP API का इस्तेमाल करने के तीन हिस्से हैं:

  • सही तरीके से एनोटेट किया गया <input> टैग
  • आपके वेब ऐप्लिकेशन में JavaScript
  • एसएमएस से भेजा गया फ़ॉर्मैट किया गया मैसेज टेक्स्ट.

हम सबसे पहले <input> टैग को कवर करेंगे.

किसी <input> टैग के बारे में बताएं

WebOTP, किसी एचटीएमएल एनोटेशन के बिना काम करता है. हालांकि, क्रॉस-ब्राउज़र के साथ काम करने के मामले में, मेरा सुझाव है कि आप autocomplete="one-time-code" को उस <input> टैग में जोड़ें जहां आपको लगता है कि उपयोगकर्ता ओटीपी डालेगा.

इससे Safari 14 या उसके बाद के वर्शन में उपयोगकर्ताओं को यह सुझाव देने की अनुमति मिलती है कि जब उन्हें एसएमएस मैसेज फ़ॉर्मैट करें में बताए गए फ़ॉर्मैट का इस्तेमाल करके एसएमएस मिलता है, तब उन्हें <input> फ़ील्ड में ओटीपी की मदद से जानकारी मिले. भले ही, यह ओटीपी WebOTP के साथ काम न करता हो.

एचटीएमएल

<form>
  <input autocomplete="one-time-code" required/>
  <input type="submit">
</form>

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

WebOTP बेहद आसान है. इसलिए, यहां दिए गए कोड को कॉपी करके चिपकाने से काम हो जाएगा. मैं आपको बताऊंगी कि अब क्या हो रहा है.

JavaScript

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}

सुविधा की पहचान करने की सुविधा

सुविधा की पहचान करने की सुविधा, कई अन्य एपीआई की तरह ही काम करती है. DOMContentLoaded इवेंट को सुनने पर, डीओएम ट्री के क्वेरी के लिए तैयार होने का इंतज़ार किया जाएगा.

JavaScript

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    …
    const form = input.closest('form');
    …
  });
}

ओटीपी प्रोसेस करें

WebOTP API ही काफ़ी आसान है. ओटीपी पाने के लिए, navigator.credentials.get() का इस्तेमाल करें. WebOTP, उस तरीके में otp का एक नया विकल्प जोड़ता है. इसमें सिर्फ़ एक प्रॉपर्टी है: transport, जिसकी वैल्यू 'sms' स्ट्रिंग वाली कैटगरी होनी चाहिए.

JavaScript

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
    …

इससे, एसएमएस मिलने पर ब्राउज़र की अनुमति का फ़्लो ट्रिगर हो जाता है. अगर अनुमति मिल जाती है, तो दिखाया गया प्रॉमिस OTPCredential ऑब्जेक्ट के साथ रिज़ॉल्व हो जाता है.

मिलने वाले OTPCredential ऑब्जेक्ट का कॉन्टेंट

{
  code: "123456" // Obtained OTP
  type: "otp"  // `type` is always "otp"
}

इसके बाद, ओटीपी वैल्यू को <input> फ़ील्ड में भेजें. सीधे फ़ॉर्म सबमिट करने से, उपयोगकर्ता को किसी बटन पर टैप करने की ज़रूरत नहीं होगी.

JavaScript

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.error(err);
    });
    …

मैसेज रद्द किया जा रहा है

अगर उपयोगकर्ता मैन्युअल तरीके से ओटीपी डालकर फ़ॉर्म सबमिट करता है, तो आपके पास options ऑब्जेक्ट में AbortController इंस्टेंस का इस्तेमाल करके, get() कॉल को रद्द करने का विकल्प होता है.

JavaScript

    …
    const ac = new AbortController();
    …
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    …
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
    …

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

एपीआई अपने-आप में आसान दिखना चाहिए, लेकिन इसका इस्तेमाल करने से पहले आपको कुछ चीज़ों के बारे में पता होना चाहिए. मैसेज, navigator.credentials.get() को कॉल करने के बाद भेजा जाना चाहिए. यह मैसेज उस डिवाइस पर मिलना चाहिए जिस पर get() को कॉल किया गया था. आखिर में, मैसेज को इन फ़ॉर्मैटिंग का पालन करना होगा:

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

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

Your OTP is: 123456.

@www.example.com #123456

यहां खराब उदाहरण दिए गए हैं:

गलत एसएमएस टेक्स्ट का उदाहरण यह काम क्यों नहीं करेगा
Here is your code for @example.com #123456 @ को आखिरी लाइन का पहला वर्ण माना जाता है.
Your code for @example.com is #123456 @ को आखिरी लाइन का पहला वर्ण माना जाता है.
Your verification code is 123456

@example.com\t#123456
@host और #code के बीच एक स्पेस होना चाहिए.
Your verification code is 123456

@example.com  #123456
@host और #code के बीच एक स्पेस होना चाहिए.
Your verification code is 123456

@ftp://example.com #123456
यूआरएल स्कीम शामिल नहीं की जा सकती.
Your verification code is 123456

@https://example.com #123456
यूआरएल स्कीम शामिल नहीं की जा सकती.
Your verification code is 123456

@example.com:8080 #123456
पोर्ट को शामिल नहीं किया जा सकता.
Your verification code is 123456

@example.com/foobar #123456
पाथ शामिल नहीं किया जा सकता.
Your verification code is 123456

@example .com #123456
डोमेन में कोई खाली सफ़ेद जगह नहीं है.
Your verification code is 123456

@domain-forbiden-chars-#%/:<>?@[] #123456
डोमेन में कोई पाबंदी वाले वर्ण नहीं हैं.
@example.com #123456

Mambo Jumbo
@host और #code को आखिरी लाइन माना जा सकता है.
@example.com #123456

App hash #oudf08lkjsdf834
@host और #code को आखिरी लाइन माना जा सकता है.
Your verification code is 123456

@example.com 123456
# मौजूद नहीं है.
Your verification code is 123456

example.com #123456
@ मौजूद नहीं है.
Hi mom, did you receive my last text @ और # मौजूद नहीं हैं.

डेमो

डेमो की मदद से अलग-अलग मैसेज आज़माएं: https://web-otp.glitch.me

इसे फ़ोर्क भी किया जा सकता है और अपना वर्शन बनाया जा सकता है: https://glitch.com/edit/#!/web-otp.

क्रॉस-ऑरिजिन iframe से WebOTP का इस्तेमाल करना

क्रॉस-ऑरिजिन iframe पर एसएमएस ओटीपी डालना आम तौर पर पेमेंट की पुष्टि करने के लिए इस्तेमाल किया जाता है. खास तौर पर 3D सिक्योर का इस्तेमाल करने पर ऐसा होता है. क्रॉस-ऑरिजिन iframe के साथ काम करने के लिए एक ही फ़ॉर्मैट होने पर, WebOTP API, नेस्ट किए गए ऑरिजिन से जुड़े ओटीपी डिलीवर करता है. उदाहरण के लिए:

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

क्रॉस-ऑरिजिन iframe में WebOTP API का इस्तेमाल करने के लिए, आपको दो काम करने होंगे:

  • एसएमएस टेक्स्ट मैसेज में टॉप-फ़्रेम ऑरिजिन और iframe ऑरिजिन, दोनों की जानकारी दें.
  • क्रॉस-ऑरिजिन iframe को उपयोगकर्ता से सीधे ओटीपी पाने के लिए, अनुमतियों की नीति को कॉन्फ़िगर करें.
iframe में जारी WebOTP एपीआई.

डेमो देखने के लिए, https://web-otp-iframe-demo.stackblitz.io पर जाएं.

एसएमएस टेक्स्ट मैसेज में बाउंड-ऑरिजिन की व्याख्या करें

जब WebOTP API को किसी iframe के अंदर से कॉल किया जाता है, तो एसएमएस वाले मैसेज में टॉप-फ़्रेम ऑरिजिन शामिल होना चाहिए. इसमें @ से पहले और # के बाद ओटीपी शामिल होना चाहिए. साथ ही, आखिरी लाइन में @ से पहले iframe ऑरिजिन होना चाहिए.

Your verification code is 123456

@shop.example #123456 @bank.exmple

अनुमतियों से जुड़ी नीति कॉन्फ़िगर करें

क्रॉस-ऑरिजिन iframe में WebOTP का इस्तेमाल करने के लिए, एम्बेडर को otp-क्रेडेंशियल की अनुमतियों की नीति के ज़रिए इस एपीआई का ऐक्सेस देना होगा. ऐसा इसलिए, ताकि अनजाने में होने वाली कार्रवाई से बचा जा सके. आम तौर पर इस लक्ष्य को हासिल करने के दो तरीके हैं:

एचटीटीपी हेडर के ज़रिए:

Permissions-Policy: otp-credentials=(self "https://bank.example")

iframe allow एट्रिब्यूट के ज़रिए:

<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

अनुमति की नीति तय करने के तरीके के बारे में ज़्यादा उदाहरण देखें.

डेस्कटॉप पर WebOTP का इस्तेमाल करें

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

डेस्कटॉप पर WebOTP एपीआई.

इस सुविधा के लिए उपयोगकर्ता को डेस्कटॉप Chrome और Android Chrome, दोनों पर एक ही Google खाते से साइन इन करना होगा.

सभी डेवलपर को अपनी डेस्कटॉप वेबसाइट पर WebOTP API लागू करना होगा. ठीक वैसे, जैसे वे मोबाइल वेबसाइट पर करते हैं. इसके लिए, किसी खास तरकीब की ज़रूरत नहीं है.

ज़्यादा जानकारी के लिए, WebOTP API का इस्तेमाल करके डेस्कटॉप पर फ़ोन नंबर की पुष्टि करें पर जाएं.

अक्सर पूछे जाने वाले सवाल

हालांकि, मैं सही तरीके से फ़ॉर्मैट किया गया मैसेज भेज रहा/रही हूं, तो डायलॉग नहीं दिखेगा. क्या समस्या है?

इस एपीआई की जांच करते समय कुछ चेतावनियां दी गई हैं:

  • अगर मैसेज पाने वाले की संपर्क सूची में, भेजने वाले का फ़ोन नंबर शामिल है, तो यह एपीआई ट्रिगर, एसएमएस उपयोगकर्ता की सहमति वाले एपीआई के डिज़ाइन की वजह से ट्रिगर नहीं होगा.
  • अगर आपके Android डिवाइस पर वर्क प्रोफ़ाइल का इस्तेमाल किया जा रहा है और WebOTP काम नहीं कर रहा है, तो अपनी निजी प्रोफ़ाइल पर Chrome इंस्टॉल करके इस्तेमाल करें. इसका मतलब है कि यह वही प्रोफ़ाइल है जिसमें आपको एसएमएस मैसेज मिलते हैं.

आपके मैसेज (एसएमएस) का फ़ॉर्मैट सही है या नहीं, यह देखने के लिए फ़ॉर्मैट को फिर से देखें.

क्या यह एपीआई अलग-अलग ब्राउज़र पर काम करता है?

Chromium और WebKit ने एसएमएस टेक्स्ट मैसेज फ़ॉर्मैट पर सहमति दी है और iOS 14 और macOS Big Sur पर Apple Safari के लिए काम करने का एलान किया गया है. Safari, WebOTP JavaScript API के साथ काम नहीं करता, लेकिन input एलिमेंट को autocomplete=["one-time-code"] के साथ एनोटेट करके, डिफ़ॉल्ट कीबोर्ड अपने-आप यह सुझाव देता है कि अगर एसएमएस मैसेज, इस फ़ॉर्मैट में है, तो ओटीपी डालें.

क्या पुष्टि करने के लिए, एसएमएस का इस्तेमाल करना सुरक्षित है?

मैसेज (एसएमएस) पर आधारित ओटीपी, पहली बार नंबर दिए जाने पर फ़ोन नंबर की पुष्टि करने के लिए मददगार होता है. हालांकि, फिर से पुष्टि करने के लिए, एसएमएस से फ़ोन नंबर की पुष्टि करना बहुत ध्यान से इस्तेमाल करना चाहिए. ऐसा इसलिए ज़रूरी है, क्योंकि मोबाइल और इंटरनेट सेवा देने वाली कंपनियां, फ़ोन नंबर हाइजैक कर सकती हैं और उन्हें रीसाइकल कर सकती हैं. WebOTP, फिर से पुष्टि करने और डेटा वापस पाने का एक आसान तरीका है. हालांकि, सेवाओं को इसे अतिरिक्त चीज़ों के साथ मिलाना चाहिए, जैसे कि नॉलेज चैलेंज या बेहतर तरीके से पुष्टि करने के लिए Web Authentication API का इस्तेमाल करें.

Chrome के लागू करने में आने वाली गड़बड़ियों की रिपोर्ट मैं कहां करूं?

क्या आपको Chrome को लागू करने में कोई गड़बड़ी मिली?

  • https://new.crbug.com पर जाकर गड़बड़ी की शिकायत करें. ज़्यादा से ज़्यादा जानकारी दें, इसे फिर से बनाने के आसान निर्देश दें, और कॉम्पोनेंट को Blink>WebOTP पर सेट करें.

मैं इस सुविधा की मदद कैसे करूं?

क्या आपको WebOTP एपीआई इस्तेमाल करना है? आपकी सार्वजनिक मदद से, हमें सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, दूसरे ब्राउज़र वेंडर को पता चलता है कि उनकी मदद करना कितना ज़रूरी है. हैशटैग #WebOTP इस्तेमाल करके @ChromiumDev को एक ट्वीट भेजें और हमें बताएं कि उसका इस्तेमाल कहां और कैसे किया जा रहा है.

रिसॉर्स