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

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

Eiji Kitamura

WebOTP API क्या है?

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

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

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

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

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

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

इसे चलाकर देखें

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

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

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

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

खुद डेमो आज़माएं. यह अनुरोध नहीं करता या अपने डिवाइस पर SMS भेजें, लेकिन आप किसी अन्य डिवाइस पर, डेमो में दिखाए गए टेक्स्ट को कॉपी करके. यह काम करता है, क्योंकि इससे कोई फ़र्क़ नहीं पड़ता कि WebOTP API का इस्तेमाल करते समय, मैसेज भेजने वाला कौन है.

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

@web-otp.glitch.me #12345

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

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

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

मैं पहले <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);
    });
    …

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

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

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 API काम करता है.

डेमो यहां आज़माएं 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 का इस्तेमाल करें

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

डेस्कटॉप पर WebOTP API.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

संसाधन