Google+自定義登錄按鈕

當我使用內置的Google+登錄按鈕時，一切都按預期工作。 Google的OAuth調用是在彈出窗口中進行的，用戶接受或取消，然後調用回調。Google+自定義登錄按鈕

當我嘗試使用示例gapi.signin.render方法自定義我的按鈕時，會進行Google調用，但立即調用回調。

我是一位試圖爲前端開發人員提供POC的服務器端開發人員。我只知道足夠的Javascript是危險的。有人可以告訴我爲什麼gapi.signin.render方法正在對授權進行異步調用，這會在用戶點擊彈出窗口中的任何內容之前調用回調？或者，請在下面的第二個示例中幫助我更正代碼，以便僅在用戶單擊OAuth Google窗口中的接受/取消後纔會調用回調。在第二種選擇中，請告訴我如何更改內置的Google+登錄按鈕的文本。

，工程的代碼（內置，非定製的Google+登錄按鈕）：

<SCRIPT TYPE="text/javascript"> 
    /** 
    * Asynchronously load the Google Javascript file. 
    */ 
    (
    function() { 
     var po = document.createElement('script'); 
     po.type = 'text/javascript'; 
     po.async = true; 
     po.src = 'https://apis.google.com/js/client:plusone.js?onload=googleLoginCallback'; 
     var s = document.getElementsByTagName('script')[ 0 ]; 
     s.parentNode.insertBefore(po, s); 
    } 
    )(); 


    function googleLoginCallback(authResult) { 
     alert("googleLoginCallback(authResult): Inside."); 
    } 
</SCRIPT> 

<DIV ID="googleLoginButton" CLASS="show"> 
    <DIV 
     CLASS="g-signin" 
     data-accesstype="online" 
     data-approvalprompt="auto" 
     data-callback="googleLoginCallback" 
     data-clientid="[Google Client Id].apps.googleusercontent.com" 
     data-cookiepolicy="single_host_origin" 
     data-height="tall" 
     data-requestvisibleactions="http://schemas.google.com/AddActivity" 
     data-scope="https://www.googleapis.com/auth/userinfo.email" 
     data-theme="dark" 
     data-width="standard"> 
    </DIV> 
</DIV>

的gapi.signin.render代碼不工作：

<SCRIPT TYPE="text/javascript"> 
    /** 
    * Asynchronously load the Google Javascript file. 
    */ 
    (
    function() { 
     var po = document.createElement('script'); 
     po.type = 'text/javascript'; 
     po.async = true; 
     po.src = 'https://apis.google.com/js/client:plusone.js?onload=myGoogleButtonRender'; 
     var s = document.getElementsByTagName('script')[ 0 ]; 
     s.parentNode.insertBefore(po, s); 
    } 
    )(); 


    function myGoogleButtonRender(authResult) { 
     gapi.signin.render('myGoogleButton', { 
     'accesstype': 'online', 
     'approvalprompt': 'auto', 
     'callback': 'googleLoginCallback', 
     'clientid': '[Google Client Id].apps.googleusercontent.com', 
     'cookiepolicy': 'single_host_origin', 
     'height': 'tall', 
     'requestvisibleactions': 'http://schemas.google.com/AddActivity', 
     'scope': 'https://www.googleapis.com/auth/userinfo.email', 
     'theme': 'dark', 
     'width': 'standard' 
     }); 
    } 

    function googleLoginCallback(authResult) { 
     alert("googleLoginCallback(authResult): Inside."); 
    } 
</SCRIPT> 

<button id="myGoogleButton">Register with Google+</button>

來源

2013-05-21 user2406394

有沒有人試圖在我的文章中運行的例子？我至少想知道是否有人看到呈現的自定義按鈕的異步特性。如果沒有其他人有這個問題，那麼我知道這是一個不同的問題;但我正在關注Google的示例。提前致謝。 – user2406394

我剛剛發現（經過很多小時的試驗和錯誤），如果你在元素中放入render（）操作的任何東西，那麼render（）方法不會很好地渲染任何東西。它只是不會用普通的紅色按鈕替換你的內容。拿出來，紅色的按鈕顯示出來。 –

我想出了爲什麼代碼不能用於自定義按鈕。我有一個在Struts 2表單中定義的按鈕。顯然，代替傳統的責任鏈模式，點擊事件由一個處理器處理，Struts表單和Google API都在處理點擊。所以，我認爲Google gapi.signin.render調用對回調進行異步調用失敗，這是Struts表單試圖提交的。

要解決它，你可以：

移動Struts的形式外的按鈕（不是很優雅）
添加「的onclick =」返回false;」條款的按鈕

<button id="myGoogleButton" onclick="return false;">Register with Google+</button>
裹在像DIV 「按鈕」：

<DIV ID="myGoogleButton"> <SPAN CLASS="zocial googleplus">Register with Google+</SPAN> </DIV>

我希望這能解決別人的問題。我花了9天試圖弄清楚這一點。

來源

2013-05-30 17:57:02 user2406394

謝謝soooo！這讓我頭疼。 +1 – romualdr

Google+自定義登錄按鈕

回答

相關問題