Google एपीआई साइन इन बटन: बेसिक वी। कस्टम

मैं किसी वेबसाइट पर Google साइन-इन बटन जोड़ने पर काम कर रहा हूं।Google एपीआई साइन इन बटन: बेसिक वी। कस्टम

https://developers.google.com/identity/sign-in/web/sign-in

और एक "कस्टम" बटन signin2.render() का उपयोग कर:

https://developers.google.com/identity/sign-in/web/build-button

समस्या मैं का सामना कर रहा है कि है डॉक्स में गूगल ने दो विकल्प, एक "बुनियादी" बटन प्रदान करता है दो बटन अलग व्यवहार प्रदर्शित करते हैं। यदि मैं किसी भी बटन से साइन इन करता हूं, तो साइन-इन स्थिति को प्रतिबिंबित करने के लिए बटन का "शीर्षक" "साइन इन" से "साइन इन" में बदल जाता है। हालांकि, अगर मैं अब पृष्ठ को रीफ्रेश करता हूं, तो मूल बटन "साइन इन" शीर्षक को बरकरार रखता है, जबकि कस्टम बटन अपने शीर्षक को "साइन इन" में बदल देता है, सुझाव देता है (गलत तरीके से) कि पृष्ठ के माध्यम से साइन-इन स्थिति बदल गई है ताज़ा करें।

मैं मैन्युअल रूप से चलाकर ब्राउज़र कंसोल में साइन-इन स्थिति के बाद ताज़ा चेक करते हैं:

auth = gapi.auth2.getAuthInstance() 
auth.isSignedIn.get()

मैं वापसी के रूप में true मिलता है, दिखा रहा है कि ताज़ा वास्तव में स्थिति में साइन-बदल नहीं किया था , बटन के शीर्षक में बदलाव के विपरीत।

तो मेरा सवाल है: मैं मूल बटन की तरह व्यवहार करने के लिए कस्टम बटन कैसे प्राप्त कर सकता हूं, ताकि इसका शीर्षक रीफ्रेश पर नहीं बदला जा सके? मुझे लगता है कि मूल बटन के एक और (संबंधित, मुझे लगता है) व्यवहार यह है कि प्रत्येक पृष्ठ लोड (यदि उपयोगकर्ता साइन इन है) पर बटन का "ऑनस" कॉलबैक कॉल किया जाता है, जबकि कस्टम बटन ऐसा नहीं करता है। इसलिए मैं मूल बटन के मिलान के लिए कस्टम बटन पर इस व्यवहार को भी बदलना चाहता हूं। किसी भी सुझाव के लिए बहुत आभार होगा!

मापदंडों मैं इस प्रकार नज़र प्रस्तुत करना गुजर रही है:

function renderButton() { 
    gapi.signin2.render('mybutton', { 
    'scope': 'profile email', 
    'width': 125, 
    'height': 40, 
    'longtitle': false, 
    'theme': 'light', 
    'onsuccess': onSuccess, 
    'onfailure': onFailure 
    }); 
}

स्रोत

2015-04-23 EB Mudd

आप पैरामीटर है कि आप बटन को गुजर रहे हैं प्रदान कर सकता है? क्या आप पुष्टि कर सकते हैं कि जेएस कंसोल में कोई त्रुटि नहीं है और कोई 400/403/404/4xx अनुरोध नहीं हैं?

मैंने निम्नलिखित कोड का उपयोग करके इस कार्यक्षमता का परीक्षण किया है और ऐसा लगता है कि यह पूरी तरह से ठीक काम करता है (आपको अपने वास्तविक क्लाइंट_आईडी के साथ YOUR_CLIENT_ID को प्रतिस्थापित करना होगा)।

<head> 
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID"> 
</head> 
<body> 
    <script> 
    function onSuccess(googleUser) { 
     console.log('onSuccess!'); 
    } 

    function onCustomSuccess(googleUser) { 
     console.log('onCustomSignIn!'); 
    } 

    function signOut() { 
     var auth2 = gapi.auth2.getAuthInstance(); 
     auth2.signOut().then(function() { 
     console.log('User signed out.'); 
     }); 
    } 

    function onLoad() { 
     gapi.signin2.render('custom_signin_button', { 
     'onsuccess': onCustomSuccess 
     }); 
    } 
    </script> 

    <div class="g-signin2" data-onsuccess="onSuccess"></div> 
    <div id="custom_signin_button"></div> 
    <a href="#" onclick="signOut();">Sign out</a> 

    <script src="https://apis.google.com/js/platform.js?onload=onLoad" async defer></script> 
</body> 
</html>

संपादित करें: सिर का मेटा टैग के रूप में घोषणा आधार गुंजाइश सबसे अच्छा समाधान है।

<meta name="google-signin-scope" content="profile email">

स्रोत

2015-04-23 20:24:18

धन्यवाद, यह वांछित के रूप में काम करता है। मेरा कोड उन मापदंडों में भिन्न है जो मैं बटन पर जा रहा हूं (ऊपर देखें), स्कॉप्स समेत। यह व्यवहार क्यों बदलता है? क्या मैं इन स्कॉप्स को नहीं जोड़ सकता और रीफ्रेश के माध्यम से बटन शीर्षक भी जारी रख सकता हूं? यहां एक मॉकअप है: [http://bmudd.github.io/signin/index.html ](http://bmudd.github.io/signin/index.html) –

यह Google पक्ष पर बग है। इस बीच वर्कअराउंड 0 मेटा नाम = "google-signin-scope" content = "प्रोफ़ाइल ईमेल"> में जोड़ना है। –

असल में, जब तक आपको हमेशा 'प्रोफाइल ईमेल' की आवश्यकता होती है, केवल मेटा टैग का उपयोग करके आपके लिए बेहतर समाधान होना चाहिए (साइनइन कॉल में अलग-अलग स्कोप पैराम जोड़ने की आवश्यकता नहीं है)। –

Google एपीआई साइन इन बटन: बेसिक वी। कस्टम

उत्तर

संबंधित मुद्दे