使用Google Plus自定義圖像按鈕登錄onClick（）

我有一個HTML文件'登錄與谷歌加'按鈕。使用Google Plus自定義圖像按鈕登錄onClick（）

<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().

由於使用本的。

來源

2015-07-13 V P

而不是編寫自己的onClick處理程序，您可以將Google登錄流程附加到您的自定義按鈕。

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瞭解詳情。

來源

2015-07-13 09:48:11 Scarygami

感謝您的回覆。你可以在我的HTML中顯示它嗎？ –

使用Google Plus自定義圖像按鈕登錄onClick（）

回答

相關問題