पासपोर्ट + फेसबुक + एक्सप्रेस + निर्माण-प्रतिक्रिया-एप + रिएक्ट-राउटर + प्रॉक्सी

Question

टीएलडीआर के साथ प्रमाणीकरण: मैं अपने प्रतिक्रिया एप्लिकेशन में किसी पृष्ठ से फेसबुक एथ प्रक्रिया कैसे शुरू करूं?

मुझे कुछ पोस्ट मिल गई हैं जो इस पोस्ट के शीर्षक में सूचीबद्ध वस्तुओं में से अधिकांश पर, लेकिन सभी पर स्पर्श नहीं करती हैं। और मैं यह काम करने के करीब हूं, लेकिन मुझे कुछ याद आना चाहिए।

मेरे ऐप में रूटिंग के लिए प्रतिक्रिया-राउटर का उपयोग करके एक क्रिएट-रिएक्ट-ऐप फ्रंट-एंड होता है। मेरे पास यह मेरे विकास पर्यावरण में बंदरगाह 51000 पर चल रहा है। Package.json में, मैं अपने एक्सप्रेस सर्वर पर अन्य मार्गों को रीडायरेक्ट करने के लिए "प्रॉक्सी" का उपयोग कर रहा हूं, पोर्ट 51001 पर चल रहा हूं। यह सर्वर पर हिट करने वाले मेरे रिएक्ट घटकों के भीतर अनुरोध करने के लिए सामान्य रूप से काम करता है। उदाहरण के लिए:

axios.get('/api/some-stuff') 

मेरे रिएक्ट घटक के भीतर कॉल करते समय, यह मेरे एक्सप्रेस सर्वर को सफलतापूर्वक हिट करेगा।

मैं यह सुनिश्चित करना चाहता हूं कि मेरे बैक-एंड रूट प्रमाणीकृत हैं, और मैंने पासपोर्ट-फेसबुक के माध्यम से फेसबुक ऑथ का उपयोग करना चुना है। मैंने इसे कई ऑनलाइन ट्यूटोरियल्स की तरह स्थापित किया है जैसा मैंने देखा है। उदाहरण के लिए, मेरे पास '/ auth/facebook' नामक मेरे एक्सप्रेस सर्वर पर एक मार्ग है। यदि मैं लोकलहोस्ट पर जाता हूं: 51001/auth/facebook, यह मुझे लॉगिन करने के लिए फेसबुक पर रीडायरेक्ट करता है, और उसके बाद मुझे वापस दिए गए मार्ग पर रीडायरेक्ट करता है। तो प्रवाह प्रवाह के रूप में काम करता है।

मुझे जो विशिष्ट समस्या है, वह सफलतापूर्वक आरंभ करने और एपीआई कॉल को पूरा करने के लिए प्रतिक्रिया प्राप्त कर रहा है। मैंने दो दृष्टिकोण की कोशिश की है।

दृष्टिकोण 1: यह सफलतापूर्वक मेरी एक्सप्रेस सर्वर मारता है, लेकिन फिर तत्काल ब्राउज़र में निम्न त्रुटि उत्पन्न

axios.get('/auth/facebook') 

: ajax

के माध्यम से मार्ग कॉलिंग मैं अपने componentDidMount में निम्नलिखित कहा जाता है कंसोल:

XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http% …2Flocalhost%3A51000%2Fauth%2Ffacebook%2Fcallback&client_id=XYZ. Redirect from ' https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http% …2Flocalhost%3A51000%2Fauth%2Ffacebook%2Fcallback&client_id=XYZ’ to ' https://www.facebook.com/login.php?skip_api_login=1&api_key=XYZ …_&display=page&locale=en_US&logger_id=7f30b5a1-2ad1-dc31-f08b-70d3cfdd55fa' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:51000 ' is therefore not allowed access.

** दृष्टिकोण 2: ब्राउज़र में मार्ग के लिए जा रहे **

मैंने जो कुछ भी कोशिश की है, जिसे मैंने सभी ट्यूटोरियल्स में देखा है, वह मेरे पृष्ठों में से एक लिंक जोड़ना है जो प्रमाणीकरण मार्ग पर आसानी से नेविगेट करता है। उदाहरण के लिए:

<a href="/auth/facebook">Login with Facebook</a> 

हालांकि, जब मैं इस पर क्लिक करें, मैंने अभी http://localhost:51000/auth/facebook में खत्म, या मेरे प्रतिक्रिया अनुप्रयोग में सिर्फ एक रिक्त पृष्ठ। मेरे पास प्रॉक्सी नहीं है, और जब मैं ब्राउज़र में इस रूट पर जाता हूं, तो मुझे अपने एक्सप्रेस सर्वर पर कोई गतिविधि नहीं दिखाई देती है, भले ही यह एक रूट नहीं है जिसे मैंने प्रतिक्रिया-राउटर में परिभाषित किया है।

तो मैं यहां थोड़ा फंस गया हूं। उस टैग पर क्लिक करना चाहिए कि मेरे एक्सप्रेस सर्वर के खिलाफ उस मार्ग को निकाल दिया जाए? क्या कुछ मार्गों को अनदेखा करने के लिए प्रतिक्रिया-राउटर को बताने का कोई तरीका है ताकि वे मेरे एक्सप्रेस सर्वर पर रीडायरेक्ट हो जाएं? ऐसा लगता है कि AJAX कॉल करते समय ठीक काम करता है, लेकिन यदि मैं लोकलहोस्ट पर जाता हूं: 51000/नहीं/ए/रूट, यह अनुरोध को एक्सप्रेस पर रीडायरेक्ट नहीं करता है। यह किसी भी सामग्री के साथ एक प्रतिक्रिया पृष्ठ लोड करता है।

किसी भी मदद की सराहना की जाती है।

धन्यवाद,

-Dan

संपादित

तो मैं एक तरह से यह काम कर रहा है, हालांकि मैं आश्वस्त नहीं हूँ यह "सही" जिस तरह से चीजें क्या करना है ।

मेरे में प्रतिक्रिया एप्लिकेशन (जो याद पोर्ट 51000 पर चल रहा है), मैं नीचे दिए गए लिंक है:

<a href="http://localhost:51001/auth/facebook">Facebook Login</a> 

ध्यान दें कि यह मेरी API सर्वर पर सीधे इशारा कर रही है, एक मार्ग प्रतिक्रिया पर नहीं। इस लिंक पर नेविगेट करने से एक्सप्रेस सर्वर हिट हो जाता है, और तुरंत फेसबुक पर रीडायरेक्ट हो जाता है। मेरे एक्सप्रेस फेसबुक कॉलबैक पर रीडायरेक्ट में लॉग इन करना, जो स्वयं http://localhost:51000/somePage पर रीडायरेक्ट करता है, जो अब मेरे प्रतिक्रिया ऐप पर वापस आ गया है।

आदर्श रूप से यह टैग एक अलग यूआरएल/पोर्ट पर जाने के लिए हार्ड-कोड किए जाने के बजाय ए/एपीआई/एथ/फेसबुक पर जा रहा है। मैं इस मुद्दे को अपडेट करूंगा यदि/जब मैं यह समझता हूं कि इसे एक पृष्ठ की तरह व्यवहार करने के बजाय प्रतिक्रिया-राउटर कैसे प्राप्त किया जाए, इसे लोड करने की आवश्यकता है।

संपादित 2

मुझे कोई ऐसा व्यक्ति नहीं तो कह के लिए खुला है, लेकिन मुझे लगता है कि मेरे वर्तमान दृष्टिकोण वास्तव में काफी ठीक है। मैंने सोचा कि उत्पादन में चीजें कैसे व्यवहार करेंगी। मेरे एक्स्प्रेस सर्वर api.example.com के माध्यम से सुलभ होने के साथ, मेरे पास www.example.com पर मेरी प्रतिक्रिया साइट होगी। फेसबुक लॉगिन का मेरा लिंक "api.example.com/auth/facebook" होगा। कॉलबैक, सफल लेख मानते हुए, "www.example.com/some/route" पर रीडायरेक्ट करेगा। मुझे लगता है कि लॉगिन करने के लिए "एपीआई" यूआरएल पर उछाल देना उचित है। आखिरकार कुछ मार्गों को अनदेखा करने के लिए प्रतिक्रिया-राउटर प्राप्त करने का प्रयास करने में कोई बात नहीं है, क्योंकि मेरी सभी एपीआई कॉल एक स्पष्ट मार्ग पर होंगी।

मुझे एहसास है कि मैं दूसरों के लिए एक पूर्ण सहायक समाधान प्रदान नहीं कर रहा हूं। एक बार जब मैं इसे एक साथ रखूं, तो मैं अपने रेपो के लिए एक लिंक शामिल करूंगा जिसमें यह लॉगिन प्रवाह शामिल है, अगर किसी और को यह उपयोगी लगे।

** संपादित करें 3 **

यहां मेरी परियोजना के लिंक हैं। पूरे प्रोजेक्ट को चलाने के लिए यह छोटा नहीं होगा, लेकिन ऑथ फ्लो से जुड़े कुछ हद तक फाइलें हैं।

आप रेपो यहाँ देख सकते हैं: https://github.com/dan-goyette/Portfolio

इस के लिए एक्सप्रेस सर्वर रूटर यहाँ है:

https://github.com/dan-goyette/Portfolio/blob/master/portfolio-server/src/Routing/auth.js

UI में, मैं इस घटक का उपयोग एक्सप्रेस सर्वर से कॉल ट्रिगर कर रहा हूँ :

https://github.com/dan-goyette/Portfolio/blob/75ca9326e6227d0601cdfa4c0cece672bd347302/portfolio-ui/src/Components/SocialMenuButton/SocialMenuButton.js

आप इसेपर काम कर देख सकते हैं, ऊपर दाईं ओर स्थित बटन।

Answer 1

मैं आज भी उसी समस्या में भाग गया और इसे create-react-app की प्रॉक्सी का उपयोग न करके हल किया, लेकिन इसके बजाय मेरे बैकएंड में प्रॉक्सी को create-react-app पर स्थापित किया गया।

मेरी एक्सप्रेस अनुप्रयोग के अंत में, मैं

// all routes above 

if (env.isDevelopment()) { 
    const proxy = require('express-http-proxy') 
    app.use('/*', proxy('http://localhost:3000')) 
} else { 
    // probably serve up build version in production 
} 

है बस अपने ग्राहक के पैकेज json में प्रॉक्सी बंद करना याद रखें, वरना आप एक अनंत प्रॉक्सी पाश के साथ अंत या सकता है कुछ कुछ।

Answer 2

मैं भी इस मुद्दे में चल रहा था - सीआरए प्रॉक्सी config बदलते चाल करने के लिए लग रहा था:

"proxy": { 
    "/api": { 
     "target": "http://localhost:3001/" 
    } 
} 

कहाँ OAuth लिंक /api/auth/foo पर स्थित है, सीआरए एप्लिकेशन localhost:3000 पर है, और एक्सप्रेस अनुप्रयोग है localhost:3001

Answer 3

संपादित करें: मेरे पिछले उत्तर के पास इस मुद्दे से कोई लेना देना नहीं था और इसे हल नहीं किया। मेरे मामले में पूरी चीज CLI उत्पन्न index.js में registerServiceWorker के कारण हुई थी। बस इसे हटा दें और सब कुछ इस तरह काम करता है।

//Remove this lines from index.js 
import registerServiceWorker from './registerServiceWorker' 

registerServiceWorker(); 

Answer 4

आप जोड़ सकते हैं console.developers.google.com पर जाकर अपने द्वारा बनाए गए जाल एपीआई के लिए प्रतिक्रिया एप्लिकेशन स्थानीय होस्ट सर्वर और "अधिकृत जावास्क्रिप्ट मूल" और "अधिकृत करने के लिए बनाने के प्रतिक्रिया एप्लिकेशन के अंतर्गत स्थानीय होस्ट जोड़ने यूआरआई को पुनर्निर्देशित करें "।

Answer 5

मैंने फेसबुक लॉगिन उत्पाद अनुभागों के लिए फेसबुक डेवलपर सेटिंग्स में "वैध ओथ रीडायरेक्ट यूआरआई" फ़ील्ड का उपयोग करके इस समस्या को ठीक किया है, उदाहरण के लिए, http://your-domain.loc:5000/auth/facebook।

और फेसबुक प्रमाणीकरण बटन होना चाहिए:

<a href="http://your-domain.loc:5000/auth/facebook">Login with Facebook</a> 

आप अपने फेसबुक रीडायरेक्ट URL रखना चाहिए। मेरे उदाहरण से एक और बात: मैं अपने ऐप पर एपीआई अनुरोध के लिए स्थानीय नोड सर्वर और 5000 के लिए 3000 पोर्ट का उपयोग करता हूं।

मैं /etc/hosts का उपयोग अपने डोमेन का उपयोग करने के लिए करता हूं, localhost नहीं।

127.0.0.1 your-domain.loc 

मेरे लिए काम करता है। वहाँ कभी एक समाधान यह पाया कि redux-thunk के प्रवाह की अनुमति देता है https://github.com/facebook/create-react-app/issues/3502