वसंत बूट + कोणीय एकल पृष्ठ वेब ऐप के लिए तृतीय पक्ष सामाजिक लॉगिन के साथ नियमित उपयोगकर्ता नाम/पासवर्ड लॉगिन को एकीकृत करने के लिए कैसे?

Question

मेरे पास एक कोणीय + वसंत बूट एकल पृष्ठ वेब ऐप है। सर्वर एक ऑथ सर्वर के रूप में भी कार्य करता है जो कोणीय ऐप को टिकाऊ एपीआई कॉल करने के लिए उपयोग करने के लिए टोकन जारी करता है।

मेरा पुराना लॉगिन प्रवाह एक बेयरर टोकन प्राप्त करने के लिए/oauth/टोकन एंडपॉइंट पर एक grant_type = पासवर्ड पोस्ट कॉल का उपयोग करता है। और उपयोगकर्ता की तरफ से आगे की सभी एपीआई कॉल में बेयरर टोकन को "प्राधिकरण" http हेडर के रूप में शामिल किया जाएगा।

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

मैं अपने टेम्पलेट के रूप में निम्नलिखित दो ट्यूटोरियल उपयोग किया गया है:

Spring Security and Angular JS

Spring Boot and OAuth

पहले ट्यूटोरियल का OAuth-वेनिला उदाहरण में, उपयोगकर्ता नाम passwork प्रवेश प्रवाह को प्राधिकरण पेज को लाता है। लेकिन मैं पारंपरिक उपयोगकर्ता नाम/पासवर्ड फॉर्म लॉगिन अनुभव चाहता हूं (प्राधिकरण पृष्ठ दिखाने के बजाय सीधे उपयोगकर्ता लॉग इन करें)।

दूसरे ट्यूटोरियल में, फेसबुक लॉगिन के बाद, मैं अपने आंतरिक उपयोगकर्ता डेटाबेस को देखने के लिए फेसबुक आईडी का उपयोग करना चाहता हूं और यदि कोई अस्तित्व नहीं है तो उसे नया उपयोगकर्ता बनाएं और उसे उपयोगकर्ता के रूप में लॉग इन करें। और आंतरिक डीबी उपयोगकर्ता की पहचान और अधिकारियों का उपयोग अपने एपीआई सर्वर पर भावी एपीआई कॉल को अधिकृत करने के लिए करें।

मैं कम से https://github.com/dingquan/spring-angular-oauth

पर मैं पोस्ट करने के लिए/OAuth/टोकन endpoint कॉल कर और मेरी रक्षा की/api/ब्लॉग समाप्ति बिंदु को आगे API कॉल करने के लिए लौट आए टोकन का उपयोग कर सकते हैं एक नीचे छीन लिया नमूना है। लेकिन मैं समझ नहीं है निम्नलिखित बातें काम करने के लिए कैसे:

1. उपयोगकर्ता नाम/पासवर्ड लॉगिन कि इतने एक सत्र कुकी पैदा करेगा मैं करने के लिए भविष्य API कॉल के लिए प्राधिकरण वाहक टोकन भेजने के लिए की जरूरत नहीं है संसाधन एंडपॉइंट

2. फेसबुक लॉगिन के बाद (फेसबुक लॉगिन लिंक उपयोगकर्ता नाम/पासवर्ड लॉगिन फॉर्म के नीचे है), मेरे एंडपॉइंट पर कॉल अभी भी 401 त्रुटि के साथ विफल रहता है (मेरे पास "टेस्ट" बटन है जो कॉल/एपीआई कॉल करता है/ब्लॉग, आप व्यवहार देखने के लिए उस पर क्लिक कर सकते हैं)। तो एपीआई कॉल सफल होने के लिए मुझे क्या याद आ रही है?

=== अद्यतन ===

बस स्पष्ट करने के लिए। प्रमाणीकरण के

1. कई तरीके (पारंपरिक उपयोगकर्ता नाम/पासवर्ड, इस तरह फेसबुक, संभवतः सेलफोन संख्या + भविष्य में SMS कोड के तृतीय पक्ष OAuth प्रवेश)
2. हम करते हैं: यहाँ लक्ष्यों मैं प्राप्त करने के लिए कोशिश कर रहा हूँ कर रहे हैं अन्य उपयोगकर्ता विशेषताओं को स्टोर करने के लिए डीबी द्वारा समर्थित हमारे स्वयं के उपयोगकर्ता मॉडल की आवश्यकता है, शुद्ध सामाजिक लॉगिन पर्याप्त नहीं है
3. सामाजिक लॉगिन को निहित होना आवश्यक है। एक तृतीय पक्ष (फेसबुक, आदि) के माध्यम से लॉगिन करने के बाद उपयोगकर्ता को मैन्युअल रूप से हमारे सिस्टम में उपयोगकर्ता खाता बनाने की आवश्यकता नहीं होनी चाहिए। हम पंजीकरण फॉर्म को पूर्व-पॉप्युलेट करने के लिए केवल उपयोगकर्ताओं के सामाजिक प्रोफ़ाइल डेटा को पकड़ नहीं रहे हैं।यदि कोई मौजूदा डीबी उपयोगकर्ता दिए गए बाहरी सामाजिक खाते से जुड़ा हुआ नहीं है तो हम दृश्य के पीछे स्वचालित रूप से नए डीबी उपयोगकर्ता बनाना चाहते हैं। यानी यदि उपयोगकर्ता फेसबुक के माध्यम से लॉग इन है, तो उन्हें उपयोगकर्ता नाम/पासवर्ड दर्ज करने की आवश्यकता नहीं है। फेसबुक के माध्यम से प्रमाणीकरण स्वचालित रूप से उपयोगकर्ता को हमारे सिस्टम में लॉग ऑन करेगा और उपयोगकर्ता फेसबुक लॉगिन के बाद प्रतिबंधित संसाधनों तक पहुंचने में सक्षम होना चाहिए।

कुछ भ्रम है कि मैं लोगों से अपने ऐप द्वारा होस्ट किए गए लॉगिन फॉर्म में अपना फेसबुक उपयोगकर्ता नाम/पासवर्ड डालने के लिए कह सकता हूं और मैं उपयोगकर्ता की ओर से फेसबुक लॉगिन करूंगा। यही वह नहीं है जिसे मैं पूछ रहा था।

Answer 1

आप इस तरह के एक जटिल विन्यास की जरूरत नहीं है। अपने MainConfiguration पर @EnableOAuth2Sso जोड़ें और उपयुक्त एप्लिकेशन गुण सेट करें।

यहाँ मैं आदेश में एक प्राधिकरण सर्वर के रूप में फेसबुक का उपयोग करने के लिए क्या किया है।

क)clientId और authServerUserServiceImpl से निकालें। अन्यथा आपको एक प्राधिकरण सर्वर को कॉन्फ़िगर करने के लिए मजबूर होना होगा जिसकी आवश्यकता नहीं है।

बी)AuthorizationServerConfiguration पूरी तरह से हटाएं।

ग) अपने MainConfiguration को @EnableWebSecurity और @EnableOAuth2Sso जोड़ें।

घ) बदलें MainConfiguration::configure

ई करने के लिए

http 
    .logout().logoutSuccessUrl("/").permitAll().and() 
    .authorizeRequests().antMatchers("/", "/login", "/home.html").permitAll() 
    .anyRequest().authenticated() 
    .and().csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse()); 

)MainConfiguration से सब कुछ को हटा दें नेस्टेड वर्ग AuthenticationSecurity को छोड़कर।

च) बदलें ResourceServerConfiguration::configure(HttpSecurity)

को

http.antMatcher("/api/**").authorizeRequests().anyRequest().authenticated(); 

च) निकालें विशेषता tokenStore और ResourceServerConfiguration से विधि ResourceServerConfiguration::configure(ResourceServerSecurityConfigurer)।

छ) निकालें विन्यास ब्लॉक security और facebookapplication.yml से। इसके बजाय <a href="/login">login</a> को यह

security: 
    oauth2: 
    client: 
     client-id: <CLIENT_ID> 
     token-name: oauth_token 
     authentication-scheme: query 
     client-authentication-scheme: form 
     access-token-uri: https://graph.facebook.com/oauth/access_token 
     user-authorization-uri: https://www.facebook.com/dialog/oauth 
    resource: 
     user-info-uri: https://graph.facebook.com/me 
     client-id: <CLIENT_ID> 
     client-secret: <CLIENT_SECRET> 
     token-type: code 

ज जोड़ने)index.html में परिवर्तन <a href="#/login">login</a>। i) इस one साथ hello.js की सामग्री बदलें।

लेकिन मैं पारंपरिक उपयोगकर्ता नाम/पासवर्ड फॉर्म लॉगिन अनुभव (प्राधिकरण पृष्ठ दिखाने के बजाय सीधे लॉग इन उपयोगकर्ता) चाहता हूं।

मैं ऐसी साइट का कभी भी उपयोग नहीं करता जिसके लिए मुझे मूल रूप से रीडायरेक्ट किए बिना मेरे क्रेडेंशियल्स की आवश्यकता होती है! मैं आपको नहीं जानता और आप एक फ़िशिंग साइट होने के संदेह में हैं। आपको वास्तव में अपने निर्णय पर पुनर्विचार करना चाहिए।

बीटीडब्ल्यू, मैंने इन परिवर्तनों के साथ एक पुल अनुरोध बनाया।