Использовать пользовательское изображение для кнопки входа в Google

Я хочу предоставить пользователям возможность войти в систему с помощью Google. Однако я хочу использовать свое изображение (только изображение, без css) в качестве кнопки «Войти с помощью Google». Я использую следующий код:

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

Я также использую функцию gapi.signin.render, как указано в консоли разработчика Google. Код:

<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'
});
  }

Проблема в том, что всплывающее окно входа в Google не открывается, и я не могу понять, как это решить. Пожалуйста, предложите. Заранее спасибо.

  <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; */
  }

javascript google-api google-login
person A J    schedule 10.06.2015    source источник

Ответы (2)


arrow_upward
14
arrow_downward

To use an image as your "Google Sign-in" button, you can use the GoogleAuth.attachClickHandler() из Google javascript SDK, чтобы прикрепить обработчик кликов к вашему изображению. Замените <YOUR-CLIENT-ID> идентификатором клиента вашего приложения из Google Developers Console.

Пример HTML:

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

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');
}
person JBaczuk    schedule 07.09.2015

arrow_upward
1
arrow_downward

Для тех, кто приходит сюда, пытаясь заставить кнопку работать: приведенный ниже код должен помочь.

Похоже, что метод «обратного вызова» не работает, я не уверен, связано ли это с Vue, поскольку я создаю его на Vue, или Google изменил его, поскольку это было опубликовано 5 лет назад. В любом случае, используйте пример ниже.

        window.onload = function(){
            var GoogleUser = {}
          gapi.load('auth2', function() {
            var auth2 = gapi.auth2.init({
              client_id: '<client-unique>.apps.googleusercontent.com',
              cookiepolicy: 'single_host_origin',
              scope: 'profile'
            });

          auth2.attachClickHandler(document.getElementById('googleSignup'), {},
            function(googleUser) {
                console.log('Signed in: ' + googleUser.getBasicProfile().getName());
              }, function(error) {
                console.log('Sign-in error', error);
              }
            );
          });


        }

Измените «client_id» на идентификатор вашего клиента, а идентификатор элемента — на идентификатор вашей пользовательской кнопки.

Я надеюсь, что это экономит время для всех!

Плюс: в итоге я использовал код ниже, который понятнее:


window.onload = function(){
    
    gapi.load('auth2', function() {
    
        var auth2 = gapi.auth2.init({
          client_id: '<client_id>.apps.googleusercontent.com',
          cookiepolicy: 'single_host_origin',
          scope: 'profile email'
        });
    
      document.getElementById('googleSignup').addEventListener('click', function() {
        auth2.signIn().then(() => {
            var profile = auth2.currentUser.get().getBasicProfile();
           ... profile functions ...
          }).catch((error) => {
            console.error('Google Sign Up or Login Error: ', error)
          });
    
        });;
    
    
    });


}
person yongju lee    schedule 09.07.2020