登录使用Google Plus自定义图像按钮与onClick()

Signin using Google Plus custom image button with onClick()

本文关键字：按钮 onClick 图像 自定义 Google Plus 登录      更新时间：2023-09-26

我有一个html文件'signin with google plus'按钮。

<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>

当我点击这个，我需要得到'用户名，电子邮件'从谷歌，我需要通过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().

中使用此功能

您可以将Google Sign-in流程附加到您的自定义按钮上，而不是编写自己的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);
  }
);

详情请参阅文档中的相关部分

相关文章：