jquery - how to add google sign-in oauth to my website? -


i want add google sign-in in website, created google developer console client id , found official tutorial here https://developers.google.com/identity/sign-in/web/sign-in shows how done, did same way tutorial shows here nothing, mean button doesn't appears in browser when run code.

here code:

 <!doctype html>  <html lang="en">  <head>  <title>login google account using javascript codexworld</title>   <meta name="google-signin-client_id" content="921258372597-t5jrb0e9p4ivstp9mfi972lhcvfcuo59.apps.googleusercontent.com">  <script src="jquery.min.js"></script>  <script src="https://apis.google.com/js/client:platform.js?onload=renderbutton"     async defer></script>  <style>  .profile{  border: 3px solid #b7b7b7;  padding: 10px;  margin-top: 10px;  width: 350px;  background-color: #f7f7f7;  height: 160px;   }  .profile p{margin: 0px 0px 10px 0px;}  .head{margin-bottom: 10px;}  .head a{float: right;}  .profile img{width: 100px;float: left;margin: 0px 10px 10px 0px;}  .prodetails{float: left;}  </style>  <script>  function onsuccess(googleuser) {  var profile = googleuser.getbasicprofile();  gapi.client.load('plus', 'v1', function () { var request = gapi.client.plus.people.get({     'userid': 'me' }); //display user details request.execute(function (resp) {     var profilehtml = '<div class="profile"><div class="head">welcome '+resp.name.givenname+'! <a href="javascript:void(0);" onclick="signout();">sign out</a></div>';     profilehtml += '<img src="'+resp.image.url+'"/><div class="prodetails"><p>'+resp.displayname+'</p><p>'+resp.emails[0].value+'</p><p>'+resp.gender+'</p><p>'+resp.id+'</p><p><a href="'+resp.url+'">view google+ profile</a></p></div></div>';     $('.usercontent').html(profilehtml);     $('#gsignin').slideup('slow'); });  });  }   function onfailure(error) {  alert(error);  }  function renderbutton() {  gapi.signin2.render('gsignin', { 'scope': 'profile email', 'width': 240, 'height': 50, 'longtitle': true, 'theme': 'dark', 'onsuccess': onsuccess, 'onfailure': onfailure  });  }  function signout() {  var auth2 = gapi.auth2.getauthinstance();  auth2.signout().then(function () { $('.usercontent').html(''); $('#gsignin').slidedown('slow');  });  }  </script>  </head>  <body>  <div id="gsignin"></div>  <div class="usercontent"></div>  <div class="divid" style="background:#ddd;height:30px;width:30px;">                </div>  </body>  </html> 

instant of <div id="gsignin"></div> please try use <div class="g-signin2" data-onsuccess="onsignin"></div> should work well.


Comments

Popular posts from this blog

amazon web services - S3 Pre-signed POST validate file type? -

c# - Check Keyboard Input Winforms -