Google+登錄自定義按鈕並致電

Question

我正在使用谷歌登錄API獲取用戶信息。 我的Java腳本代碼是：

<script src="https://apis.google.com/js/client:plusone.js?onload=signinCallback"></script> 
<script type="text/javascript"> 
var email = ""; 
var Id = ""; 
function signinCallback(authResult) { 

    if (authResult['status']['signed_in'] && authResult['status']['method'] == 'PROMPT') { 
     // Update the app to reflect a signed in user 
     // Hide the sign-in button now that the user is authorized, for example: 
     document.getElementById('signinButton').setAttribute('style', 
       'display: none'); 
     gapi.client.load('plus', 'v1', function() { 

      var request = gapi.client.plus.people.get({ 
       'userId' : 'me' 
      }); 
      request.execute(function(resp) { 
       if (resp['emails']) { 
        for (var i = 0; i < resp['emails'].length; i++) { 
         if (resp['emails'][i]['type'] == 'account') { 
          email = resp['emails'][i]['value']; 
         } 
        } 
       } 
       Id = resp.id; 
      }); 
     }); 
    } else { 
     // Update the app to reflect a signed out user 
     // Possible error values: 
     // "user_signed_out" - User is signed-out 
     // "access_denied" - User denied access to your app 
     // "immediate_failed" - Could not automatically log in the user 
     console.log('Sign-in state: ' + authResult['error']); 
    } 
} 
    </script> 

而我的HTML代碼：

<span id="signinButton"> <span class="g-signin" data-callback="signinCallback" data-   clientid="****************************.apps.googleusercontent.com" 
       data-cookiepolicy="single_host_origin" data-scope="https://www.googleapis.com/auth/userinfo.email"> </span> 

我的問題是它需要很長的時間來加載在按鈕谷歌的標誌，所以我想改變自定義按鈕 我想要解決這個問題。 謝謝..

Answer 1

我不熟悉客戶端流程，但這與您要做的事情很接近。
您可以根據需要自定義外觀，但Google要求您遵循一些guidelines。

的Javascript：

function render_google_btn() { 
    gapi.signin.render('custom_google_btn', { 
     'redirecturi': "postmessage", 
     'accesstype': "offline", 
     'callback':  "signinCallback", 
     'scope':  "https://www.googleapis.com/auth/userinfo.email", 
     'clientid':  "****************.apps.googleusercontent.com", 
     'cookiepolicy': "single_host_origin" 
    }); 
} 

function google_login_callback (authResult) { 
    if (authResult['status']['signed_in'] && authResult['status']['method'] == 'PROMPT') { 
     // Hide the sign-in button now that the user is authorized, for example: 
     document.getElementById('gSignInWrapper').setAttribute('style', 'display: none'); 
     gapi.client.load('plus', 'v1', function() { 

      var request = gapi.client.plus.people.get({ 
       'userId' : 'me' 
      }); 
      request.execute(function(resp) { 
       if (resp['emails']) { 
        for (var i = 0; i < resp['emails'].length; i++) { 
         if (resp['emails'][i]['type'] == 'account') { 
          email = resp['emails'][i]['value']; 
         } 
        } 
       } 
       Id = resp.id; 
      }); 
     }); 

    } else if (authResult['error']) { 
     // There was an error. 
     // Possible error codes: 
     // "access_denied" - User denied access to your app 
     // "immediate_failed" - Could not automatially log in the user 
     console.log('Sign-in state: ' + authResult['error']); 
    } 
} 

CSS：

#custom_google_btn { 
    display: block; 
    color: #737373; 
    border-radius: 3px; 
    white-space: nowrap; 
    width: 235px; 
    margin: 0 auto; 
    border-width: 1px; 
    border-style: solid; 
    border-color: #D7D7D7; 
    border-color: rgba(155, 155, 155, 0.3); 
} 
#custom_google_btn:hover { 
    background: #F7F7F7; 
    cursor: pointer; 
    border-style: inset; 
} 
span.icon { 
    background: url('https://developers.google.com/+/images/branding/button-gplus.png') transparent 2px 50% no-repeat; 
    background-size: 40px; 
    display: inline-block; 
    vertical-align: middle; 
    width: 45px; 
    height: 40px; 
    border-right: #DADADA 1px solid; 
} 
span.buttonText { 
    display: inline-block; 
    vertical-align: middle; 
    padding-left: 25px; 
    padding-right: 30px; 
    font-size: 15px; 
    font-weight: bold; 
    font-family: 'Roboto',arial,sans-serif; 
}      

HTML：

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css"> 
<div id="gSignInWrapper"> 
    <div id="custom_google_btn" class="g-signin customGPlusSignIn"> 
     <span class="icon"></span> 
     <span class="buttonText">Sign in with Google</span> 
    </div> 
</div> 

<div id="g_results"></div> 

Answer 2

function login() { 
    var myParams = { 
     'clientid' : '******************************', 
     'cookiepolicy' : 'single_host_origin', 
     'callback' : 'loginCallback', 
     'approvalprompt':'force', 
     'scope' : 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read' 
    }; 

    gapi.auth.signIn(myParams); 
} 

function loginCallback(result) { 
    if(result['status']['signed_in']) { 
     var request = gapi.client.plus.people.get({ 
      'userId': 'me' 
     }); 

     request.execute(function (resp) { 
      var email = ''; 
      if(resp['emails']) { 
       for(i = 0; i < resp['emails'].length; i++) { 
        if(resp['emails'][i]['type'] == 'account') { 
         email = resp['emails'][i]['value']; 
        } 
       } 
      } 

      var Name = resp['displayName']; 
      var Email = email ; 
      alert(Email); 
     }); 
    } 
} 

function onLoadCallback() { 
    gapi.client.setApiKey('*****************'); 
    gapi.client.load('plus', 'v1',function(){}); 
} 

(function() { 
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; 
    po.src = 'https://apis.google.com/js/client.js?onload=onLoadCallback'; 
    //po.src = 'https://apis.google.com/js/client.js?onload=onLoadCallback'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); 
})(); 

// google plus登錄結束