कोणीय 2 Django रेस्ट फ्रेमवर्क बैकएंड

Question

में लॉग इन करें मैं एक वेबपैप बनाने के लिए बैकएंड पर अपने फ्रंट एंड एंड डैंजो रेस्ट फ्रेमवर्क के रूप में कोणीय 2 का उपयोग कर रहा हूं।

मैंने एक मूल कोणीय 2 ऐप स्थापित किया है जो मेरे Django Rest Framework बैकएंड से डेटा खींचता है। Django Rest Framework बैकएंड में 'api-auth' url को ब्राउज़ करने योग्य API के साथ लॉग इन करने के लिए कॉन्फ़िगर किया गया है (here देखें जो मेरा मतलब है), लेकिन अब मैं को अपने कोणीय 2 ऐप से लॉग इन करने में परेशानी में भाग रहा हूं ।

जो मैं सबसे अच्छा अभ्यास कह सकता हूं उससे जेएसओएन वेब टोकन (जेडब्ल्यूटी) का उपयोग करना है।

मैंने लगभग सभी आसानी से उपलब्ध ट्यूटोरियल/ब्लॉग पोस्ट ऑनलाइन देखे हैं लेकिन मुझे एक स्पष्ट उत्तर नहीं मिल रहा है जो बैकएंड (डीजेगो) और फ्रंटेंट (कोणीय 2) पर मुझे क्या करने की ज़रूरत है। कोई भी एक उच्च स्तर पर व्याख्या करने में सक्षम है कि एक कोणीय 2 फ्रंट एंड से एक Django रेस्ट फ्रेमवर्क बैकएंड में कैसे लॉगिन करें?

मैं विशेष रूप से "लॉगिन" फ़ंक्शन के बारे में सोच रहा हूं जो एंगुलर 2 ऐप में ".service.ts" फ़ाइल में बैठेगा जो कुछ यूआरएल ".../लॉगिन" के लिए एक पोस्ट अनुरोध करेगा। मेरा मतलब समझने के लिए this blog में लॉगिन() फ़ंक्शन देखें। मैं उस उदाहरण से बाहर जा रहा था लेकिन यह मुझे फ्रंटेंड & बैकएंड के बीच कनेक्शन बनाने का पूरा चित्र नहीं दे रहा है।

Answer 1

यह समाधान जेडब्ल्यूटी का उपयोग करके प्रमाणीकरण के लिए है, हालांकि ऐसे अन्य समाधान भी हैं जो जेडब्ल्यूटी का उपयोग नहीं करते हैं।

This package (django-rest-framework-jwt) आपको Django Rest Framework में जेडब्ल्यूटी को प्रबंधित करने के लिए एंडथ पॉइंट्स रखने की अनुमति देता है। यदि आप docs का पालन करते हैं तो आपको कोई समस्या नहीं होगी।

कोणीय 2 अंत में, आपके पास एक लॉगिन सेवा होनी चाहिए जो लॉगिन प्रमाण-पत्रों का उपयोग कर सर्वर से जेडब्ल्यूटी को अनुरोध करेगी। यह Django में आपके उपयोगकर्ता मॉडल पर निर्भर करता है।

This blog post Angular2 JWT प्रमाणीकरण के साथ बहुत उपयोगी है। आप प्रमाणीकरण.service में लॉगिन फ़ंक्शन देख सकते हैं। मैंने डीआरएफ-जेडटी के अनुरूप कोड को थोड़ा सा बदल दिया।

let headers = new Headers({ 
    'Accept': 'application/json', 
    'Content-Type': 'application/json', 
}); 
let options = new RequestOptions({ 
    headers: headers 
}); 
this.http.post(basePath + '/api-token-auth/', JSON.stringify({ username: username, password: password }), options) 
.map((response: Response) => { 
     // login successful if there's a jwt token in the response 
     let token = response.json() && response.json().token; 

     if (token) { 
     // set token property 
     this.token = token; 

     // store username and jwt token in local storage to keep user logged in between page refreshes 
     localStorage.setItem('id_token', token); 

     // return true to indicate successful login 
     return true; 
     } else { 
     // return false to indicate failed login 
     return false; 
     } 
    }); 
// 'api-token-auth/' is the default endpoint with drf-jwt 

यह डीएफएफ से jwt के लिए पूछता है और इसे स्थानीय स्टोरेज में संग्रहीत करता है।

वहां से, आपके सभी http अनुरोधों को प्रमाणीकरण की आवश्यकता है जिसमें प्राधिकरण शीर्षलेख शामिल होना चाहिए। एक http wrapper है जो आपको ऐसा करने की अनुमति देता है।

आप override the default configuration settings कर सकते हैं। आपको ओवरराइड करने के लिए आवश्यक न्यूनतम कॉन्फ़िगरेशन यह है कि आपको वैश्विक हेडर सेट करना चाहिए। आपको टोकननाम या टोकन गेटटर को बदलने की आवश्यकता नहीं है। बस Content-Type: application/json और Accept: application/json जोड़ें। (डीआरएफ Accept हेडर को यह निर्धारित करने के लिए जांच करेगा कि किस प्रकार का Renderer इसका उपयोग करना चाहिए।) आप हेडरफ्रिक्स को JWT में भी बदलना चाहते हैं क्योंकि drf-jwt प्राधिकरण शीर्षलेख के लिए उस उपसर्ग का उपयोग करता है या आप इसे DRF-jwt की सेटिंग्स से बदल सकते हैं।