CODEWITHSUNDEEP
javascriptgoogle-apigoogle-plus
Mario
Mario

Reputation: 817

Sign-in with google account on website

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?

Upvotes: 0

Views: 4137

Answers (2)

Harikesh Yadav
Harikesh Yadav

Reputation: 71

<!--                    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>

Upvotes: 0

EdvinasJ
EdvinasJ

Reputation: 61

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>

Upvotes: 3

Related Questions