DevOps, CI/CD and Automation

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

Thanks. I will check the code from browser and will try to implement. Will you be able to share the code or upload in github.

Thanks

Vinoth

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

Hi John,

I have been tried with your given above steps, while I do Login for Google + am getting an error message as given below:-

" 400. That’s an error

Error: invalid_request

Invalid parameter value for redirect_uri: Missing authority: file:///D:/JETProjects/test/hybrid/www/index.html "

Please help me to fix on this.

Thanks for your understanding and co-operation.

Find the screenshot given below for your reference.

REGARDS,

IMRANKHAN K

Hi Imrankhan,

See this as a guide as somebody else that had your issue https://stackoverflow.com/questions/27640209/connecting-to-google-via-oauth-2-invalid-parameter-value-for-redirect-uri-m…

You need to specify a proper URL for google to redirect to, not a file location on your machine, so change it to be http://localhost:8383/test/hybrid/www.index.html

I've not implemented Google+ login myself before, but from that post it looks like you need to register that URL within the google API console as well

Thanks,

Andy

Hi,

Thanks for your reply and update. I have followed the steps and its working fine in web browser.

Let me know how does the redirect uri used for mobile hybrid, because when I try to use the same redirect uri after android build it was opening in external browser. Not in the app.

Please let me know is there any procedure for this to fix.

Thanks.

REGARDS,

IMRANKHAN K

Hi John,

I am able to login using Google+ as per your suggestion. Many Thanks. But I am facing challenges in connecting to my backend Application. Need your suggestion on doing it.  I have two backend application lets say for eg 1. Oracle Fusion,  2. Oracle EBS Application. Both application has a login service/API which provides token as response. My Question is how this token will be be shared to JET Application by hello.js.

As per my understanding JET Application request Authorization grant to google using hello.js and hello.js generates access token and returned back to JET which inturn sends back to Backend Application for subsequent resource request.

My question is how hello.js uses login service to generate a access token and send it back to JET. Your suggestion would be much  appreciated.

Thanks

Vinoth

Hi Everyone,

I have successfully enabled the signin option for Google+, Facebook & Windows and its working fine. But I need a help on Windows signin whereas it is authenticated through long.live.com but my request is it has to authenticate through login.microsoftonline.com.

I have tried with the url https://github.com/MrSwitch/hello.js/issues/470  but unable to modify. Let me know is any alternate solution to fix this authentication url for login.microsoftonline.com

Thanks in advance.

REGARDS

IMRANKHAN K