Forum Stats

  • 3,873,027 Users
  • 2,266,497 Discussions
  • 7,911,407 Comments

Discussions

Google Login in JET

Vinoth Kumar Devaraja
Vinoth Kumar Devaraja Member Posts: 45
edited Jan 4, 2018 8:58AM in Oracle JET

  How to create a JET with sign on based Google. And how it can be propagated to Backend Application REST Service.

Thanks

Vinoth

Vinoth Kumar Devaraja

Answers

  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,878 Employee
    edited Dec 28, 2017 12:49PM

    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

    Vinoth Kumar DevarajaVinoth Kumar Devaraja
  • Vinoth Kumar Devaraja
    Vinoth Kumar Devaraja Member Posts: 45
    edited Dec 28, 2017 9:17PM

    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

  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,878 Employee
    edited Dec 29, 2017 1:23PM

    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

  • IMRANKHAN K
    IMRANKHAN K Member Posts: 17
    edited Jan 3, 2018 8:08AM

    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.

    pastedImage_7.png

    pastedImage_10.png

    REGARDS,

    IMRANKHAN K

  • Andrew Bennett
    Andrew Bennett Member Posts: 240 Silver Badge
    edited Jan 3, 2018 8:24AM

    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

  • IMRANKHAN K
    IMRANKHAN K Member Posts: 17
    edited Jan 3, 2018 9:40AM

    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

  • Vinoth Kumar Devaraja
    Vinoth Kumar Devaraja Member Posts: 45
    edited Jan 3, 2018 10:19PM

    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

  • IMRANKHAN K
    IMRANKHAN K Member Posts: 17
    edited Jan 4, 2018 8:58AM

    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