Google Login with Javascript

AndyCr15 · 24 Oct 2021 at 07:05

I have a little website I use with work, which I coded a few years back mainly with PHP, but now Google have changed how they auth logins and it's not up to scratch. I've done some searching and found a webpage that's given me some Javascript to do it -

Code:

<head>
  <title>Google Auth Demo</title>
  <meta name="google-signin-client_id" content="409998107623-1tqdn73ud4iuusp7f6cehlaoro3einrp.apps.googleusercontent.com">
  <script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
  <h1>Welcome to the Demo</h1>
  <div class="g-signin2" data-onsuccess="onSignIn"></div>
  <div id="content"></div>
</body>

 
<script>
    function onSignIn(googleUser) {
      // get user profile information
      console.log(googleUser.getBasicProfile());

      $userEmail = googleUser.getBasicProfile().getEmail();

      var element = document.querySelector('#content')
      element.innerText = $userEmail
    }
  </script>

This all works fine and will display my email if and when I log in. The button changes to 'Signed In' and everything. Very neat.

I also have code for checking if someone is logged in -

Code:

<script>
    function isUserSignedIn() {
    gapi.load('auth2', function() {
        var isSignedIn = auth2.isSignedIn.get()
        console.log('is signed in? ', isSignedIn)
        })
    }
</script>

I realise I'm kind of asking someone to do my homework for me and really I should do some Javascript classes and learn what's going on, but I wonder if it's simple enough someone can explain two things for me?

1) How do I use the 'check someone is logged in' at the top of certain pages and redirect them to the login page if they aren't?

2) From within the webpage, how do I reference the $userEmail from the JS script? Ideally I need to do this globally across the site. I think I used $_SESSION in the PHP parts?

(Bonus points for how I only allow a certain domain. I did have the code for that, I think I lost it now!)

Thanks for any help!

AndyCr15 · 24 Oct 2021 at 07:08

A quick Google, one suggestion for sharing variables, which I guess works across the site, is using cookies -

Add a cookie with the javascript variable you want to access.

document.cookie="profile_viewer_uid=1";

Then acces it in php via

$profile_viewer_uid = $_COOKIE['profile_viewer_uid'];

Will this work for me?

AndyCr15 · 27 Oct 2021 at 06:54

When I have some time, I will try the above... but anyone with knowledge able to offer up help? Thanks

ChroniC · 3 Nov 2021 at 15:32

Don't quote my exact code as working, as I often have to console log out some stuff to fine tune things. but you can use the function that you already have to redirect the user on certain pages. How you distinguish those pages is going to be up to you, I don't know what CMS or system your using for your HTML

Essentially you want an if statement looking for if the user is signed in is not equal to true or whatever the console.log outputs (yes, 1, whatever). If it is not then do the following. It would look something like this.

function isUserSignedIn() {
gapi.load('auth2', function() {
var isSignedIn = auth2.isSignedIn.get()
if(isSignedIn != true && window.location.pathname == '/demo/') {
window.location.href = "https://demo.com/login/";
}
})
}

AndyCr15 · 3 Nov 2021 at 20:13

Thanks. I think I had something similar and it told me gapi was not initiated or something similar?

I kind of have it working now, mainly using cookies...

ChroniC · 3 Nov 2021 at 21:26

AndyCr15 said:
Thanks. I think I had something similar and it told me gapi was not initiated or something similar?

I kind of have it working now, mainly using cookies...

Might need to be put in a document.ready() (assuming you have Jquery otherwise you have to use the Javascript method)
Or make sure the function is loaded after the Google script.