Google Login in JET

I use a third party library called "hellojs" for providing multiple types of social login choices.  If you look at my personal website

http://dessertfirstproducts.com

(Click on Guest to see the pulldown)

You will see that you could login into the site using either Google+ or GitHub accounts.  You can do a source review from the browser tools if you want to see how I have that setup.

--jb

Hi Vinoth,

I just used examples that are out on the Internet to implement the code.  Nothing special in what I did over any other example.

Here is a good slide show that describes how hello.js works

A presentation of hello.js

and a blog on implementing it for another website

Google OAuth2 using Hello.js – Tech and Musings

One thing I did do, that would be JET specific, is that I tied in the session ID to the ojRouter "canEnter" event handler.  That is what stops anyone from getting to other pages on my website besides the Home page without being logged in.

I add hello.js to the main.js requirejs.config path object

....    'customElements': 'libs/webcomponents/CustomElements',    'proj4': 'libs/proj4js/dist/proj4-src',    'css': 'libs/require-css/css',    'hellojs': 'libs/hellojs/hello.all'  }

Then add it to the define block in appController.js

define(['ojs/ojcore', 'knockout', 'hellojs', 'ojs/ojrouter', 'ojs/ojknockout', 'ojs/ojarraytabledatasource'],        function (oj, ko, hello) {

Here is my full code from the appController.js file

            self.menuSelected = function (ui, event) {              if (ui.type === 'ojselect') {                switch (ui.currentTarget.id) {                  case 'inGoogle':                    self.logIn('google');                    break;                  case 'inGitHub':                    self.logIn('github');                    break;                  case 'out':                    self.logOut();                    break;                  default:                    console.log('default hit');                }              }            };                        // Router setup            self.router = oj.Router.rootInstance;                        self.router.configure({              'home': {label: 'Home', isDefault: true},              'family': {label: 'Family', canEnter: isAuthorized},              'code': {label: 'Code', canEnter: isAuthorized}            });            oj.Router.defaults['urlAdapter'] = new oj.Router.urlParamAdapter();                        // Authentication            self.authService = ko.observable('google');            self.userName = ko.observable('Guest');            self.avatar = ko.observable('css/images/avatar_24px.png');            self.profile = ko.observableArray([self.userName, self.avatar]);                                    self.logIn = function (network) {              self.authService(network);              hello(network).login().then(function () {                console.log('You are logged in using '+self.authService());                $('#nav1').ojNavigationList('refresh');              }, function (e) {                alert('Login error: ' + e.error.message);              });            };                        self.logOut = function () {              hello(self.authService()).logout();              self.router.go('home');              self.authenticated(false);              self.userName('Guest');              self.avatar('css/images/avatar_24px.png');              $('#menu1').ojMenu('refresh');              $('#nav1').ojNavigationList('refresh');              console.log('Logged Out of '+self.authService());            };            hello.init({              google: 'YOURKEY.apps.googleusercontent.com',              github: 'GITHUB-APP-KEY'            }, {redirect_uri: 'http://dessertfirstproductions.com/'});            hello.on('auth.login', function (auth) {              // Call user information, for the given network              hello(auth.network).api('me').then(function (r) {                self.authenticated(true);                self.userName(r.name);                self.avatar(r.thumbnail);                $('#menu1').ojMenu('refresh');                $('#nav1').ojNavigationList('refresh');                //self.router.go('home');              });            });

My website is currently based off of the JET v3.1.0 NavDrawer template, so all of the files would be the same as if you started from that template.  Yes, I need to update it. ;-)

The "isAuthorized" function that I use to determine if a person can go into the specific page on the website looks like:

            self.authenticated = ko.observable(false);                        function isAuthorized() {              if (localStorage.hello != "{}"){                self.authenticated(true);                return true;              } else {                self.authenticated(false);                //oj.Router.rootInstance.go('home');                return false;              }            }

This function could do a lot more of course.  I don't check to see who the logged in person is for instance.  I just check to see if they are logged in at all.

Hope that helps

--jb