😧 👩🏿‍🔬 🚈 क्या Angular.js और Facebook लॉग इन मित्र बनाएंगे? 🤒 👐🏻 🥛

अभिवादन, हेबर के प्रिय पाठकों!

मैं अपनी पहली पोस्ट को समर्पित करना चाहूंगा कि अब तक, कोणीय और नोड के साथ काम करना सबसे दिलचस्प है।

कुछ समय (लगभग 7 महीने) एंगुलर के साथ काम करने के दौरान, मेरे अपने विचारों का एक जोड़ा सामने आया है, जिसे मैं साझा करने के लिए उत्सुक हूं। बेशक, यह फेसबुक लॉगिन ही नहीं है, जैसा कि फेसबुक जेएस एसडीके सेक्शन में बताया गया है, और "हैलो वर्ल्ड विथ एंगुलर.जेएस" नहीं है, लेकिन यह बहुत सरल है।

इस लेख को लिखने की प्रेरणा रोचक दिशाओं में कुछ अनुभव साझा करने की इच्छा है।

[छोटे अस्वीकरण]

शायद इस पाठ के नीचे होने वाली हर चीज कोड के टुकड़ों के साथ बकवास का एक विस्फोटक मिश्रण है, लेकिन मैं ईमानदारी से एक उद्देश्य मूल्यांकन और अधिक उपयुक्त / दिलचस्प समाधान चुनने में अनुभवी डेवलपर्स की मदद की उम्मीद करता हूं।

बैकएंड

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

आगे हम महत्वपूर्ण बिंदुओं का अधिक विस्तार से विश्लेषण करने का प्रयास करेंगे।

एक नज़र डालें कि सर्वर ब्राउज़र से अनुरोधों का जवाब कैसे देता है:

app.js

var express = require('express') , expressLayouts = require('express-ejs-layouts') , less = require('less-middleware') , routes = require('./routes') , config = require('./settings') , http = require('http') , path = require('path') , app = express() ; // all environments app.set('view engine', 'ejs'); app.set('views', __dirname + '/views'); app.set('layout', 'layout'); app.locals({ appName: config.APP_NAME, appId: config.APP_ID, appUrl: config.APP_URL, scope: config.SCOPE, random: Math.random() }); app.use(expressLayouts); app.use(express.favicon()); app.use(express.logger('dev')); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(express.cookieParser()); app.use(express.session({ secret: config.SECRET, maxAge: new Date(Date.now() + 3600000) })); app.use(require('less-middleware')({ force: true, dest: path.join(__dirname, 'public', 'css'), src: path.join(__dirname, 'less'), prefix: '/static/css/' })); app.use('/static', express.static(path.join(__dirname, 'public'))); app.use('/static', express.static(path.join(__dirname, 'bower_components'))); app.use(app.router); // landing page app.get('/' , routes.index); app.get('/partials/:name' , routes.partials); app.get('/partials/:folder/:name' , routes.partials); app.all(/^(\/((?!static)\w.+))+$/ , routes.index); http.createServer(app).listen(config.PORT, function(){ console.log('Express server listening on port ' + config.PORT); });

हमें केवल रूटिंग पर ध्यान दें, जैसा कि बाकी विशुद्ध रूप से तकनीकी सेटिंग्स हैं, जिनमें से अधिकांश को अक्सर "एक्सप्रेस से शुरू करें" जैसे ट्यूटोरियल में वर्णित किया जाता है।

चूंकि हम सिंगल-पेज एप्लिकेशन बनाने की तैयारी कर रहे हैं, इसलिए हमें सर्वर को कॉन्फ़िगर करने की आवश्यकता है ताकि यह हमेशा अनुरोध के साथ <ng-view> </ ng-view> टैग के साथ एक ही पेज दे, ताकि कोणीय वर्तमान को संभाल सके क्लाइंट-साइड रूटिंग के अनुसार URL और संबंधित आंशिक (उस पर बाद में ..) लोड करें

तो - हम एक्सप्रेस को कैसे समझा सकते हैं कि स्थैतिक फ़ाइलों (जेएस, सीएसएस, चित्र) और सामान्य पृष्ठों (यदि वे सर्वर पर वर्णित नहीं हैं) के अनुरोधों के बीच अंतर है ताकि:
- उन्होंने गैर-मौजूद पृष्ठ पथों के बारे में हमसे शपथ नहीं ली और न ही कोणीय के काम में हस्तक्षेप किया;
- फिर भी उसने आपसे वह सब कुछ व्यक्त किया जो वह आपके बारे में सोचता है यदि आपने एक गैर-मौजूद स्थैतिक फ़ाइल का अनुरोध किया है;

कुछ इस तरह:

 //       app.use('/static', express.static(path.join(__dirname, 'public'))); app.use('/static', express.static(path.join(__dirname, 'bower_components'))); app.use(app.router); //  -        . // landing page app.get('/' , routes.index); // GET      index, .. homepage   <ng-view> app.get('/partials/:name' , routes.partials); // ,      Partials'  Angular'a app.get('/partials/:folder/:name' , routes.partials); //  ,      app.all(/^(\/((?!static)\w.+))+$/ , routes.index); //    ,  ",       /static/      Angular'a".

एक तार्किक प्रश्न उठता है - यदि हम वास्तव में अनुरोधित पृष्ठ (उदाहरण के लिए / ओलोलो) नहीं रखते हैं, तो हम 404 त्रुटि के बारे में उपयोगकर्ता को कैसे बताएंगे?

दृश्यपटल

इससे पहले कि मैं आपको बताऊं कि एक पृष्ठ पर जाते समय एंगुलर यह कैसे समझ सकता है कि आपने कहां गलती की है, आइए एप्लिकेशन की फ़ाइल संरचना को देखें (और सर्वर पर सभी स्टैटिक्स, न कि बोवर से थर्ड-पार्टी लाइब्रेरी शामिल करें)

छिपा हुआ पाठ

├── जनता
Ss ss सीएसएस
└── └── │ style.css
├── ├── छवियां
└── p │ fb_button.png
S s जे.एस.
├── initial │ application.js - आवेदन आरंभीकरण। अधिक जानकारी बाद में ...
├── a │ नियंत्रकों.जेएस - नियंत्रकों के लिए एक वैश्विक मॉड्यूल
├── global │ directives.js - निर्देशों के लिए वैश्विक मॉड्यूल
│ filters │ filter.js - फ़िल्टर के लिए
│ services │ services.js - सेवाओं के लिए
└── stored │ मॉड्यूल - एप्लिकेशन इकाइयां इस फ़ोल्डर में संग्रहीत हैं
│ is │ friends.js - यहां उनमें से एक है - / मित्र पृष्ठ और नियंत्रक, निर्देश, और केवल इस इकाई से संबंधित फ़िल्टर यहां वर्णित हैं

सामान्य तौर पर, मॉड्यूल फ़ोल्डर को अलग तरह से कहा जा सकता है - उदाहरण के लिए पृष्ठ ...
यानी संक्षेप में - मॉड्यूल के 2 क्षेत्र हैं:
- वैश्विक - निर्देशों, फिल्टर, सेवाओं का वर्णन करता है जो पूरे प्रोजेक्ट में उपयोग किए जा सकते हैं
- आवश्यक - एक इकाई के लिए मार्ग का वर्णन करता है, और यह भी निर्देश, फिल्टर, सर्विसिक्स जो विशिष्ट रूप से केवल इस इकाई से संबंधित हैं और इस मॉड्यूल के बाहर उपयोग नहीं किया जा सकता है।

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

layout.ejs

 <html ng-app="angularfb"> <head> <title>Facebook app</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/static/css/style.css"> <link rel="stylesheet" href="/static/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="/static/bootstrap/dist/css/bootstrap-theme.css"> <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css"> <!--[if IE 7]> <link rel="stylesheet" href="/static/font-awesome/css/font-awesome-ie7.min.css"> <![endif]--> <link href='http://fonts.googleapis.com/css?family=Domine' rel='stylesheet' type='text/css'> <style type="text/css"> [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } </style> <script type="text/javascript"> //           ,  Facebook API FB_APP_NAME = '<%= appName %>'; FB_APP_ID = '<%= appId %>' ; FB_APP_URL = '<%= appUrl %>'; FB_SCOPE = '<%= scope %>'; </script> </head> <body ng-class="{'page-loader': !$root.user}"> <!--     FB user'a,      --> <!-- body   <ng-view>  Angular     URL . --> <div ng-if="$root.user"> <%- include navigation %> <%- body %> <%- include footer %> </div> <!--       FB user'a --> <div ng-if="!$root.user" ng-cloak> <h2 class="text-center" ng-if="!auth.status"> <i class="icon-spin icon-spinner"></i> Loading... </h2> <!--   login with Facebook      auth.authResponseChange --> <a ng-if="auth.status && auth.status != 'connected'" class="fb-btn" ng-click="login()"></a> </div> </body> <script src="//connect.facebook.net/en_US/all.js"></script> <script src="/static/jquery/jquery.min.js"></script> <script src="/static/bootstrap/dist/js/bootstrap.min.js"></script> <script src="/static/underscore/underscore-min.js"></script> <script src="/static/angular/angular.js"></script> <script src="/static/angular-resource/angular-resource.min.js"></script> <script src="/static/angular-route/angular-route.min.js"></script> <script src="/static/js/services.js?<%= random %>"></script> <script src="/static/js/filters.js?<%= random %>"></script> <script src="/static/js/controllers.js?<%= random %>"></script> <script src="/static/js/directives.js?<%= random %>"></script> <script src="/static/js/modules/friends.js?<%= random %>"></script> <script src="/static/js/application.js?<%= random %>"></script> </html>

application.js

 (function() { 'use strict'; angular.module('angularfb', [ 'ngRoute', 'ngResource', 'angularfb.filters', 'angularfb.controllers', 'angularfb.services', 'angularfb.directives', 'angularfb.friends' ]) .config([ '$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){ $locationProvider.html5Mode(true); $routeProvider .when('/', { templateUrl: '/partials/homepage', controller: 'HomePageCtrl' }) .when('/logout', { resolve: [ '$rootScope', 'API', '$location', function($rootScope, API, $location){ API.logout(function(){ console.log('Logout... redirecting...'); $location.path('/') $rootScope.$apply(); }); }] }) .otherwise(); } ]) .run(['$rootScope', '$location', 'API', function($rootScope, $location, API){ FB.init({ appId : FB_APP_ID, channelUrl : FB_APP_URL, status : true, xfbml : true, oauth : true }); console.log('RUN!'); //    Login With Facebook $rootScope.login = function(){ API.login(function(){ console.log("Logged in. Redirecting...") $location.path('/'); }, function(){ console.log("not logged in... error...") }); } //     API.getLoginStatus( function( response ){ console.info("Authorized:", response) }, function( response ){ console.error("Not authorized:", response) } ) FB.Event.subscribe('auth.authResponseChange', function(response) { console.log('got AuthResponseChange:', response); if (response.status === 'connected') { API.me().then( function(resp){ console.log('got user Info', resp); }, function(error){ console.log("got user Info error", error); } ); } else { $rootScope.user = null; //      - ng-if  (. layout.ejs) $location.path('/'); } $rootScope.auth = response; $rootScope.$$phase || $rootScope.$apply(); }); $rootScope.$on('$routeChangeStart', function(event, next, current){ if ( !next.$$route ) next.templateUrl = '/partials/error'; }) }]) .controller('HomePageCtrl', [ '$scope', function($scope){ /* .... */ }]) }());

services.js

 (function(){ 'use strict'; angular.module('angularfb.services', []) .factory("API", [ '$rootScope', '$q', '$location', '$exceptionHandler', function($rootScope, $q, $location, $exceptionHandler){ return { me: function(){ var def = $q.defer(); FB.api('/me', function(response){ def.resolve($rootScope.user = response); //       $root,     layout.ejs "  " }) return def.promise; }, getLoginStatus: function(successCallback, errorCallback){ var self = this; FB.getLoginStatus(function(response) { self._processAuthResponse( response, successCallback, errorCallback ) }); }, login: function(successCallback, errorCallback){ var self = this; FB.login(function(response){ self._processAuthResponse( response, successCallback, errorCallback ); }, { scope: FB_SCOPE } ) }, logout: function( logoutCallback ){ return FB.logout(function( response ){ if (_.isFunction( logoutCallback )) logoutCallback.call(this, arguments) else { $location.path('/') $rootScope.user = null; } $rootScope.auth = response; }) }, _processAuthResponse: function( response, successCb, errorCb ) { var self = this; if (response.authResponse) { if (_.isFunction(successCb)) successCb.call(this, response) else if(_.isUndefined(successCb)){ $location.path('/') } else throw new Error("Success callback should be a function") } else { if (_.isFunction(errorCb)) errorCb.call(this, response) else if(_.isUndefined(errorCb)){} else throw new Error("Error callback should be a function") } $rootScope.auth = response; self._applyScope(); }, _applyScope: function( cb ) { if (!$rootScope.$$phase) { try { $rootScope.$eval( cb ); } catch (e) { $exceptionHandler(e); } finally { try { $rootScope.$apply(); } catch (e) { $exceptionHandler(e); throw e; } } } else { $rootScope.$eval( cb ); } } } } ]) })();

मुझे लगता है कि वे API सेवा में ऐसी बाइक्स के लिए डांटेंगे, जैसे कि सक्सेसकॉलबैक, एररकलबैक और _प्रोसेसअथ-रिप्रसन, अगर केवल इसलिए कि यह बहुत आसान हो सकता है। मैं बाइक चलाना चाहता था, थोड़ा ढेर लगा ... उसके लिए, सब कुछ किसी न किसी तरह से प्राधिकरण के काम में काफी विकसित हो रहा है।

फेसबुक लॉगिन

लेकिन फेसबुक का क्या? शीर्षक में उल्लेख किया, पाठ में कई बार, लेकिन कोई स्पष्टीकरण नहीं ... मैं माफी मांगता हूं, दोष देने के लिए।

तो हम हमेशा अपने आवेदन की स्थिति को किस प्रकार से लॉग इन रखते हैं?
आइए कोड का विश्लेषण भागों में करें:

 //   , application.js,   .run(), //   Login Status API.getLoginStatus() //    event "auth.authResponseChange",  //         . // response    {authResponse: Object, status: String } // ,   ,  response.status === 'connected' //  API    $rootScope.user  '/me' , //      response  $rootScope.auth //           //  ,   . FB.Event.subscribe('auth.authResponseChange', function(response) { if (response.status === 'connected'){ API.me() } else { $rootScope.user = null; $location.path('/'); } $rootScope.auth = response; $rootScope.$$phase || $rootScope.$apply(); });

जब तक हमारे पास $ root.user नहीं है, तब तक एप्लिकेशन मुख्य सामग्री को छुपाता है और इसके बजाय 'लोड हो रहा है ..' प्रदर्शित करता है। और अगर $ root.auth पहले ही आ चुका है, और स्टेटस! == 'कनेक्टेड' है, तो हम "फेसबुक के साथ कनेक्ट" बटन दिखाएंगे। यदि उपयोगकर्ता बटन पर क्लिक करता है और लॉग इन करता है, तो हम उपयोगकर्ता को प्राप्त करते हैं, फिर लेआउट में टेम्पलेट। जेएस तुरंत एक हेडर, फुटर और <एनजी-व्यू> के साथ मुख्य सामग्री को तुरंत जवाब देंगे और लॉगिन बटन और लोडिंग छिपाएंगे।

अरे हाँ .., के बारे में नहीं मिला हैंडलिंग:

हो सकता है कि किसी ने ध्यान दिया हो कि Application.js में, जब $ मार्गप्रोपिडर का वर्णन किया जाता है, तो। अच्छे कारण के लिए सभी। हमें कहीं भी पुनर्निर्देशित नहीं होना चाहिए (उदाहरण के लिए / 404), क्योंकि त्रुटि टाइपो या कुछ इसी तरह की हो सकती है कि उपयोगकर्ता जल्दी से ठीक कर सके और पृष्ठ आवश्यकतानुसार दिखाई देगा, इसलिए हम इसे कहीं भी नहीं फेंकेंगे, लेकिन इससे पहले कि हम क्लिक करें , या हमने पृष्ठ को लोड किया है, हम जांचते हैं कि क्या इस तरह के मार्ग के लिए कोई मार्ग (.where ()) वर्णित है? यदि नहीं, तो इसे लोड करें, और इसके लिए टेम्पलेट को प्रतिस्थापित करें।

 $rootScope.$on('$routeChangeStart', function(event, next, current){ if ( !next.$$route ) next.templateUrl = '/partials/error'; })

इस प्रकार, हमारे पास अभी भी एड्रेस बार में गलत लिंक है; यह पथ मौजूद नहीं है कि जानकारी; उपयोगकर्ता ने देखा, और URL को ठीक करना आसान है और आप एप्लिकेशन के साथ काम करना जारी रख सकते हैं।

सामान्य तौर पर

- हमने जांच की कि कैसे एक्सप्रेस ने एंगुलर को सांस लेने में आसान बना दिया है, व्यक्तिगत तर्क के लिए सब कुछ दे रहा है, स्थैतिक फाइलों को छोड़कर।
- Anguar.js फ़ाइलों के आयोजन के विषय पर छूना
- हमें यकीन था (मुझे उम्मीद है) कि Angular'y को न केवल 404 एरर हैंडलिंग के साथ सौंपा जा सकता है, बल्कि ऑथराइजेशन के बाद यूजर के साथ फिर से क्लाइंट के साथ फेसबुक के जरिए भी बातचीत की जा सकती है।

और आप महसूस कर सकते हैं कि सब कुछ यहाँ रहते हैं:
- http://angular-fb.herokuapp.com/]

अगर किसी को दिलचस्पी थी, तो मैं इस परियोजना के साथ जीथब का लिंक छोड़ सकता हूं।
जो भी पढ़े उसका धन्यवाद।

UPD: फेसबुक लॉगिन के बारे में जोड़ा गया। धन्यवाद तुलोव_लेक्स