尝试简单地实现 google+ 登录按钮 HTML

Question

我正在尝试在我的网站中实现 google+ 登录按钮！使用 HTML，我不确定为什么按钮本身不起作用。我正在按照这些说明进行操作： https://developers.google.com/+/web/signin/add-button

这是我目前所拥有的（我最初找到登录和注销按钮的代码，但决定只使用 google+ API）

我应该把这段代码放在哪里？？

function signinCallback(authResult) {
  if (authResult['status']['signed_in']) {
    // 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');
  } 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']);
  }
}

我是不是漏掉了一个 onclicklistener 之类的东西？？谢谢！！！

<!DOCTYPE html>
<html>
<head>
<script src="https://apis.google.com/js/client:platform.js" async defer></script>
</head>
<body>
<!---<input type="button"  value="Login" onclick="login()" />
<input type="button"  value="Logout" onclick="logout()" />--->

 <span id="signinButton">
  <span
    class="g-signin"
    data-callback="signinCallback"
    data-clientid="805034040388-erokn7fetmrl9id1romu3o75m7tbnpqp.apps.googleusercontent.com"
    data-cookiepolicy="single_host_origin"
    data-requestvisibleactions="http://schema.org/AddAction"
    data-scope="https://www.googleapis.com/auth/plus.login">

  </span>

</span>



<div id="profile"></div>
<script type="text/javascript">


function logout()
{
    gapi.auth.signOut();
    location.reload();
}
function login() 
{
  var myParams = {
    'clientid' : 'PUTYOUR_CLIENT_ID.apps.googleusercontent.com',
    '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 str = "Name:" + resp['displayName'] + "<br>";
            str += "Image:" + resp['image']['url'] + "<br>";
            str += "<img src='" + resp['image']['url'] + "' /><br>";

            str += "URL:" + resp['url'] + "<br>";
            str += "Email:" + email + "<br>";
            document.getElementById("profile").innerHTML = str;
        });

    }

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

    </script>

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

</body>
</html>

Answer 1

我看到的控制台错误是：

Callback function named "signinCallback" not found

您没有使用这里的函数：data-callback="signinCallback" 在您的文档中它在下面：

function signinCallback(authResult) {
  if (authResult['status']['signed_in']) {
    // 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');
  } 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']);
  }
}

Answer 2

我让它在我的本地主机上运行。 请确保您遵循了 link 中的正确步骤。特别是 第一步 .

完成第一步后，你要注意两个大细节：

无论您在此处添加什么 Production URL，这些都可以用于您的按钮。如果您有主机，请添加它，否则我希望您可以运行您的代码使用本地主机服务器（wamp、xampp 等）。
客户端 ID

现在，如果您运行为您的客户端 ID URL 运行特定生产 URL（注意添加正确的以下代码中的客户端 ID）

<html>
<head>
  <title>Google+ Sign-in button demo</title>
  <style type="text/css">
  html, body { margin: 0; padding:0;}
  #signin-button {
   padding: 5px;
  }

  #oauth2-results pre { margin: 0; padding:0;}
  .hide { display: none;}
  .show { display: block;}
  </style>
  <script type="text/javascript">

  var loginFinished = function(authResult) {
    if (authResult) {
      var el = document.getElementById('oauth2-results');
      var label = '';
      toggleDiv('oauth2-results');
      if (authResult['status']['signed_in']) {
        label = 'User granted access:';
        gapi.auth.setToken(authResult);
      } else {
        label = 'Access denied: ' + authResult['error'];
      }
      el.innerHTML =
          label + '<pre class="prettyprint"><code>' +
          // JSON.stringify doesn't work in IE8.
          '{<br />' +
          '  "id_token" : "' + authResult['id_token'] +'",<br />' +
          '  "access_token" : "' + authResult['access_token'] + '",<br />' +
          '  "state" : "' + authResult['state'] + '",<br />' +
          '  "expires_in" : "' + authResult['expires_in'] + '",<br />' +
          '  "error" : "' + authResult['error'] + '",<br />' +
          '  "error_description" : "' + authResult['error_description'] + '",<br />' +
          '  "authUser" : "' + authResult['authuser'] + '",<br />' +
          '  "status" : {"' + '<br />' +
          '    "google_logged_in" : "' + authResult['status']['google_logged_in'] + '",<br />' +
          '    "method" : "' + authResult['status']['method'] + '",<br />' +
          '    "signed_in" : "' + authResult['status']['signed_in'] + '"<br />' +
          '  }<br />' +
          '}</code></pre>';
      toggleDiv('signin-button');
    } else {
      document.getElementById('oauth2-results').innerHTML =
          'Empty authResult';
    }
  };

  function toggleDiv(id) {
    var div = document.getElementById(id);
    if (div.getAttribute('class') == 'hide') {
      div.setAttribute('class', 'show');
    } else {
      div.setAttribute('class', 'hide');
    }
  }
  </script>
  <script src="https://plus.google.com/js/client:platform.js" type="text/javascript"></script>
</head>
<body>
  <div id="signin-button" class="show">
   <div class="g-signin" data-callback="loginFinished"
    data-approvalprompt="force"
    data-clientid="CLIENT_ID"
    data-requestvisibleactions="http://schema.org/CommentAction"
    data-cookiepolicy="single_host_origin"
    >
  </div>
  </div>

</body>
</html>

尝试简单地实现 google+ 登录按钮 HTML

Trying to simply implement the google+ sign in button HTML

html

button

google-plus