Lucy Lucy - 5 months ago 119
jQuery Question

Google Sign In Website Using Custom Text

I have implemented Google Sign In for my website by following the official tutorial of Google :
https://developers.google.com/identity/sign-in/web/sign-in

Using the above tutorial I'm getting the following button

Google signin

Now I'm trying to Change the text of the button from "Sign In" to "Connect with Google" But nothing is happening..

My Javascript code..

function onSignIn(googleUser) {

var profile = googleUser.getBasicProfile();
loginpassword = profile.getId();
loginemail = profile.getEmail();
};


HTML Code..

<div class="g-signin2" data-onsuccess="onSignIn">Connect with Google</div>


Any idea how to change the text? Even though I'm providing the client ID and the external link for platform.js file it's still not working..Please Help..

Answer

The platform.js library from google is rendering the button, along with the text.

In order to override it, you need to build your own custom button. From Google's example:

<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
  <script src="https://apis.google.com/js/api:client.js"></script>
  <script>
  var googleUser = {};
  var startApp = function() {
    gapi.load('auth2', function(){
      // Retrieve the singleton for the GoogleAuth library and set up the client.
      auth2 = gapi.auth2.init({
        client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
        cookiepolicy: 'single_host_origin',
        // Request scopes in addition to 'profile' and 'email'
        //scope: 'additional_scope'
      });
      attachSignin(document.getElementById('customBtn'));
    });
  };

  function attachSignin(element) {
    console.log(element.id);
    auth2.attachClickHandler(element, {},
        function(googleUser) {
          document.getElementById('name').innerText = "Signed in: " +
              googleUser.getBasicProfile().getName();
        }, function(error) {
          alert(JSON.stringify(error, undefined, 2));
        });
  }
  </script>
  <style type="text/css">
    #customBtn {
      display: inline-block;
      background: #4285f4;
      color: white;
      width: 190px;
      border-radius: 5px;
      white-space: nowrap;
    }
    #customBtn:hover {
      cursor: pointer;
    }
    span.label {
      font-weight: bold;
    }
    span.icon {
      background: url('{{path to your button image}}') transparent 5px 50% no-repeat;
      display: inline-block;
      vertical-align: middle;
      width: 42px;
      height: 42px;
      border-right: #2265d4 1px solid;
    }
    span.buttonText {
      display: inline-block;
      vertical-align: middle;
      padding-left: 42px;
      padding-right: 42px;
      font-size: 14px;
      font-weight: bold;
      /* Use the Roboto font that is loaded in the <head> */
      font-family: 'Roboto', sans-serif;
    }
  </style>
  </head>

Once you've set the styles and the Javascript, you would call the button itself through HTML, at which point you can specify the text:

  <body>
  <!-- In the callback, you would hide the gSignInWrapper element on a
  successful sign in -->
  <div id="gSignInWrapper">
    <span class="label">Sign in with:</span>
    <div id="customBtn" class="customGPlusSignIn">
      <span class="icon"></span>
      <span class="buttonText">Google</span>
    </div>
  </div>
  <div id="name"></div>
  <script>startApp();</script>
</body>
</html>

Note that you must comply with Google's branding guidelines.