Clever Geek Handbook

Google login - googleUser not defined

I have been following google login tutorials to create a login system and I am at the point where I have a login button that loads a widget to select a login. After clicking this function, you need to download this function:

function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail());
}

However, as soon as I select an account and register, nothing happens. In the developer console, when I type "googleUser", it just says:

Unprepared ReferenceError: googleUser is not defined

Here is my code:

<!doctype html>
<html>
<head>
  <script src="https://apis.google.com/js/platform.js" async defer></script>
  <meta name="google-signin-client_id" content="451815931731-u24ino5uecga1arf65814fd72201fcmu.apps.googleusercontent.com">
  
  <title>S6C Admin Panel</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">

  <script src="../bower_components/webcomponentsjs/webcomponents.js"></script>

  <link rel="import" href="imports.html">

  <link rel="stylesheet" href="css/signin.css">
</head>

<body unresolved>
  <core-toolbar>
    <span flex>S6C Admin Panel</span>
    <core-icon-button onclick="takeBack()" icon="arrow-back">Back to S6C Website</core-icon-button>
  </core-toolbar>
  <img id="logo" src="../s6clogo.jpg"></img>
  <center>  
    <div class="g-signin2" data-onsuccess="onSignIn"></div>
  </center>
  <script>
    function takeBack(){
      window.location.href = "http://s6c.org";
    }
    
    function onSignIn(googleUser) {
      var profile = googleUser.getBasicProfile();
      console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
      console.log('Name: ' + profile.getName());
      console.log('Image URL: ' + profile.getImageUrl());
      console.log('Email: ' + profile.getEmail());
    }
  </script>
</body>
</html>
Run code


Note that running snippet doesn't work

+3


source to share


2 answers


I had the same problem and with the help of JarosΕ‚aw I was able to solve this problem.

Decision:



function onSignIn() {
  const googleUser = gapi.auth2.getAuthInstance().currentUser.get();
  const profile = googleUser.getBasicProfile();

  // do stuff here
}
+2


source


Try adding additional meta:

<meta name="google-signin-client_id" content="451815931731-u24ino5uecga1arf65814fd72201fcmu.apps.googleusercontent.com">
<meta name="google-signin-cookiepolicy" content="single_host_origin" />
<meta name="google-signin-requestvisibleactions" content="https://schema.org/AddAction" />
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/plus.login" />


and make sure in your Google Api Manager, in Credential, in OAuth 2.0 client IDs, check your authorized JavaScript sources, make sure you enter your original site your page is running on. if you are developing on localhost add http://127.0.0.1 as your script source.

0


source






More articles:


All Articles