使用谷歌登录按钮的自定义图像

Question

使用谷歌登录按钮的自定义图像

A J*_*A J 3 javascript google-api google-login

我想为用户提供使用谷歌登录的工具.但是,我想使用我的图像(仅图像,没有css)作为"使用谷歌登录"按钮.我使用以下代码:

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

Run Code Online (Sandbox Code Playgroud)

我也使用谷歌开发者控制台上提到的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'
});
  }

Run Code Online (Sandbox Code Playgroud)

问题是谷歌登录弹出窗口没有打开,我无法弄清楚如何解决它.请建议.提前致谢.

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

JBa*_*zuk 10

要将图片用作"Google登录"按钮,您可以使用Google JavaScript SDK中的GoogleAuth.attachClickHandler()函数将点击处理程序附加到您的图片.替换<YOUR-CLIENT-ID>为您的Google Developers Console中的应用客户端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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，7 月前
查看次数：	7216 次
最近记录：	10 年，2 月前