How to integrate the new Login with OTP widget.

MSG91 ने OTP लॉगिन के लिए एक नया विजेट पेश किया है जिसे ग्राहक अपने अंत पर एकीकृत कर सकते हैं और MSG91 द्वारा सभी भेजने, दोबारा भेजने और सत्यापन OTP APIs को एक स्थान पर कॉल किया जा सकता है।

इसे एकीकृत करने के लिए, नीचे के चरणों का पालन करें -

1. अपने MSG91 पैनल में लॉग इन करें और OTP अनुभाग का चयन करें।

2. यह एकमात्र विजेट है जहां आप चैनल देख सकते हैं जिन्हें आपने उपयोग किया है और उनकी स्थिति को सक्षम या अक्षम कर सकते हैं। बस अपनी खुद की बनाने के लिए Create New Widget पर क्लिक करें।

3. अपने विजेट को एक नाम दें।

जिस प्रकार की सत्यापन विधि का चयन करें जिसे आप अपनाना चाहते हैं (OTP का उपयोग करके लॉगिन या जादुई लिंक)

यदि आप जादुई लिंक का चयन कर रहे हैं तो इस लिंक का संदर्भ लें यह लिंक अन्यथा नीचे साझा किए गए लेख को संदर्भित करते रहें

संपर्क बिंदु (मोबाइल नंबर, ईमेल, या दोनों) चुनें। फिर, प्राथमिक चैनल चुनें। मोबाइल नंबर को संपर्क बिंदु के रूप में रखने पर हमारे पास 3 चैनल उपलब्ध हैं, यानी SMS, व्हाट्सएप, या वॉयस और ईमेल के लिए केवल एक चैनल है, यानी OTP भेजने के लिए ईमेल। अंत में, OTP की लंबाई का चयन करें।

OTP फिर से भेजने के लिए, मोबाइल नंबर के तहत आपके पास SMS, WhatsApp, और Voice चैनलों के विकल्प हैं। हालाँकि ईमेल के तहत, यह एकमात्र उपलब्ध चैनल है।

आप पुनः भेजने की गिनती, सेकंड में पुनः भेजने का समय और मिनटों में OTP की समाप्ति का समय सेट कर सकते हैं।(न्यूनतम आवश्यक 15 मिनट)

यदि आपने \"मोबाइल नंबर\" को एक संपर्क बिंदु के रूप में चुना है तो आप Advanced settings टैब के तहत देशवार प्राथमिक चैनल का चयन कर सकते हैं (एकाधिक चयन की अनुमति है)। यह सुविधा अलग-अलग देशों को विभिन्न चैनलों के माध्यम से OTP भेजने के लिए उपयोग की जाती है।

उदाहरण के लिए - यदि आप किसी देश को OTP भेजना चाहते हैं जहाँ व्हाट्सएप के माध्यम से भेजना SMS से सस्ता है तो आप Advanced setting टैब के तहत उस विशेष देश के लिए व्हाट्सएप को प्राथमिक चैनल के रूप में चुन सकते हैं।

नया SMS प्रवाह बनाने के लिए, इस गाइड. टेम्पलेट बनाने के लिए, इस गाइड. (आपको ईमेल सेवाओं को सब्सक्राइब करना होगा और ईमेल सेवाओं का उपयोग करने के लिए अपने डोमेन को पंजीकृत करना होगा या आप उन्हें अपने जीमेल या आउटलुक खाते के माध्यम से भेजने के लिए कनेक्शन विकल्प का उपयोग कर सकते हैं।)

एक नया WhatsApp टेम्पलेट बनाने के लिए, इस गाइड. (आपको актив WhatsApp व्यावसायिक नंबर या एक नए नंबर द्वारा WhatsApp सेवाओं के लिए सब्सक्राइब करना होगा और व्हाट्सएप सेवाओं का उपयोग करने के लिए अपने वॉलेट में बैलेंस होना चाहिए)

एक नया वॉयस टेम्पलेट बनाने के लिए, इस गाइड. (आपको वॉयस सेवाओं के लिए सब्सक्राइब करना होगा और अपनी वॉयस सेवाओं का उपयोग करने के लिए अपने खाते में वॉयस बैलेंस होना चाहिए)

4. अदृश्य OTP (केवल मोबाइल एप्लिकेशन के लिए लागू):  हमने \"अदृश्य OTP\" नामक एक नई सुरक्षा सुविधा पेश की है, जो फोन नंबर सत्यापन के दौरान सुरक्षा बढ़ाती है, जो उपयोगकर्ता को दृश्य रूप से प्रदर्शित किए बिना OTP भेजकर और उसी का सत्यापन करती है। यदि अदृश्य OTP विफल हो जाता है, तो यह पुष्टि के लिए स्वचालित रूप से मोबाइल प्राथमिक चैनल का उपयोग करने के लिए वापस जाता है। यह दृष्टिकोण उपयोगकर्ता इंटरफ़ेस को सीधे OTP उजागर किए बिना सत्यापन प्रक्रिया को सरल और सुरक्षित बनाता है। इस विशेषता को काम करने के लिए सुनिश्चित करें कि मोबाइल एकीकरण चालू है। 

ध्यान दें: अदृश्य OTP के माध्यम से सफलतापूर्वक सत्यापन होने के बाद यह सीधे सर्वर साइड मान्यता के लिए बैकएंड पर एक JWT टोकन उत्पन्न करेगा। जिसे MSG91 को उपयोगकर्ता की जांच के लिए प्रदान किया जाएगा। 

5. मोबाइल एकीकरण: यह सुविधा सक्षम करने से आपको मोबाइल में विजेट एकीकृत करने की अनुमति मिलती है, आपको हमारे npm पैकेज का उपयोग करना चाहिए। कृपया ध्यान दें कि यदि आप इस सुविधा का उपयोग कर रहे हैं तो यह विजेट केवल मोबाइल प्लेटफ़ॉर्म के लिए काम करेगा और वेब पर काम नहीं करेगा। डिफ़ॉल्ट रूप से, मोबाइल एकीकरण बंद है

6. कैप्चा मान्यता : हमने अपने OTP विजेट में ऐसी सुविधाएं जोड़ी हैं जो उपयोगकर्ताओं को गूगल रीकैप्चा मान्यता को सक्षम और अनुपयोगी करने की अनुमति देती हैं। यह विकल्प OTP विजेट की सेटिंग में उपलब्ध होगा, और यह आपको अधिक नियंत्रण देने के लिए डिज़ाइन किया गया है।
डिफ़ॉल्ट रूप से, रीकैप्चा मान्यता चालू है, जो आपके विजेट को बॉट हमलों से सुरक्षित रखने के लिए बढ़िया है। बॉट आपकी प्रणाली को नकली या स्वचालित अनुरोधों से बाढ़ करने की समस्या पैदा कर सकते हैं, इसलिए रीकैप्चा एक सुरक्षा गार्ड के समान है, यह सुनिश्चित करता है कि असली लोग आपके विजेट का उपयोग कर रहे हैं।
हालांकि, एक विशेष स्थिति पर विचार करना है। यदि आप अपने डेस्कटॉप या मोबाइल एप्लिकेशन में हमारे OTP विजेट का उपयोग कर रहे हैं, जैसे कि एक इलेक्ट्रॉन ऐप, तो रीकैप्चा सही तरीके से काम नहीं कर सकता है क्योंकि यह वेबसाइटों के लिए है, डेस्कटॉप या मोबाइल ऐप के लिए नहीं।
इसलिए, हम आपके लिए यह विकल्प adding कर रहे हैं। रीकैप्चा मान्यता को निर्बंधित करके, आप बिना किसी रुकावट के अपने डेस्कटॉप या मोबाइल ऐप में OTP विजेट का उपयोग कर सकते हैं।

7. iFrame : इस सुविधा को सक्षम करने से आपको iFrame विंडो में विजेट का उपयोग करने की अनुमति मिलती है। डिफॉल्ट रूप से, iFrame बंद है

8. अब \"Next\" पर क्लिक करें। फिर, आप चयनित चैनल के लिए टेम्पलेट जोड़ेंगे। ड्रॉपडाउन मेन्यू से टेम्पलेट चुनें, और वेरिएबल को मानचित्रित करें। 

MSG91 द्वारा आपको डिफ़ॉल्ट SMS टेम्पलेट प्रदान किया जा रहा है जब तक आपका टेम्पलेट DLT पर स्वीकृत नहीं हो जाता।

एक बार जब आप कर लें, तो आप टेम्पलेट पूर्वावलोकन बटन पर क्लिक कर सकते हैं और आप देखेंगे कि यूजर को भेजे जाने वाले SMS या ईमेल का पूर्वावलोकन।

9. वॉयस के लिए, आपके पास दो विकल्प हैं : वैश्विक कॉलर आईडी (देश के अनुसार डिफ़ॉल्ट कॉलर आईडी) और स्थानीय कॉलर आईडी (इसके लिए आपको पहले ड्रॉपडाउन से एक कॉलर आईडी का चयन करना होगा जैसा नीचे दिखाया गया है और यह चयनित नंबर प्रदर्शित करेगा)। 

10. अब आप ड्रॉपडाउन से टेम्पलेट चुन सकते हैं या आप एक नया टेम्पलेट बना सकते हैं, जो वॉयस का पूर्वावलोकन शामिल करता है। चैनल को कॉन्फ़िगर करने के बाद, \"Save & Next.\" पर क्लिक करें।

11. देशवार प्रतिबंध :- देशवार प्रतिबंध में तीन विकल्प हैं 1. सभी को अनुमति दें (जो सभी देशों को OTP भेजने की अनुमति देगा) 2. विशिष्ट को अनुमति दें (यह आपको कुछ विशिष्ट देशों को OTP भेजने की अनुमति देगा।) 3. विशिष्ट को अस्वीकृत करें (यह अनुमति देने की विशेषता के विपरीत काम करेगा, आप निर्दिष्ट देश को OTP भेजने से रोक सकते हैं।) क्लिक करें “Save & Next”

12. डेमो क्रेडेंशियल्स: ये फिक्स्ड क्रेडेंशियल्स हैं (नाम, मोबाइल नंबर, ईमेल और OTP) जो ऐप परीक्षण और समीक्षा में मदद कर सकते हैं। यह बिना OTP के भेजे जाने की अनुमति देता है क्योंकि डेमो नंबर/ईमेल पर कोई OTP नहीं भेजा जाएगा, बल्कि कॉन्फ़िगर किया गया OTP सत्यापन के लिए उपयोग किया जा सकता है।

उदाहरण के लिए: Apple को OTP के साथ लॉग इन करने वाले ऐप्स की समीक्षा के लिए यूज़रनेम और पासवर्ड की आवश्यकता होती है।

यदि आप डेमो क्रेडेंशियल जोड़ना नहीं चाहते हैं तो आप Skip बटन पर क्लिक करके इस चरण को छोड़ सकते हैं।

13. उपयोगकर्ता अस्तित्व मान्यता वह प्रक्रिया है जिसमें यह सत्यापित किया जाता है कि क्या उपयोगकर्ता रिकॉर्ड प्रणाली डेटाबेस में मौजूद है इससे पहले कि OTP भेजा जाए।
आपको कॉन्फ़िगर की गई API को जोड़ना होगा। विजेट कॉन्फ़िगर की गई उपयोगकर्ता अस्तित्व API को कॉल करता है, यदि उपयोगकर्ता मौजूद है :- OTP भेजने की प्रक्रिया जारी रखें।

उपयोगकर्ता मौजूद नहीं है a. OTP न भेजें। b. उपयोगकर्ता को एक कॉन्फ़िगर करने योग्य कस्टम त्रुटि संदेश दिखाएं।

14. क्लाइंट साइड एकीकरण: हम तीन तरीके प्रदान करते हैं जिससे आप OTP विजेट को अपने क्लाइंट इंटरफ़ेस (अंत उपयोगकर्ता पक्ष) में एकीकृत कर सकते हैं।

• वेब SDK डिफ़ॉल्ट UI के लिए

• वेब SDK कस्टम UI के लिए

• मोबाइल SDK कस्टम UI के लिए 
  

  

अपने खाते के ऑथ टोकन को स्क्रिप्ट में डालें और जब चाहें तब सेवा को एकीकृत करने के लिए इसका उपयोग करें। इसे प्राप्त करने के लिए, ड्रॉपडाउन मेनू में \"Select token\" पर क्लिक करें। यदि कोई टोकन उत्पन्न नहीं हुआ है, तो आप \"Token\" अनुभाग में नया बना सकते हैं, बाएं साइडबार में क्लिक करके Create New Token. कृपया ध्यान दें कि यह टोकन विशेष रूप से OTP विजेट फीचर के लिए उत्पन्न किया गया है इसलिए यह एक अधिक सुरक्षित और विश्वसनीय प्रमाणीकरण का तरीका है क्योंकि यह हमारे खाते के ऑथ कीज को जनसामान्य से प्राप्त होने से रोकता है। 

नोट- टोकन के बारे में अधिक जानने के लिए, कृपया संदर्भ लें: https://msg91.com/help/MSG91/what-is-token-and-how-to-use-it

स्क्रिप्ट के सफलता और विफलता पैरामीटर्स में, प्रत्येक उपयोगकर्ता के लिए अद्वितीय एक्सेस टोकन को प्रदर्शित करने के लिए स्थान दर्ज करें।

एक बार जब उपयोगकर्ता OTP दर्ज करता है और सत्यापित करने के लिए क्लिक करता है, तो यह एक एक्सेस टोकन उत्पन्न करता है जिसे आपको अपने सर्वर पर भेजना होगा।

15. इस एक्सेस टोकन को API के माध्यम से MSG91 को भेजने की आवश्यकता होती है जो सर्वर-साइड एकीकरण अनुभाग में प्रदर्शित होती है। ऑथ की चयन करें (यदि पहले से उत्पन्न किया गया है) या अपने खाते के लिए ऑथ की प्राप्त करने के लिए, सर्वर-साइड एकीकरण के तहत \"Get Authkey\" लिंक पर क्लिक करें।

16. लॉग्स : लॉग्स की जांच करने के लिए , बाएँ मेनू के तहत OTPWidget/SDK हेडर के नीचे उपलब्ध Logs अनुभाग पर जाएँ। आप स्क्रीन के ऊपर दाहिनी ओर उपलब्ध विकल्प से दिनांक सीमा चुन सकते हैं और लागू करें पर क्लिक कर सकते हैं। 

इसके अलावा एक फ़िल्टर विकल्प उपलब्ध है ताकि हम इच्छित लॉग के अनुसार अलग-अलग फ़िल्टर बना सकें। फ़िल्टर के अंतर्गत हमारे पास चुनने के लिए अलग-अलग विकल्प हैं।

• चैनल : यहाँ हम सभी का चयन कर सकते हैं या हमारे पास कई चैनलों का चयन करने का विकल्प है। 

• OTP विजेट का चयन करें : यहाँ भी हम उपलब्ध विभिन्न OTP विजेट से चयन कर सकते हैं।

• पुनः भेजने की गिनती : इसके तहत हम विभिन्न शर्तों से चयन कर सकते हैं जैसे पुनः भेजने की गिनती के मान से अधिक/कम/बराबर है, जो हमारे द्वारा परिभाषित है   

• OTP सत्यापन स्थिति : यह डेटा को उपयोगकर्ता द्वारा OTP दर्ज करने के बाद सत्यापन करते ही क्रमबद्ध करेगा। यहाँ स्थिति का चयन किया जा सकता है या तो सत्यापित या असत्यापित या हम इसे दोनों के रूप में चयनित कर सकते हैं (डिफ़ॉल्ट चयन)

• एक्सेस टोकन सत्यापन स्थिति : यह डेटा को उपयोगकर्ता के अंत में OTP सत्यापन के बाद एक्सेस टोकन के माध्यम से किए गए सत्यापन के आधार पर क्रमबद्ध करेगा। यहाँ स्थिति का चयन किया जा सकता है या तो सत्यापित या असत्यापित या हम इसे दोनों के रूप में चयनित कर सकते हैं (डिफ़ॉल्ट चयन)

हम लॉग के तहत उपयोगकर्ता का IP और होस्ट भी देख सकते हैं। यह उस डेटा को अलग करने में सहायक है जिस IP या होस्ट से अनुरोध प्राप्त किया जा रहा है। 

लॉग्स निर्यात करें : यह विकल्प बाईं ओर के कोने में उपलब्ध है। यहाँ हम दिनांक सीमा और क्षेत्रों (हैडर जिसमें हम लॉग फ़ाइल में निर्यात करना चाहते हैं) का चयन कर सकते हैं और फिर निर्यात पर क्लिक करें।

निर्यात पर क्लिक करने के बाद, हमें लॉग फ़ाइल उत्पन्न करने के लिए कुछ सेकंड का इंतजार करना होगा और फिर हम नियंत्रण मेनू के तहत उपलब्ध डाउनलोड अनुभाग से लॉग फ़ाइल को डाउनलोड कर सकते हैं। डाउनलोड प्रकार चुनें पर क्लिक करें और ड्रॉपडाउन से लॉग का चयन करें और फिर डाउनलोड बटन पर क्लिक करें। 

विश्लेषण : विश्लेषण उत्पन्न करने के लिए, बाएँ मेनू के तहत OTPWidget/SDK हेडर के तहत उपलब्ध Analytics सेक्शन पर जाएं। आप स्क्रीन के ऊपर बाएँ कोने से उपलब्ध विकल्प से दिनांक सीमा को चुन सकते हैं और लागू करें पर क्लिक कर सकते हैं। यहाँ आप डेटा देखेंगे जिसे OTP डिलीवरी/OTP सत्यापन/चैनल-वार डिलीवरी के रूप में समूहित किया गया है।

रिपोर्ट निर्यात करें: यह विकल्प शीर्ष दाएँ कोने में उपलब्ध है। यहाँ हम उस तिथि सीमा का चयन कर सकते हैं जिसकी रिपोर्ट हम निर्यात करना चाहते हैं और उस ईमेल पते को दर्ज करें जिस पर विश्लेषण रिपोर्ट भेजी जाएगी। उसके बाद निर्यात पर क्लिक करें।

OTP विजेट में वेब SDK कस्टम UI कैसे कॉन्फ़िगर करें? 

नीचे दिए गए तरीके, SendOTP, VerifyOTP और RetryOTP, प्रमाणीकरण उद्देश्यों के लिए प्रदान किए जाते हैं। ये तरीके आपके कस्टम उपयोगकर्ता इंटरफ़ेस के भीतर OTP सत्यापन के सहज एकीकरण को सुविधाजनक बनाते हैं।

1. ExposeMethods:  सत्यापन पॉपअप को UI पर नहीं दिखाने के लिए कॉन्फ़िग ऑब्जेक्ट के भीतर exposeMethods को true में सेट करें। इस ध्वज को true में सेट करने पर sendOtp, retryOtp, verifyOtp विंडो वस्तुओं पर दिखाई देंगे।

<body>
<script type=\"text/javascript\">
  var configuration = {
    widgetId: \"Enter_widget_id_here\",
    tokenAuth: \"{token}\",
    identifier: \"<enter mobile number/email here> (optional)\",
    exposeMethods: true,
    captchaRenderId: '', // id(must be unique) of html element where to render captcha, only works if there is exposedMethod is true,.
    success: (data) => {
        // get verified token in response
        console.log('success response', data);
    },
    failure: (error) => {
        // handle error
        console.log('failure reason', error);
    },
};
</script>
 <script type=\"text/javascript\" onload=\"initSendOTP(configuration)\" src=\"https://verify.msg91.com/otp-provider.js\"></script>
</body>

आप उसी तरह गतिशील वेरिएबल मानों को पारित कर सकते हैं जैसे वेब SDK विकल्प में डिफ़ॉल्ट UI के लिए सुझाव दिया गया है।

2. SendOTP: यह विधि एक identifier (अनिवार्य तर्क) और सफलता और विफलता परिदृश्यों को संभालने के लिए दो वैकल्पिक कॉलबैक लेती है। यह विधि भेजे गए पहचानकर्ता पर OTP को भेजती है। पहचानकर्ता या तो एक ईमेल या मोबाइल नंबर हो सकता है (यह बिना + के देश कोड को शामिल करना चाहिए)। यदि API सफल होती है, तो भेजा गया सफल कॉलबैक सफलता के बारे में सूचित करने के लिए कॉल किया जाएगा। विफलता के परिदृश्य के लिए भी यही।

window.sendOtp(
  '[email protected]', // mandatory
  (data) => console.log('OTP sent successfully.'), // optional
  (error) => console.log('Error occurred') // optional
);

// उदाहरण: मोबाइल नंबर के रूप में पहचानकर्ता

window.sendOtp(
  '919999999999', // mandatory
  (data) => console.log('OTP sent successfully.'),
  (error) => console.log('Error occurred')
);

3. RetryOTP : यह विधि OTP को पुनः भेजने के लिए उपयोग की जाती है यदि कोई कारण हो जिसके कारण OTP प्राप्त नहीं हुआ है। यह विधि चैनल मान को एक अनिवार्य तर्क और सफलता एवं विफलता परिदृश्यों को संभालने के लिए दो वैकल्पिक कॉलबैक लेती है। 

यदि विजेट डिफ़ॉल्ट कॉन्फ़िगरेशन के साथ कॉन्फ़िगर है, तो चैनल को null के रूप में पारित करने की आवश्यकता है। अनुकूल कंफिगरेशन के लिए, चैनल के लिए निम्नलिखित मानों का उपयोग किया जा सकता है:

• SMS: '11'

• वॉयस: '4'

• ईमेल: '3'

• व्हाट्सएप: '12'

चैनल मान निर्धारित करता है कि OTP को पुनः भेजने के लिए कौन सा संचार चैनल उपयोग किया जाएगा। उदाहरण के लिए:

window.retryOtp(
  null, // चैनल मान अनिवार्य
  (data) => console.log('resend data: ', data), // optional
  (error) => console.log(error), // optional
  '336870744532313134323444' // optional
);

// अनुकूल कॉन्फ़िगरेशन
window.retryOtp(
  '11', // चैनल मान अनिवार्य
  (data) => console.log('resend data: ', data), // optional
  (error) => console.log(error), // optional
  '336870744532313134323444' // optional
);

4. VerifyOTP : यह विधि उपयोगकर्ता द्वारा दर्ज किए गए OTP को सत्यापित करने के लिए उपयोग की जाती है। यह विधि OTP मान को अनिवार्य तर्क के रूप में और सफलता और विफलता परिदृश्यों को संभालने के लिए दो वैकल्पिक कॉलबैक के रूप में लेती है।

// उदाहरण

window.verifyOtp(
  123456, // OTP मान
  (data) => console.log('OTP verified: ', data), // optional
  (error) => console.log(error), // optional
  '336870744532313134323444' // optional
);

नोट: यदि आप सुन रहे हैं verifyOtp विधि की सफलता और विफलता कॉलबैक तो आप कॉन्फ़िग ऑब्जेक्ट में प्रदान की गई मुख्य सफलता और विफलता कॉलबैक को छोड़ सकते हैं। अन्यथा, आपको सफलता और विफलता की 2 घटनाएँ प्राप्त होंगी।

var configuration = {
    exposeMethods: true,
    success: (data) => {
      // आप इसे सुनने की अनदेखी कर सकते हैं यदि verifyOtp विधि का सफल परिणाम सुना गया है
      console.log('success response', data);
    },
    failure: (error) => {
      // आप इसे सुनने की अनदेखी कर सकते हैं यदि verifyOtp विधि का विफलता परिणाम सुना गया है
      console.log('failure reason', error);
    },
  };

5. GetWidgetData : एक और विधि जो विंडो ऑब्जेक्ट पर प्रोमोटेड है वह getWidgetData है, जो API से प्राप्त वर्तमान कॉन्फ़िगर किए गए विजेट डेटा को लौटाती है।

var widgetData = window.getWidgetData();
console.log('Widget Data:', widgetData);

6.isCaptchaVerified :विंडो पर प्रोमोटेड एक और विधि isCaptchaVerified, है, जो बूलियन मान लौटाती है true/false .

var isCaptchaVerified = window.isCaptchaVerified();
console.log('Captcha is verified or not', isCaptchaVerified);

OTP विजेट में कस्टम यूआई के लिए मोबाइल SDK कैसे कॉन्फ़िगर करें? 

मोबाइल SDK विभिन्न प्रोग्रामिंग भाषाओं में उपलब्ध है और कॉन्फ़िगरेशन स्वयं MSG91 खाते में उपलब्ध है।

1. React native

2. Flutter

3. Kotlin

4. स्विफ्ट (आगामी)

5. जेनकिंस (आगामी)

React Native कॉन्फ़िगरेशन 

चरण 1: नीचे दिए गए आदेश का उपयोग करके अपने प्रोजेक्ट में पैकेज स्थापित करें।

npm install @msg91comm/sendotp-react-native

चरण 2: पैकेज की सफल स्थापना के बाद, आप अपने प्रोजेक्ट में OTPVerification आयात कर सकते हैं। उदाहरण के लिए

import React, { useEffect } from 'react';
import { OTPWidget } from '@msg91comm/sendotp-react-native';

चरण 3: अंततः OTP सत्यापन को नीचे दिए गए कोड का उपयोग करके एकीकृत करें।

const widgetId = 3568656c6d31353031373135;
const tokenAuth = {authToken};

const App = () => {
    useEffect(() => {
        OTPWidget.initializeWidget(widgetId, tokenAuth); //विजेट प्रारंभिककरण
    }, [])

    const [number, setNumber] = useState('');

    const handleSendOtp = async () => {
        const data = {
            identifier: '91758XXXXXXX'
        }
        const response = await OTPWidget.sendOTP(data);
        console.log(response);  
    }

    return (
        <View>
            <TextInput
                placeholder='Number'
                value={number}
                keyboardType='numeric'
                style={{ backgroundColor: '#ededed', margin: 10 }}
                onChangeText={(text) => {
                    setNumber(text)
                }}
            />
            <TouchableOpacity
                style={styles.button}
                onPress={()=>{
                    handleSendOtp()
                }}
            >
                <Text>
                    OTP भेजें
                </Text>
            </TouchableOpacity>
        </View>
    );
}
    
export default App;

किसी भी आगे मदद के लिए हमसे संपर्क करें [email protected].