Question

我想在我的网站上添加谷歌登录，我创建了我的谷歌开发者控制台客户端ID，我在这里找到了一个官方教程https://developers.google.com/identity/sign-in/web/sign-in，它显示了它是如何完成的，我的教学方式也是这样，但是这里我什么都没得到，我的意思是当我运行代码时，按钮不会出现在我的浏览器中。

这是代码：

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

我唯一得到的是两个控制台错误： 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').

如何在网站上使用谷歌登录？

0 个答案: