From 6304dd2e15e28bf80206dd30b777c68eb8d53313 Mon Sep 17 00:00:00 2001 From: Tyler Renelle Date: Thu, 6 Nov 2014 13:08:41 -0700 Subject: [PATCH] feat(auth): move to hello.js for social auth, paves the way for multiple connectors. Prettier buttons via zocial --- bower.json | 6 ++++-- public/js/controllers/authCtrl.js | 28 +++++++++++++--------------- public/js/static.js | 6 +----- public/manifest.json | 5 ++++- src/controllers/auth.js | 31 +++++++++++++++++++++---------- src/routes/auth.js | 4 ++-- views/static/login-modal.jade | 14 +++++++++----- 7 files changed, 54 insertions(+), 40 deletions(-) diff --git a/bower.json b/bower.json index 9c346a0e90..30a785c817 100644 --- a/bower.json +++ b/bower.json @@ -41,12 +41,14 @@ "jquery-colorbox": "~1.4.36", "pnotify": "~1.3.1", "jquery-ui": "~1.10.3", - "angular-facebook": "~0.2.3" + "hello": "~1.3.1", + "css-social-buttons": "https://github.com/samcollins/css-social-buttons.git" }, "devDependencies": { "angular-mocks": "1.3.0-beta.11" }, "resolutions": { - "angular": "1.3.0-beta.11" + "angular": "1.3.0-beta.11", + "jquery": ">=1.9.0" } } diff --git a/public/js/controllers/authCtrl.js b/public/js/controllers/authCtrl.js index 8293f48c69..bacc41c28f 100644 --- a/public/js/controllers/authCtrl.js +++ b/public/js/controllers/authCtrl.js @@ -5,8 +5,8 @@ */ angular.module('authCtrl', []) - .controller("AuthCtrl", ['$scope', '$rootScope', 'User', '$http', '$location', '$window','ApiUrlService', '$modal', 'Facebook', - function($scope, $rootScope, User, $http, $location, $window, ApiUrlService, $modal, Facebook) { + .controller("AuthCtrl", ['$scope', '$rootScope', 'User', '$http', '$location', '$window','ApiUrlService', '$modal', + function($scope, $rootScope, User, $http, $location, $window, ApiUrlService, $modal) { $scope.logout = function() { localStorage.clear(); @@ -112,22 +112,20 @@ angular.module('authCtrl', []) return selectNotificationValue(false, false, false, false, true); } - // ------ Facebook ---------- - // See https://developers.facebook.com/docs/facebook-login/login-flow-for-web/v2.2 for boilerplate - $scope.fbLogin = function(){ - var thenLogin = function(response){ - $http.post(ApiUrlService.get() + "/api/v2/user/auth/facebook", response.authResponse) + // ------ Social ---------- + + hello.init({ + facebook : window.env.FACEBOOK_KEY, + }); + + $scope.socialLogin = function(network){ + hello(network).login({scope:'email'}).then(function(auth){ + $http.post(ApiUrlService.get() + "/api/v2/user/auth/social", auth) .success(function(data, status, headers, config) { runAuth(data.id, data.token); }).error(errorAlert); - } - Facebook.getLoginStatus(function(response) { - if (response.status === 'connected') { - thenLogin(response); - } else { - Facebook.login(thenLogin) - } - + }, function( e ){ + alert("Signin error: " + e.error.message ); }); } } diff --git a/public/js/static.js b/public/js/static.js index 606c7d18d7..66e2b8ee72 100644 --- a/public/js/static.js +++ b/public/js/static.js @@ -1,15 +1,11 @@ "use strict"; -window.habitrpgStatic = angular.module('habitrpgStatic', ['notificationServices', 'userServices', 'chieffancypants.loadingBar', 'authCtrl', 'ui.bootstrap', 'facebook']) +window.habitrpgStatic = angular.module('habitrpgStatic', ['notificationServices', 'userServices', 'chieffancypants.loadingBar', 'authCtrl', 'ui.bootstrap']) .constant("API_URL", "") .constant("STORAGE_USER_ID", 'habitrpg-user') .constant("STORAGE_SETTINGS_ID", 'habit-mobile-settings') .constant("MOBILE_APP", false) -.config(['FacebookProvider', function(FacebookProvider){ - FacebookProvider.init(window.env.FACEBOOK_KEY); -}]) - .controller("PlansCtrl", ['$rootScope', function($rootScope) { $rootScope.clickContact = function(){ diff --git a/public/manifest.json b/public/manifest.json index 59628b67aa..aaa890463c 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -21,6 +21,7 @@ "bower_components/ngInfiniteScroll/build/ng-infinite-scroll.min.js", "bower_components/select2/select2.js", "bower_components/angular-ui-select2/src/select2.js", + "bower_components/hello/dist/hello.all.min.js", "bower_components/angular-bootstrap/ui-bootstrap.js", "bower_components/angular-bootstrap/ui-bootstrap-tpls.js", @@ -66,6 +67,7 @@ ], "css": [ "bower_components/bootstrap/dist/css/bootstrap.css", + "bower_components/css-social-buttons/css/zocial.css", "app.css", "bower_components/pnotify/jquery.pnotify.default.css", "bower_components/pnotify/jquery.pnotify.default.icons.css", @@ -83,7 +85,7 @@ "bower_components/angular-bootstrap/ui-bootstrap-tpls.js", "bower_components/bootstrap/dist/js/bootstrap.js", "bower_components/jquery-colorbox/jquery.colorbox-min.js", - "bower_components/angular-facebook/lib/angular-facebook.js", + "bower_components/hello/dist/hello.all.min.js", "bower_components/angular-loading-bar/build/loading-bar.js", "js/env.js", @@ -95,6 +97,7 @@ ], "css": [ "bower_components/bootstrap/dist/css/bootstrap.css", + "bower_components/css-social-buttons/css/zocial.css", "bower_components/jquery-colorbox/example1/colorbox.css", "static.css" ] diff --git a/src/controllers/auth.js b/src/controllers/auth.js index 2a3c2fd83f..2b8a2c9cf6 100644 --- a/src/controllers/auth.js +++ b/src/controllers/auth.js @@ -166,17 +166,20 @@ api.loginLocal = function(req, res, next) { }; /* - POST /user/auth/facebook + POST /user/auth/social */ -api.loginFacebook = function(req, res, next) { - var accessToken = req.body.accessToken; +api.loginSocial = function(req, res, next) { + var access_token = req.body.authResponse.access_token, + network = req.body.network; + if (network!=='facebook') + return res.json(401, {err:"Only Facebook supported currently."}); async.waterfall([ function(cb){ - // TODO is this private function here safe to use? - passport._strategies.facebook.userProfile(accessToken, cb); + passport._strategies[network].userProfile(access_token, cb); }, function(profile, cb) { - User.findOne({'auth.facebook.id': profile.id}, {_id:1, apiToken:1, auth:1}, function(err, user){ + var q = {};q['auth.'+network+'.id'] = profile.id; + User.findOne(q, {_id:1, apiToken:1, auth:1}, function(err, user){ if (err) return cb(err); cb(null, {user:user, profile:profile}); }); @@ -185,20 +188,22 @@ api.loginFacebook = function(req, res, next) { if (data.user) return cb(null, data.user); // Create new user var prof = data.profile; - var user = new User({ + var user = { preferences: { language: req.language // User language detected from browser, not saved }, auth: { - facebook: prof, timestamps: {created: +new Date(), loggedIn: +new Date()} } - }); + }; + user.auth[network] = prof; + user = new User(user); user.save(cb); + if(isProd && prof.emails && prof.emails[0] && prof.emails[0].value){ emailUser((prof.displayName || prof.username), prof.emails[0].value, 'welcome'); } - ga.event('register', 'Facebook').send(); + ga.event('register', network).send(); } ], function(err, user){ if (err) return res.json(401, {err: err.toString ? err.toString() : err}); @@ -207,6 +212,12 @@ api.loginFacebook = function(req, res, next) { }) }; +/** + * DELETE /user/auth/social + * TODO implement + */ +api.deleteSocial = function(req,res,next){next()} + api.resetPassword = function(req, res, next){ var email = req.body.email, salt = utils.makeSalt(), diff --git a/src/routes/auth.js b/src/routes/auth.js index 616f9cf7d6..0405154db1 100644 --- a/src/routes/auth.js +++ b/src/routes/auth.js @@ -7,13 +7,13 @@ var router = new express.Router(); auth.setupPassport(router); //FIXME make this consistent with the others router.post('/api/v2/register', i18n.getUserLanguage, auth.registerUser); router.post('/api/v2/user/auth/local', i18n.getUserLanguage, auth.loginLocal); -router.post('/api/v2/user/auth/facebook', i18n.getUserLanguage, auth.loginFacebook); +router.post('/api/v2/user/auth/social', i18n.getUserLanguage, auth.loginSocial); router.post('/api/v2/user/reset-password', i18n.getUserLanguage, auth.resetPassword); router.post('/api/v2/user/change-password', i18n.getUserLanguage, auth.auth, auth.changePassword); router.post('/api/v2/user/change-username', i18n.getUserLanguage, auth.auth, auth.changeUsername); router.post('/api/v1/register', i18n.getUserLanguage, auth.registerUser); router.post('/api/v1/user/auth/local', i18n.getUserLanguage, auth.loginLocal); -router.post('/api/v1/user/auth/facebook', i18n.getUserLanguage, auth.loginFacebook); +router.post('/api/v1/user/auth/social', i18n.getUserLanguage, auth.loginSocial); module.exports = router; \ No newline at end of file diff --git a/views/static/login-modal.jade b/views/static/login-modal.jade index 1382914049..27e82df49e 100644 --- a/views/static/login-modal.jade +++ b/views/static/login-modal.jade @@ -3,11 +3,15 @@ script(id='modals/login.html', type='text/ng-template') button.close(type='button', ng-click='$close()') × h4.modal-title=env.t('loginAndReg') .modal-body(ng-controller='AuthCtrl') - a(href='#', ng-click='fbLogin()') - img(src='/bower_components/habitrpg-shared/img/facebook-login-register.jpeg', alt=env.t('loginFacebookAlt')) - - //can we add in google auth? I like google auth - h3=env.t('or') + a.zocial.facebook(alt=env.t('loginFacebookAlt'), ng-click='socialLogin("facebook")')=env.t('loginFacebookAlt') + //-ul.list-inline + li + a.zocial.icon.facebook(alt=env.t('loginFacebookAlt'), ng-click='socialLogin("facebook")') + li + a.zocial.icon.googleplus(alt="Google", ng-click='socialLogin("google")') Google+ + li + a.zocial.icon.twitter(alt="Twitter", ng-click='socialLogin("twitter")') Twitter + hr ul.nav.nav-tabs li.active a(data-toggle='tab',data-target='#login-tab')=env.t('login')