2015-04-23 20 views
6

Bir web sitesine bir Google Oturum Açma Düğmesi eklemek için çalışıyorum. bir "özel" butonuna signin2.render() kullanılarakGoogle API Giriş Yap Düğmesi: Temel v. Özel

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

ve:

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

Ben karşılaşmak ediyorum sorun olduğunu docs, Google iki seçenek, bir "temel" butonuna sunuyor iki düğme farklı davranış sergiler. Her iki düğmeyle oturum açarsam, oturum açma durumunu göstermek için düğmenin "başlığı", "Oturum Aç" dan "İmzalı" olarak değişir. Ancak, şimdi sayfayı yenilediğimde, temel düğme "İmzalı" başlığını saklı tutarken, özel düğme başlığını "Oturum Aç" olarak değiştirirken, oturum açma durumunun sayfadan değiştiğini (yanlış) önerdiği anlamına gelir. yenileyin.

elle çalıştırarak tarayıcı konsoluna oturum açma durum sonrası yenileme kontrol edin:

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

Ben bir geri dönüş olarak true olsun, yenileme gerçekten statüsünde oturum değiştirmediğini gösteren , düğmenin başlığındaki değişikliğin aksine.

Bu yüzden sorum şu: Özel düğmeyi temel düğme gibi davranacak şekilde nasıl alabilirim, böylece başlığının yenilemesi değişmez mi? Hoşlandığım temel düğmenin bir başka (ilgili, varsayalım) davranışı, düğmenin "başlatılması" geri çağrısının her sayfa yüküne (kullanıcı oturum açmışsa) çağrılırken, özel düğme bunu yapmaz. Bu nedenle, özel düğmedeki bu davranışı, temel düğmeninkiyle eşleştirmek istiyorum. Herhangi bir öneri çok takdir edilecektir!


ben şöyle bir görünüm oluşturmak için geçiyorum parametreleri:

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

cevap

7

Eğer düğmeye geçiyoruz params verebilir misiniz? JS konsolunda herhangi bir hata olmadığını ve 400/403/404/4xx isteğinin olmadığını onaylayabilir misiniz?

Bu işlevi aşağıdaki kodu kullanarak test ettim ve gayet iyi çalışıyor gibi görünüyor (YOUR_CLIENT_ID değerini gerçek client_id ile değiştirmeniz gerekiyor).

<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> 

Düzenleme: kafasının meta etiketi olarak bildirme baz kapsamı en iyi çözümdür.

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

Teşekkürler, bu istenen şekilde çalışır. Kodum, kapsamları da dahil olmak üzere, düğüme geçtiğim parametrelerden farklıdır (yukarıya bakın). Bu davranışları neden değiştiriyor? Bu kapsamları ekleyemiyorum ve ayrıca yenileme yoluyla düğme başlığını koruyabilir miyim? Burada bir mockup var: [http://bmudd.github.io/signin/index.html](http://bmudd.github.io/signin/index.html) –

+1

Bu, Google tarafında bir hatadır. Bu arada, geçici çözüm 'a eklemektir. –

+0

Aslında, her zaman 'profil e-postası' gerektiriyorsa, yalnızca meta etiketleri kullanmanız sizin için daha iyi bir çözüm olmalıdır (signIn çağrılarında ayrı bir kapsam parametresi eklemenize gerek yoktur). –

İlgili konular