1

I want to add google sign-in in my website, i created my google developer console client ID and i found an official tutorial here https://developers.google.com/identity/sign-in/web/sign-in which shows how its done, i did the same way tutorial shows but here i get nothing, i mean the button doesn't appears in my browser when i run the code.

here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Login with Google Account using JavaScript by 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 the 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 only thing i get is two console errors which 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 to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').

Rachid
  • 66
  • 6
jacky
  • 199
  • 1
  • 4
  • 15
  • Did you check: http://stackoverflow.com/questions/21710842/google-api-in-javascript – Kapitula Alexey Aug 29 '16 at 09:04
  • i have my "Authorized javascript orgin to http://localhost:8080 and my Authorized redirect URI is http://localhost:8080/signin.jsp, now if am doing something wrong you tell me – jacky Aug 29 '16 at 09:11
  • `The target origin provided ('file://') does not match [...]`. This kind of issue usually occurs when you open your webpage locally (like when you simply double click an HTML file) and not via a web server. Please verify that all your resources are loaded via your web server and not via file system. – konqi Aug 30 '16 at 07:24

0 Answers0