2017-05-12 22 views
8

पर चुप नवीकरण प्रविष्टि बिंदु जोड़ना मेरे पास create-react-app मॉड्यूल का उपयोग करके एक रिएक्ट एप्लिकेशन बनाया गया है। मुझे हाल ही में क्लाइंट द्वारा ओआईडीसी के साथ एकीकृत करने के लिए कहा गया है। इस उद्देश्य के लिए मैं redux-oidc का उपयोग कर रहा हूं, क्योंकि मेरे पास पहले से ही मेरे ऐप में भी रेडक्स काम कर रहा है।रिएक्ट (क्रिएट-रिएक्ट-एप)

हम अपने आवेदन को उनके पहचान सर्वर में एकीकृत करने में कामयाब रहे और मैं साइन इन करने और उपयोगकर्ता टोकन को Redux में संग्रहीत करने में सक्षम हूं। समस्या यह है कि मैं अपने निर्माण-प्रतिक्रिया-ऐप एप्लिकेशन में silent renew सेट अप करने के लिए संघर्ष कर रहा हूं क्योंकि मुझे अतिरिक्त प्रविष्टि बिंदु जोड़ना है। क्या 0 -पर कोई अतिरिक्त प्रविष्टि बिंदु जोड़ने के लिए कोई तरीका है जिससे Create-react-app को बाहर निकाला जा सके?

वर्तमान में मैंने एक फ़ोल्डर बनाया है जिसे silent_renew नाम दिया गया है जिसमें index.js फ़ाइल है। इस फ़ोल्डर में silent_renew.html फ़ाइल भी शामिल है जिसमें बहुत कुछ नहीं है (देखें: example app मेरी फ़ोल्डर संरचना के समान)।

+1

'create-react-app' का उद्देश्य शून्य-कॉन्फ़िगरेशन ऐप्स को सरल तरीका प्रदान करना है। दुकान के साथ 'loadUser' प्लग करना ठीक रहेगा, लेकिन मुझे वेबपैक कॉन्फ़िगरेशन को बदलने से डर है और यह प्रविष्टि बिंदु यह बताएगा कि सीआरए क्या है और उसे निकालने की आवश्यकता होगी। संभवतः वह उत्तर नहीं जिसे आप ढूंढ रहे हैं, इसे एक टिप्पणी के रूप में छोड़कर मुझे बताएं कि क्या यह एक हो सकता है। –

+0

धन्यवाद @ एपेरकू। हाँ यह मेरी धारणा की तरह 100 पदों के माध्यम से पढ़ रहा था। मैं वेबपैक से बिल्कुल परिचित नहीं हूँ! मैंने अपना ऐप निकाला लेकिन यह सुनिश्चित नहीं किया कि मेरे ऐप में अतिरिक्त एंट्री रूट जोड़ने के बारे में कैसे जाना है। मैंने हर जगह देखा लेकिन बाहर निकलने वाली प्रतिक्रिया-प्रतिक्रिया-ऐप वेबपैक कॉन्फ़िगरेशन फ़ाइलों में प्रवेश बिंदु जोड़ने पर बहुत कुछ प्रतीत नहीं होता है, जब तक कि मैं इसे याद नहीं करता। क्या आप कुछ भी जानते हैं या इससे भी बेहतर क्या आपको कोई विचार है? यदि आप इसे एक उत्तर के रूप में जोड़ते हैं। अगर यह काम करता है, तो मैं तुरंत बक्षीस का पुरस्कार दूंगा। – Herm

उत्तर

7

चूंकि silent_renew के लैंडिंग पृष्ठ एक साधारण HTML पृष्ठ है, तो आप वेबपैक को बाईपास कर सकते हैं। बस निम्न फ़ाइल को सार्वजनिक फ़ोल्डर में डालें। उसी फ़ोल्डर में oidc-client.min.js लाइब्रेरी की एक प्रति भी शामिल करें।

सार्वजनिक/silent_renew.html:

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <script src="oidc-client.min.js"></script> 
    <script> 
     new Oidc.UserManager().signinSilentCallback().then() 
    </script> 
</body> 
</html> 

यह डे develepment config में अपनी साइट पर काम करता है। उत्पादन configI निम्न बातों का ध्यान है (अभी तक इसका परीक्षण नहीं किया है, लेकिन मैं बहुत विश्वास है इस तरह से आगे है हूँ ...)

/index.js

const express = require('express') 
const path = require('path') 
const app = express() 

app.use(express.static('.')) 

app.use((req, res, next) => { 
    if (path.extname(req.path).length > 0) { 
    next() 
    } else if (path.dirname(req.path).indexOf('silent_renew') > -1) { 
    req.url = '/silent_renew.html' 
    next() 
    } 
    else if (path.dirname(req.path).indexOf('callback') > -1) { 
    req.url = '/callback.html' 
    next() 
    } else { 
    req.url = '/index.html' 
    next() 
    } 
}) 

app.listen(3000) 

जैसे ही सार्वजनिक बनाने -रेक्ट-ऐप एकाधिक प्रविष्टि बिंदुओं का समर्थन करता है, मुझे उम्मीद है कि यह जल्द ही एंटरप्राइज़ लॉगिन परिदृश्य के लिए होता है, यह कोड अप्रचलित हो जाता है।

0

आप एक कस्टम webpack लोडर नहीं जोड़ सकते हैं यदि आप अलग हो नहीं किया है:

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

स्रोत: https://github.com/facebookincubator/create-react-app/issues/99#issuecomment-234657710

आप एक नया विशिष्ट प्रविष्टि फ़ाइल आप पहली बार yarn eject करने की जरूरत है तो config/webpack.config.dev.js:34 और config/webpack.config.prod.js:55 संपादित जोड़ना चाहते हैं। वही नया वेबपैक लोडर जोड़ने के लिए मान्य है।

+0

धन्यवाद @enapupe। इस बारे में कोई विचार नहीं है कि ऐसा करने का सबसे अच्छा तरीका क्या है? मैं अपनी कॉन्फ़िगरेशन निष्कासित कर दिया है। वेबपैक कॉन्फ़िगरेशन के माध्यम से देखा गया और एक नया पथ जोड़ने का प्रयास किया। यह काम नहीं कर सका। मैं वेबपैक पर भी चिपक गया नहीं हूं क्योंकि मुझे यह आवश्यकता कभी नहीं मिली है। Google पर कई पोस्ट देखे लेकिन इस विषय पर अधिक जानकारी नहीं बनाने के लिए create-react-app – Herm

+0

सुनने के लिए खेद है। मुझे लगता है कि आपको विशेष रूप से इस नए मुद्दे पर एक नया प्रश्न खोलना चाहिए। मैं अनुशंसा करता हूं कि आप कुछ फाइलें साझा करें ताकि हम पुन: पेश कर सकें कि क्या गलत हो रहा है। क्या आपको कोई त्रुटि मिली? वास्तव में क्या काम नहीं कर रहा है? – enapupe

0

जैसा कि पहले कहा गया था, create-react-app की वेबपैक कॉन्फ़िगरेशन को बदलना इस परियोजना का उद्देश्य क्या है, शून्य-कॉन्फ़िगरेशन के साथ प्रतिक्रिया करने का तरीका प्रदान करता है।

मुझे डर है कि समाधान आपके ऐप को बाहर निकालना होगा, जो अपरिवर्तनीय है।

ऐसा करने के बाद,, index.js और index.html फ़ाइल के साथ अपनी परियोजना की जड़ में silent_renew निर्देशिका बनाने के रूप में here देखा redux के लिए एक store बनाने (आप शायद, इस सामग्री का एक बहुत जरूरत नहीं है कहानियों की तरह, राउटर और लॉगर मिडलवेयर, बस loadUser तर्क और स्टोर निर्माण करें), स्टोर को src/index.js फ़ाइल में आयात करें और this जैसे रेडक्स Provider बनाएं।

फिर, आप config/webpack.config.dev.js संशोधित कर सकते हैं और redux-oihc-example वेबपैक conf पर हम क्या देख सकते हैं उसका पालन करें। HtmlWebpackPlugin और CommonsChunkPluginsilentRenew और अतिरिक्त प्रविष्टि बिंदु जोड़ें।

सीआरए के बारे में थोड़ा परेशान करना यह है कि देव और प्रोड के लिए उनका वेबपैक कॉन्फ़िगरेशन पूरी तरह से अलग हो गया है और साझा किए गए एक को विस्तारित नहीं करता है। उदाहरण के लिए आपको this जैसे अनावश्यकता को रोकने के लिए आपको प्रोड और देव कॉन्फ़िगर दोनों में यह ऑपरेशन करना होगा, या एक अन्य conf फ़ाइल का विस्तार करना होगा।


मैं भी एक और सरल पाड़ उपयोग करने के लिए आपको सलाह होगा, सीआरए अच्छा है आप कुछ भी विशेष आप क्या चाहते हैं के विपरीत करने के लिए की जरूरत नहीं है जब (और शायद भविष्य में और अधिक)। निकालने से बहुत सारी फाइलें और कोड बन जाएंगे जिन्हें आपको अपने कोडबेस में भी आवश्यकता नहीं है।एक दोस्त और मैंने minimalist one बनाया, लेकिन मुझे यकीन है कि बहुत सारे बेहतर विकल्प हैं।