मैं असुरक्षित पृष्ठों पर getCurrentPosition (उपयोगकर्ता स्थान) जावास्क्रिप्ट प्रतिबंध के आसपास काम करने में कैसे कामयाब रहा

अप्रैल 2016 या क्रोम संस्करण 50 के बाद से, Google ने असुरक्षित पेजों पर navigator.geolocation.getCurrentPosition सुविधा को अपदस्थ कर दिया, जो कई क्लाइंट को उनकी वेबसाइट पर सुविधाओं पर निर्भर होने के कारण प्रोजेक्ट प्रबंधकों पर क्रोध करने के लिए प्रेरित करते हैं। ध्यान रखें कि यह एक जावास्क्रिप्ट सुविधा है जिसे Google ने अपने उपयोगकर्ताओं की गोपनीयता की सुरक्षा के लिए ब्लॉक करने का निर्णय लिया है।

मेरे विशेष मामले में एक ग्राहक मेरे पास यह पूछने आया था कि क्या मैं निम्नलिखित विशेषताओं के साथ उनके स्टोर लोकेटर में कोई समाधान दे सकता हूं:

  • वर्तमान उपयोगकर्ता स्थान से मानचित्र पर प्रदर्शित होने वाले स्टोर की दूरी दिखाएं
  • वर्तमान उपयोगकर्ता स्थान से मानचित्र पर खोजे गए विशिष्ट स्टोर में दूरी की गणना करें।

क्लाइंट ने मुझे बताया कि अन्य डेवलपर्स ने बस यह कहा कि इसे बाईपास करने का कोई तरीका नहीं है जब तक कि क्लाइंट ने अपनी वेबसाइट के लिए एसएसएल प्रमाणपत्र स्थापित नहीं किया है। मैंने सबसे अच्छे विकल्प के रूप में एक SSL प्रमाणपत्र प्राप्त करने की सिफारिश की थी और यह कि Google SSL के साथ वेबसाइटों को प्राथमिकता दे रहा है, लेकिन ग्राहक अभी भी बेमानी था।

इसलिए एसएसएल सर्टिफिकेट के साथ अंतिम विकल्प उपलब्ध है जिसे मैं वर्तमान उपयोगकर्ता स्थान प्राप्त करने के लिए एक वैकल्पिक रास्ता तलाश रहा था।
मैंने ip-api.com नाम की एक सेवा प्राप्त की है जिसमें एक निशुल्क एपीआई है जिसका उपयोग उपयोगकर्ता जानकारी प्राप्त करने के लिए किया जा सकता है। जब से हम जावास्क्रिप्ट के साथ काम कर रहे हैं मैं json संस्करण से चिपका हूँ: ip-api.com/json

जांचें कि क्या उपयोगकर्ता Google Chrome का उपयोग कर रहा है और वेबसाइट HTTPS का उपयोग नहीं कर रही है
तो इसके लिए शर्तें होनी चाहिए, वेबसाइट https का उपयोग नहीं कर रही है और उपयोगकर्ता Google Chrome पर है

यदि (स्थान.प्रोकोचूल! = 'Https:') {
  अगर (window.chrome) {
    var स्थिति = {
      साथियों: {
        अक्षांश: '',
        देशांतर: ''
      }
    };
  }
}

हालाँकि मुझे पता है कि मेरी ग्राहक वेबसाइट में वर्तमान में https नहीं है, अगर किसी दिन यह है, तो इस समाधान को करने और कोड को बदलने की कोई आवश्यकता नहीं होगी। इसके अलावा, अगर उपयोगकर्ता Google Chrome का उपयोग नहीं कर रहा है, जो इस समय एकमात्र ब्राउज़र है जो इस सुविधा को अवरुद्ध कर रहा है, तो इस वर्कअराउंड का उपयोग करने की आवश्यकता नहीं है।

यदि वेबसाइट HTTP है और HTTPS नहीं है और उपयोगकर्ता Google Chrome पर है, तो मैं navigator.geolocation.getCurrentLocation () का उपयोग करते समय प्राप्त होने वाले ऑब्जेक्ट के समान संरचना के साथ एक ऑब्जेक्ट बनाकर शुरू करता हूं; यह मुझे सफलता और त्रुटि प्रतिक्रियाओं को संभालने के लिए एक ही फ़ंक्शन का उपयोग करने की अनुमति देता है, एक सरल DRY सिद्धांत।

उपयोगकर्ता की जानकारी प्राप्त करने के लिए हमें ip-api.com को क्वेरी करने की आवश्यकता है, हम ऐसा करने के लिए एपीआई के लिए अजाक्स अनुरोध करते हैं। मैं इसके लिए jQuery का उपयोग कर रहा हूं।

$ .getJSON ("http://ip-api.com/json", फ़ंक्शन (डेटा, स्थिति) {
  अगर (स्थिति === "सफलता") {
    //
  }
});

Ip-api.com प्रतिक्रिया में एक अक्षांश और देशांतर शामिल है, लेकिन मैंने पाया कि यह वर्तमान उपयोगकर्ता स्थान को बहुत बड़ी दूरी तक माना जा सकता है, इसलिए मैं उपलब्ध होने पर ज़िप कोड का उपयोग करना पसंद करता हूं।

$ .getJSON ("http://ip-api.com/json", फ़ंक्शन (डेटा, स्थिति) {
  अगर (स्थिति === "सफलता") {
    अगर (data.zip) {}
  }
});

यदि हम ज़िप कोड के साथ जा रहे हैं, तो हमें अभी भी अक्षांश और देशांतर निर्देशांक प्राप्त करने की आवश्यकता है। चूंकि हम Google मानचित्र का उपयोग कर रहे हैं, इसलिए मैं ज़िप कोड को क्वेरी करने और जीपीएस निर्देशांक प्राप्त करने के लिए Google मैप्स जियोकोड एपीआई का उपयोग करता हूं।

$ .getJSON ("http://maps.googleapis.com/maps/api/geocode/json?address=" + res.zip, function (data, status) {
  अगर (स्थिति === "सफलता") {
    position.coords.latitude = data.results [0] .geometry.location.lat;
    position.coords.longitude = data.results [0] .geometry.location.lng;
    locationOnSuccess (स्थिति);
  } अन्य {
    locationOnError ();
  }
});

जब हमें Google जियोकोड एपीआई से सफलता की प्रतिक्रिया मिलती है, तो हम अक्षांश और देशांतर निर्देशांक को अपनी वस्तु में निर्दिष्ट कर सकते हैं और इसे हमारे सफलता समारोह में पास कर सकते हैं। अन्यथा, जब हमें कोई त्रुटि मिलती है, तो हम अपने त्रुटि हैंडलर फ़ंक्शन को कॉल करते हैं।

सफलता और त्रुटि कार्य केवल दो हैंडलर हैं जो मैं विशिष्ट कार्यों को करने के लिए बनाता हूं। मुझे इसमें शामिल नहीं होना चाहिए क्योंकि वे इस लेख में कुछ भी नहीं जोड़ते हैं।

इसे ध्यान में रखते हुए हमें अभी भी तीन अन्य संभावित परिदृश्यों को संभालने की आवश्यकता है:

  1. Ip-api.com प्रतिक्रिया ने ज़िप कोड प्राप्त नहीं किया
  2. Ip-api.com अनुरोध ने एक त्रुटि लौटा दी
  3. उपयोगकर्ता ब्राउज़र navigator.geolocation.getCurrentPosition () का उपयोग कर सकता है

यहाँ अंतिम कोड है:

यदि (स्थान.प्रोकोचूल! = 'Https:') {
  अगर (window.chrome) {
    var स्थिति = {
      साथियों: {
        अक्षांश: '',
        देशांतर: ''
      }
    };
$ .getJSON ("http://ip-api.com/json", फ़ंक्शन (डेटा, स्थिति) {
        अगर (स्थिति === "सफलता") {
            अगर (डेटा) {
                $ .getJSON ("http://maps.googleapis.com/maps/api/geocode/json?address=" + res.zip, function (data, status) {
                    अगर (स्थिति === "सफलता") {
                        position.coords.latitude = data.results [0] .geometry.location.lat;
                        position.coords.longitude = data.results [0] .geometry.location.lng;
                        locationOnSuccess (स्थिति);
                    } अन्य {
                        locationOnError ();
                    }
                });
            } अन्य {
                अगर (data.zip && data.lat && data.lon) {
                // अगर ज़िप कोड नहीं है, लेकिन हमारे पास एक अक्षांश और देशांतर है, तो हम उनका उपयोग करते हैं
                position.coords.latitude = data.lat;
                position.coords.longitude = data.lon;
                locationOnSuccess (स्थिति);
                } अन्य {
                    // अगर कोई त्रुटि है
                    locationOnError ();
                }
            }
        } अन्य {
            locationOnError ();
        }
    });
  } अन्य {
      navigator.geolocation.getCurrentPosition (स्थान खोजें, असफल, स्थानऑनलाइन, भू-चयन);
  }
} अन्य {
      navigator.geolocation.getCurrentPosition (स्थान खोजें, असफल, स्थानऑनलाइन, भू-चयन);
  }

यह एक त्वरित और सरल वर्कअराउंड है जिसे मैंने कम से कम समय में एक सामान्य मुद्दे को हल करने की कोशिश करते हुए पाया। यदि आपके पास कोई विकल्प है तो मैं इसके बारे में सुनना पसंद करूंगा।