为 google 登录按钮使用自定义图像

Question

我想为用户提供一种使用 google 登录的工具。但是，我想将我的图像（只有图像，没有 css）用作 "sign in with google" 按钮。我正在使用以下代码：

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

我也在使用 google 开发者控制台上提到的 gapi.signin.render 功能。代码是：

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

Answer 1

要将图像用作 "Google Sign-in" 按钮，您可以使用 Google javascript SDK 中的 GoogleAuth.attachClickHandler() 函数将点击处理程序附加到您的图像。将 <YOUR-CLIENT-ID> 替换为您 Google 开发者控制台中的应用程序客户端 ID。

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

Answer 2

对于那些来这里尝试解决按钮问题的人：下面的代码应该可以解决问题。

看起来 'callback' 方法似乎不起作用不确定这是否与 Vue 有关，因为我在 Vue 上构建它，或者 Google 改变了它，因为这是5 年前发布。无论如何，请使用下面的示例。

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

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


        }

将 'client_id' 更改为您的客户端 ID，将元素 ID 更改为您自定义的按钮 ID。

我希望这能为任何人节省时间！

另外：我最终使用了下面的代码，它更清晰：


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


}

为 google 登录按钮使用自定义图像

Use custom image for google signin button

javascript

google-api

google-signin