0

I just started using google API, so i feel like i am walking in the dark.

What i want to do:

It is a very common feature. I want my site to have a Google account Sign-In Button using javascipt, and make sure that a given gmail is valid and maybe extract some basic information from the account.


What do i found:

I have followed the instructions from here:

https://developers.google.com/+/web/signin/javascript-flow .

and copied the code in the last steps of the instructions. I have entered my CLIENT_ID that i got when i followed the instructions in the 'tutorial' but my button just doesn't work. I also searched for some examples and are quite different from the code i found in the google site. I feel that i am missing something (actually i think that i am doing something stupid :) ).


And Here is my code

<html>
  <head>

 <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"> 

<meta name="google-signin-clientid" content="'MY_CLIENT_ID'.apps.googleusercontent.com" />
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/plus.login" />
<meta name="google-signin-requestvisibleactions" content="http://schema.org/AddAction" />
<meta name="google-signin-cookiepolicy" content="single_host_origin" />
<script src="https://apis.google.com/js/client:platform.js" async defer></script>


<script type="text/javascript">

  function signinCallback(authResult) {
    if (authResult['status']['signed_in']) {
      // Update the app to reflect a signed in user
      // Hide the sign-in button now that the user is authorized, for example:
      document.getElementById('signinButton').setAttribute('style', 'display: none');
    } else {
      // Update the app to reflect a signed out user
      // Possible error values:
      //   "user_signed_out" - User is signed-out
      //   "access_denied" - User denied access to your app
      //   "immediate_failed" - Could not automatically log in the user
      console.log('Sign-in state: ' + authResult['error']);
    }
  }


 function render() {
  alert("1");
   // Additional params including the callback, the rest of the params will
   // come from the page-level configuration.
   var additionalParams = {
     'callback': signinCallback
   };
   alert("2");
   // Attach a click listener to a button to trigger the flow.
   var signinButton = document.getElementById('signinButton');
   signinButton.addEventListener('click', function() {
     gapi.auth.signIn(additionalParams); // Will use page level configuration
     alert("3");
   });
 }
</script>

  </head>

  <body>

    <button id="signinButton">Sign in with Google</button>

  </body>


</html>

I have added some alerts, but nothing pops-up and did not used anywhere the 'client secret' password or the JavaScript origins. Also, in the place of 'MY_CLIENT_ID' is actually my client ID.


I don't know if this makes any difference, but my site is not yet on a server. Just working locally (with internet of course!)

Do you know what i got wrong?

2 Answers 2

3

Check your console, maybe there are some errors.

Try this example from https://google-developers.appspot.com/+/demos/signin_demo_trigger:

<html>
<head>
  <title>Google+ Sign-in button demo: JavaScript flow</title>
  <style type="text/css">
  html, body { margin: 0; padding:0;}
  #signin-button {
   padding: 5px;
  }

  #oauth2-results pre { margin: 0; padding:0; width: 600px;}
  .hide { display: none;}
  .show { display: block;}
  </style>

  <script type="text/javascript">

  var loginFinished = function(authResult) {
  if (authResult) {
    console.log(authResult);
    var el = document.getElementById('oauth2-results');
    var label = '';
    toggleDiv('oauth2-results');
    if (authResult['status']['signed_in']) {
      label = 'User granted access:';
      gapi.auth.setToken(authResult);
    } else {
      label = 'Access denied: ' + authResult['error'];
    }
    el.innerHTML =
        label + '<pre class="prettyprint"><code>' +
        // JSON.stringify doesn't work in IE8.
        '{<br />' +
        '  "id_token" : "' + authResult['id_token'] +'",<br />' +
        '  "access_token" : "' + authResult['access_token'] + '",<br />' +
        '  "state" : "' + authResult['state'] + '",<br />' +
        '  "expires_in" : "' + authResult['expires_in'] + '",<br />' +
        '  "error" : "' + authResult['error'] + '",<br />' +
        '  "error_description" : "' + authResult['error_description'] + '",<br />' +
        '  "authUser" : "' + authResult['authuser'] + '",<br />' +
        '  "status" : {"' + '<br />' +
        '    "google_logged_in" : "' + authResult['status']['google_logged_in'] + '",<br />' +
        '    "method" : "' + authResult['status']['method'] + '",<br />' +
        '    "signed_in" : "' + authResult['status']['signed_in'] + '"<br />' +
        '  }<br />' +
        '}</code></pre>';
  } else {
    document.getElementById('oauth2-results').innerHTML =
        'Empty authResult';
  }
  };

  function toggleDiv(id) {
    var div = document.getElementById(id);
    if (div.getAttribute('class') == 'hide') {
      div.setAttribute('class', 'show');
    } else {
      div.setAttribute('class', 'hide');
    }
  }
  var options = {
    'callback' : loginFinished,
    'approvalprompt' : 'force',
    'clientid' : '841077041629.apps.googleusercontent.com',
    'requestvisibleactions' : 'http://schema.org/CommentAction http://schema.org/ReviewAction',
    'cookiepolicy' : 'single_host_origin'
  };

  function startFlow(){
    toggleDiv('startFlow');
    gapi.auth.signIn(options);
  }
  </script>
  <script src="https://apis.google.com/js/client:platform.js" type="text/javascript"></script>
</head>
<body>
  <div id="startFlow">
    <a class="button button-blue" href="javascript:startFlow();">Click me</a>
    to trigger the sign-in flow with
    <a href="/+/web/signin/reference#gapi.auth.signIn"
    target="_parent"><code>gapi.auth.signIn()</code></a>
  </div>
  <div id="oauth2-results" class="hide"></div>
  <div style="font: 12px sans-serif, Arial; margin-left: 0.5em; margin-top: 0.5em"><a href="javascript:document.location.reload();">Reload the example</a> or <a
    href="/+/demos/signin_demo_trigger" target="_blank">open in a new window</a></div>
</body>
</html>
0
0

<!--                    Sign in with Google+  only work on working website  -->

<html lang="en">
  <head>
    <script src="https://apis.google.com/js/platform.js?onload=renderApp" async defer></script>
  </head>
  <body>
    <div class="g-signin2" id="customBtn">Sign in with Google+</div>
    <script>
      function onSignIn(googleUser) {
        // Useful data for your client-side scripts:
        var profile = googleUser.getBasicProfile();
        console.log("ID: " + profile.getId()); // Don't send this directly to your server!
        console.log('Full Name: ' + profile.getName());
        console.log('Given Name: ' + profile.getGivenName());
        console.log('Family Name: ' + profile.getFamilyName());
        console.log("Image URL: " + profile.getImageUrl());
        console.log("Email: " + profile.getEmail());

        // The ID token you need to pass to your backend:
        var id_token = googleUser.getAuthResponse().id_token;
        console.log("ID Token: " + id_token);
      };
    </script>
    
    <script>
    
  var renderApp = function() {
      //  GOOGLE_CLIENT_ID  should be create from  https://developers.google.com/identity/sign-in/web/devconsole-project   
    gapi.load('auth2', function(){
      auth2 = gapi.auth2.init({
        client_id: 'GOOGLE_CLIENT_ID.apps.googleusercontent.com',
        cookiepolicy: 'single_host_origin',
      });
      attachSignin('customBtn'); //Function called  for click 
    });
  };
 
  function attachSignin(customBtn) {
        auth2.attachClickHandler(customBtn, {}, onSignIn, function(error) {
          console.log(JSON.stringify(error, undefined, 2));
        });
  }
  </script>
    
  </body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.