将Google+登录按钮添加到网站

Question

我正在尝试使用 Google+ 向我的网站添加 HTML 登录按钮，但我遇到了一些问题。

我

已按照Google在此页面上提供的说明进行操作，但是我停留在第5步-处理登录。

我不确定如何以及在何处输入以下代码。

Javascript：

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 1

signinCallback只是您在按钮的data-callback属性中命名的Javascript函数：

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

因为它只是一个普通功能，所以您可以将其放置在页面上的任何位置（不要忘记将其包装在 <script></script> 中。

通常的做法是将 Javascript 放在文档的底部，以确保在尝试访问它们之前已加载引用的任何元素。