javascript - how to use google sign-in in a 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>
the thing 2 console errors says: cb=gapi.loaded_1:63 uncaught gapi.auth2.externallyvisibleerror: invalid cookiepolicy_.se @ cb=gapi.loaded_0:43uo @ cb=gapi.loaded_1:54ty @ cb=gapi.loaded_1:63_.hn @ cb=gapi.loaded_1:77h_ @ cb=gapi.loaded_1:102tw @ cb=gapi.loaded_1:106(anonymous function) @ client:platform.js?onload=renderbutton:34(anonymous function) @ client:platform.js?onload=renderbutton:11fa @ client:platform.js?onload=renderbutton:5b @ client:platform.js?onload=renderbutton:11f.(anonymous function) @ client:platform.js?onload=renderbutton:11c.(anonymous function) @ client:platform.js?onload=renderbutton:11(anonymous function) @ cb=gapi.loaded_1:1 cb=gapi.loaded_0:49
2. failed execute 'postmessage' on 'domwindow': target origin provided ('file://') not match recipient window's origin ('null').
Comments
Post a Comment