WebView कब उपयोग करें
WebView इंटीग्रेशन का उपयोग केवल तब करें जब:- आप ऐसे प्लेटफ़ॉर्म पर बना रहे हैं जिसके लिए कोई नेटिव SDK नहीं है (जैसे Xamarin, Cordova, या अन्य विशेष फ़्रेमवर्क)
- नेटिव SDK इंटीग्रेट करने से पहले आपको त्वरित प्रोटोटाइप या प्रूफ़ ऑफ़ कॉन्सेप्ट चाहिए
- आप वेब से माइग्रेट कर रहे हैं और नेटिव इंटीग्रेशन तक एक अस्थायी पुल चाहते हैं
यह कैसे काम करता है
1
सत्र बनाएँ
आपका बैकएंड Create Session API को कॉल करता है और एक होस्टेड
url प्राप्त करता है।2
WebView में खोलें
आपका ऐप
url को WebView कॉम्पोनेंट में लोड करता है।3
यूज़र सत्यापन पूरा करता है
यूज़र WebView के अंदर सत्यापन फ़्लो से गुज़रता है।
4
कॉलबैक इंटरसेप्ट करें
पूरा होने पर WebView आपके कॉलबैक URL पर नेविगेट करता है। आपका ऐप इस नेविगेशन को इंटरसेप्ट करता है और परिणाम निकालता है।
5
webhook के ज़रिए पूरे परिणाम प्राप्त करें
आपका बैकएंड webhook के ज़रिए पूरा निर्णय डेटा प्राप्त करता है।
सत्र बनाना
सत्यापन फ़्लो खोलने से पहले, अपने बैकएंड से एक सत्र बनाएँ:201। url में 12 अक्षरों का session_token एम्बेड होता है, session_id नहीं):
url फ़ील्ड लोड करें। session_token से इसे हाथ से कभी न बनाएँ।
React Native
WebView पैकेज इंस्टॉल करें:इम्प्लीमेंटेशन
React Native डेमो
Expo + WebView सत्यापन उदाहरण
Flutter
pubspec.yaml में आवश्यक पैकेज जोड़ें:
इम्प्लीमेंटेशन
Flutter डेमो
Flutter WebView सत्यापन उदाहरण
महत्वपूर्ण कॉन्फ़िगरेशन
यूज़र एजेंट (आवश्यक)
WebView के सही तरह काम करने के लिए आपको एक सामान्य मोबाइल यूज़र एजेंट अवश्य सेट करना होगा:मीडिया सेटिंग्स (आवश्यक)
कॉलबैक संभालना
सत्यापन के बाद WebView क्वेरी पैरामीटर के साथ आपके कॉलबैक URL पर रीडायरेक्ट करता है:समस्या निवारण
कैमरा काम नहीं कर रहा
कैमरा काम नहीं कर रहा
- सुनिश्चित करें कि
mediaPlaybackRequiresUserGesturefalseहै - पुष्टि करें कि OS स्तर पर कैमरा की अनुमति दी गई है
- जाँचें कि यूज़र एजेंट स्ट्रिंग सही तरह सेट है
सफ़ेद स्क्रीन या लोडिंग की समस्या
सफ़ेद स्क्रीन या लोडिंग की समस्या
- पुष्टि करें कि सत्र URL वैध है और समाप्त नहीं हुआ है
- इंटरनेट कनेक्टिविटी जाँचें
- सुनिश्चित करें कि WebView सेटिंग्स में JavaScript सक्षम है
कॉलबैक ट्रिगर नहीं हो रहा
कॉलबैक ट्रिगर नहीं हो रहा
- पुष्टि करें कि आपका कॉलबैक URL वही है जो सत्र बनाते समय सेट किया था
- जाँचें कि navigation delegate/listener सही तरह कॉन्फ़िगर है
- सत्र बनाते समय
callback_methodको"both"पर सेट करके देखें