在沒有 class="g-signin2" div 的情況下使用 google-signin 時如何使用 GoogleAuth.then()

Question

基於對這個問題的回答，我有這個代碼，它使用谷歌登錄而不使用帶有g-signin2樣式的 div：

<html>
<head>
<meta name="google-signin-client_id" content="APP_CLIENT_ID">
</head>
<body>
  <div  id="my-signin2"></div>
    <a href="#" onclick="signOut();">Sign out</a>
  <script>
    function onSuccess(googleUser) {
      console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
    }
    function onFailure(error) {
      console.log(error);
    }
    function renderButton() {
      gapi.signin2.render('my-signin2', {
        'scope': 'profile email',
        'width': 240,
        'height': 50,
        'longtitle': true,
        'theme': 'dark',
        'onsuccess': onSuccess,
        'onfailure': onFailure
      });
    }

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

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

但是，我想使用GoogleAuth.then(onInit, onFailure)以便我知道 lib 初始化何時完成，我可以決定更新我的視圖。 我也無法添加任何要在登錄完成時通知的偵聽器。

問題是在使用上述代碼或類引用創建按鈕之前， gapi.auth2是未定義的。 似乎沒有這兩個步驟中的任何一個，我都無法調用gapi.auth2.getAuthInstance()來設置偵聽器或獲得通知我何時完成 init 的承諾。

我的問題是我想在創建按鈕之前初始化以查看是否需要創建登錄按鈕。

Answer 1

我在類似區域的另一個問題回答了這個問題：如何在沒有登錄按鈕的情況下初始化 Google 登錄？

答案是不要使用 platform.js 而是使用 api.js 並加載 auth2：

<html lang="en">
  <head>
    <script src="https://apis.google.com/js/api.js"></script>    
    <script type="text/javascript">
        function onSignIn(googleUser) {
            console.log( "signedin");
            // Useful data for your client-side scripts:
            var profile = googleUser.getBasicProfile();
            console.log("Name: " + profile.getName());
        };

        gapi.load('auth2', function() {
            gapi.auth2.init({
                client_id: "REPLACE_WITH_YOUR_ID",
                scope: "profile email" // this isn't required
            }).then(function(auth2) {
                console.log( "signed in: " + auth2.isSignedIn.get() );  
                auth2.isSignedIn.listen(onSignIn);
                var button = document.querySelector('#signInButton');
                button.addEventListener('click', function() {
                  auth2.signIn();
                });
            });
        });
    </script>
  </head>
  <body>
    <div id="signInButton"><img src="IMAGE_FILE" /></div>
  </body>
</html>

Answer 2

為了獲得gapi.auth2您首先需要加載它。

gapi.load('auth2', function() {
  // continuation
  gapi.auth2.init();
});

platform.js 基本上加載 api.js + .signin2命名空間。 .signin2命名空間可讓您呈現按鈕和小部件。 但是如果你想要細粒度的控制，我不建議你使用它。

.signin2作用是

檢測類g-signin2並呈現按鈕
在指定元素上渲染按鈕
單擊時調用登錄
根據用戶的登錄狀態用字符串呈現按鈕

在沒有 class="g-signin2" div 的情況下使用 google-signin 時如何使用 GoogleAuth.then()

問題描述

2 個解決方案

解決方案1
2 2016-03-14 15:25:31

解決方案2
0 2016-03-14 14:03:01

在沒有 class=&quot;g-signin2&quot; div 的情況下使用 google-signin 時如何使用 GoogleAuth.then()

問題描述

2 個解決方案

解決方案1 2 2016-03-14 15:25:31

解決方案2 0 2016-03-14 14:03:01

在沒有 class="g-signin2" div 的情況下使用 google-signin 時如何使用 GoogleAuth.then()

解決方案1
2 2016-03-14 15:25:31

解決方案2
0 2016-03-14 14:03:01