3

我是 Js 的初学者，我在 google devs 上多次检查 Google + 登录。我得到了我的 id 等。按钮现在做什么，它打开了一个谷歌窗口，但窗口中没有出现任何内容并关闭。我想要什么：如果接受条件等，人们就会建立联系。如果没有，请返回索引。如果成功，我想在我的谷歌电子邮件中获取用户的电子邮件。

请查看我的代码：

 (JS in head)

 <head>
 <script type="text/javascript">
 function signinCallback(authResult) {
 if (authResult['access_token']) {
  Successfully authorized;
  // Hide the sign-in button now that the user is authorized, for example:
  document.getElementById('signinButton').setAttribute('style', 'display: none');
 } else if (authResult['error']) {
   // There was an error.
   // Possible error codes:
   //   "access_denied" - User denied access to your app
   //   "immediate_failed" - Could not automatially log in the user
   console.log('There was an error: ' + authResult['error']);
   }
  }
  </script>

  <script type="text/javascript">
   function disconnectUser(access_token) {
    var revokeUrl = 'https://accounts.google.com/o/oauth2/revoke?token=' +
    access_token;

  // Perform an asynchronous GET request.
  $.ajax({
  type: 'GET',
  url: revokeUrl,
  async: false,
  contentType: "application/json",
  dataType: 'jsonp',
  success: function(nullResponse) {
  // Do something now that user is disconnected
  // The response is always undefined.
  },
  error: function(e) {
  // Handle the error
  // console.log(e);
  // You could point users to manually disconnect if unsuccessful
  //https://plus.google.com/apps
  }
 });
}
 // Could trigger the disconnect on a button click
 $('#revokeButton').click(disconnectUser);
</script>

</head>

<body>
<span id="signinButton">
 <span
class="g-signin"
data-callback="signinCallback"
data-clientid="id" (I got mine, it is not the problem)
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-scope="https://www.googleapis.com/auth/plus.login">
 </span>
</span>

<!-- Place this asynchronous JavaScript just before your </body> tag -->
<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:plusone.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 })();
</script>

</body>

oh i saw i've got a </div> before the </body> maybe it cause problem, i'll try to 
put the </div> before the script, then </body>. 

This is the url of google devs , Google + Sign-in button for the web :  
https://developers.google.com/+/web/signin/

Thanks in advance for help!!
4

1 回答 1

2

谷歌官方文档

为了将来参考，这里是Google Developers 网站上的官方文档。网站上甚至还有一个Javascript 示例。

Javascript 示例和 JSFiddle

这是一个 javascript 示例（和同一示例的 jsfiddle）无耻地取自 Google 开发者网站。（请注意，jsfiddle 确实有效，因为需要更新 clientId）

将此异步 JavaScript 放在您的</body>标记之前：

  <link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
  <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:plusone.js?onload=render';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
  })();

  function render() {
    gapi.signin.render('customBtn', {
      //'callback': 'signinCallback',
      'clientid': '841077041629.apps.googleusercontent.com',
      'cookiepolicy': 'single_host_origin',
      'requestvisibleactions': 'http://schemas.google.com/AddActivity',
      'scope': 'https://www.googleapis.com/auth/plus.login'
    });
  }
  </script>

以下是示例中使用的一些样式：

  <style type="text/css">
    #customBtn {
      display: inline-block;
      background: #dd4b39;
      color: white;
      width: 165px;
      border-radius: 5px;
      white-space: nowrap;
    }
    #customBtn:hover {
      background: #e74b37;
      cursor: hand;
    }
    span.label {
      font-weight: bold;
    }
    span.icon {
      background: url('/+/images/branding/btn_red_32.png') transparent 5px 50% no-repeat;
      display: inline-block;
      vertical-align: middle;
      width: 35px;
      height: 35px;
      border-right: #bb3f30 1px solid;
    }
    span.buttonText {
      display: inline-block;
      vertical-align: middle;
      padding-left: 35px;
      padding-right: 35px;
      font-size: 14px;
      font-weight: bold;
      /* Use the Roboto font that is loaded in the <head> */
      font-family: 'Roboto',arial,sans-serif;
    }
  </style>

在回调中，您将在成功登录时隐藏gSignInWrapper元素：

  <div id="gSignInWrapper">
    <span class="label">Sign in with:</span>
    <div id="customBtn" class="customGPlusSignIn">
      <span class="icon"></span>
      <span class="buttonText">Google</span>
    </div>
  </div>

究竟发生了什么？认证。

该按钮触发OAuth 2.0 登录流程。了解 OAuth 2.x 可能对您有所帮助。这是维基百科的文章。

于 2013-10-18T17:31:20.680 回答