Question

我有一个html文件，其中包含google plus＆＃39;按钮。

<div class="sub_but"> <a href="javascript:void(0)" onclick="googlepluslogin();" class="googleplus_but" ><i class="fa fa-google-plus"></i> Sign in with Google Plus</a> </div>

当我点击此按钮时，我需要获取用户名，电子邮件＆＃39;来自谷歌，我需要通过ajax传递这些数据。

从谷歌获取数据我发现了这段代码 developers.google

代码

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

  <body>

    <div class="container">

      <form class="form-signin" role="form">
            <div id="status"></div>
        <h2 class="form-signin-heading">User Registration</h2>

        <label for="inputFname" class="sr-only">First Name</label>
            <input type="text" id="inputFullname" class="form-control" placeholder="First Name" required autofocus>

        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required >

        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>

        <div class="row"> 
            <div class="col-md-6">
                <button class="btn btn-sm btn-primary btn-block" type="submit">Sign Up</button>
            </div>
            <div class="col-md-6">
                <button class="g-signin " 
                    data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email"
                    data-requestvisibleactions="http://schemas.google.com/AddActivity"
                    data-clientId="MY-ID-GIVEN"
                    data-accesstype="offline"
                    data-callback="mycoddeSignIn"
                    data-theme="dark"
                    data-cookiepolicy="single_host_origin">
                </button>
            </div>
        </div>


      </form>

    </div> <!-- /container -->
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

    <script type="text/javascript">
    var gpclass = (function(){

    //Defining Class Variables here
    var response = undefined;
    return {
        //Class functions / Objects

        mycoddeSignIn:function(response){
            // The user is signed in
            if (response['access_token']) {

                //Get User Info from Google Plus API
                gapi.client.load('plus','v1',this.getUserInformation);

            } else if (response['error']) {
                // There was an error, which means the user is not signed in.
                //alert('There was an error: ' + authResult['error']);
            }
        },

        getUserInformation: function(){
            var request = gapi.client.plus.people.get( {'userId' : 'me'} );
            request.execute( function(profile) { 
                var email = profile['emails'].filter(function(v) {
                    return v.type === 'account'; // Filter out the primary email
                })[0].value;
                var fName = profile.displayName;
                $("#inputFullname").val(fName);
                $("#inputEmail").val(email);
            });
        }

    }; //End of Return
    })();

    function mycoddeSignIn(gpSignInResponse){
        gpclass.mycoddeSignIn(gpSignInResponse);
    }
    </script>

但我不知道在onClick().

中使用此功能

提前致谢。

Answer 1

您可以将Google登录流程附加到自定义按钮，而不是编写自己的onClick处理程序。

auth2 = gapi.auth2.init({
    client_id: '<YOUR_CLIENT_ID>.apps.googleusercontent.com',
    cookiepolicy: 'single_host_origin',
    scope: '<additional_scopes>'
});

element = document.querySelector('.googleplus_but');

auth2.attachClickHandler(element, {},
  function(googleUser) {
    console.log('Signed in: ' + googleUser.getBasicProfile().getName();
  }, function(error) {
    console.log('Sign-in error', error);
  }
);

有关详细信息，请参阅the relevant parts in the docs。

使用带有onClick（）

1 个答案: