WebOTP एपीआई की मदद से, क्रॉस-ऑरिजिन iframe में ओटीपी फ़ॉर्म भरें

WebOTP एपीआई अब iframes से ओटीपी पा सकता है.

Eiji Kitamura
Yi Gu
मैसेज (एसएमएस) से भेजे जाने वाले ओटीपी (एक बार इस्तेमाल होने वाले पासवर्ड) का इस्तेमाल आम तौर पर फ़ोन नंबर की पुष्टि करने के लिए किया जाता है. उदाहरण के लिए, पुष्टि के दूसरे चरण के तौर पर या वेब पर पैसे चुकाने की पुष्टि के लिए. हालांकि, ब्राउज़र और एसएमएस ऐप्लिकेशन के बीच स्विच करने, ओटीपी को कॉपी करके चिपकाने या मैन्युअल तरीके से डालने से, गलती करना आसान हो जाता है और उपयोगकर्ता अनुभव भी मुश्किल होता है.

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

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

WebOTP API कैसे काम करता है

WebOTP API काफ़ी आसान है:

…
  const otp = await navigator.credentials.get({
    otp: { transport:['sms'] }
  });
…

एसएमएस को ऑरिजिन के लिए लागू एक बार इस्तेमाल होने वाले कोड के साथ फ़ॉर्मैट किया जाना चाहिए.

Your OTP is: 123456.

@web-otp.glitch.me #12345

ध्यान दें कि आखिरी लाइन में, ऑरिजिन शामिल है और उससे पहले @ और उसके बाद ओटीपी से पहले # लिखा जाना है.

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

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

क्रॉस-ऑरिजिन iframe इस्तेमाल के उदाहरण

क्रॉस-ऑरिजिन iframe में, फ़ॉर्म में ओटीपी डालना पेमेंट से जुड़े मामलों में आम बात होती है. कुछ क्रेडिट कार्ड जारी करने वालों को, पैसे चुकाने वाले की प्रामाणिकता की जांच करने के लिए, पुष्टि करने के एक और चरण की ज़रूरत होती है. इसे 3D सिक्योर कहा जाता है. आम तौर पर, यह फ़ॉर्म उसी पेज पर मौजूद iframe में दिखता है जैसे कि यह पेमेंट फ़्लो का हिस्सा हो.

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

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

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

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

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

आपके पास इस डेमो को खुद आज़माने का विकल्प है. इसके लिए, https://web-otp-iframe-demo.stackblitz.io पर जाएं.

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

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

@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>

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

ध्यान दें

नेस्टिंग लेवल

फ़िलहाल, Chrome सिर्फ़ उन क्रॉस-ऑरिजिन iframe से WebOTP API कॉल के साथ काम करता है जिनके पहले वाले चेन में एक से ज़्यादा यूनीक ऑरिजिन नहीं हैं. इन स्थितियों में:

  • a.com -> b.com
  • a.com -> b.com -> b.com
  • a.com -> a.com -> b.com
  • a.com -> b.com -> c.com

b.com में WebOTP का इस्तेमाल किया जा सकता है, लेकिन c.com में इसका इस्तेमाल नहीं किया जा सकता.

ध्यान दें कि मांग और UX से जुड़ी मुश्किलों की कमी की वजह से, इस स्थिति में भी जानकारी काम नहीं करती.

  • a.com -> b.com -> a.com (WebOTP API को कॉल करता है)

इंटरोऑपरेबिलिटी

Chromium के अलावा दूसरे ब्राउज़र इंजन WebOTP API को लागू नहीं करते हैं. हालांकि, Safari अपनी input[autocomplete="one-time-code"] सहायता के साथ, एक ही एसएमएस फ़ॉर्मैट शेयर करता है. Safari में, जैसे ही कोई ऐसा मैसेज (एसएमएस) मिलता है जिसमें एक बार इस्तेमाल होने वाला कोड फ़ॉर्मैट, मेल खाने वाले ऑरिजिन के साथ आता है, तो कीबोर्ड आपको इनपुट फ़ील्ड में ओटीपी डालने का सुझाव देता है.

अप्रैल 2021 से, Safari % का इस्तेमाल करके एक यूनीक एसएमएस फ़ॉर्मैट वाले iframe के साथ काम करता है. हालांकि, इस खास जानकारी के बारे में बातचीत खत्म होने के बाद, @ के साथ काम किया जाएगा. हमें उम्मीद है कि साथ काम करने वाले एसएमएस फ़ॉर्मैट को लागू किया जाएगा.

सुझाव/राय दें या शिकायत करें

WebOTP API को बेहतर बनाने में, आपकी राय हमारे लिए बहुत अहम है. इसलिए, इसे आज़माएं और हमें बताएं कि इसके बारे में आपको क्या लगा.

रिसॉर्स

Unsplash पर rupixen.com की फ़ोटो