Question

-1

Use custom image for google signin button

rated 0 times [ 0] [ 1] / answers: 1 / hits: 18550 / 9 Years ago, wed, june 10, 2015, 12:00:00

I want to provide users a facility to sign in with google. However, I want to use my image(only image, no css) as sign in with google button. I am using the following code:

<div id=mySignin><img src=images/google.png alt=google/></div>

I am also using gapi.signin.render function as mentioned on google developer console. The code is:

<script src=https://apis.google.com/js/client:platform.js type=text/javascript></script>

 <script>

  function render(){

    gapi.signin.render(mySignIn, { 

 // 'callback': 'signinCallback',

  'clientid': 'xxxx.apps.googleusercontent.com', 

  'cookiepolicy': 'single_host_origin', 

  'requestvisibleactions': 'http://schema.org/AddAction',

  'scope': 'profile'

});

  }

The problem is that google signin popup is not opening and I cannot figure out how to solve it. Please suggest. Thanks in advance.

  <script type=text/JavaScript>

  /**

   * Handler for the signin callback triggered after the user selects an account.

   */

    function onSignInCallback(resp) {

    gapi.client.load('plus', 'v1', apiClientLoaded);

  }



  /**

   * Sets up an API call after the Google API client loads.

   */

  function apiClientLoaded() {

    gapi.client.plus.people.get({userId: 'me'}).execute(handleEmailResponse);

  }



  /**

   * Response callback for when the API client receives a response.

   *

   * @param resp The API response object with the user email and profile information.

   */

  function handleEmailResponse(resp) {

    var primaryEmail;

    var jsonobj=JSON.stringify(resp);alert(jsonobj);

    var uid= jsonobj.id;

    var user_name1= jsonobj.name;

    for (var i=0; i < resp.emails.length; i++) {

      if (resp.emails[i].type === 'account') primaryEmail = resp.emails[i].value;

    }

    /* document.getElementById('response').innerHTML = 'Primary email: ' +

        primaryEmail + '<br/>id is: ' + uid; */

  }

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cristinadomoniquel

Add To Favorites

Follow

Total Points: 320

Total Questions: 94

Total Answers: 94

Location: Moldova

Member since Sat, Aug 6, 2022

2 Years ago

answered 9 Years ago keric · Accepted Answer

To use an image as your Google Sign-in button, you can use the GoogleAuth.attachClickHandler() function from the Google javascript SDK to attach a click handler to your image. Replace <YOUR-CLIENT-ID> with your app client id from your Google Developers Console.

HTML example:

<html>

  <head>

    <meta name=google-signin-client_id content=<YOUR-CLIENT-ID>.apps.googleusercontent.com.apps.googleusercontent.com>

  </head>

  <body>

    <image id=googleSignIn src=img/your-icon.png></image>

    <script src=https://apis.google.com/js/platform.js?onload=onLoadGoogleCallback async defer></script>

  </body>

</html>

Javascript example:

function onLoadGoogleCallback(){

  gapi.load('auth2', function() {

    auth2 = gapi.auth2.init({

      client_id: '<YOUR-CLIENT-ID>.apps.googleusercontent.com',

      cookiepolicy: 'single_host_origin',

      scope: 'profile'

    });



  auth2.attachClickHandler(element, {},

    function(googleUser) {

        console.log('Signed in: ' + googleUser.getBasicProfile().getName());

      }, function(error) {

        console.log('Sign-in error', error);

      }

    );

  });



  element = document.getElementById('googleSignIn');

}