Question

基本上我正在尝试在我的网站上使用谷歌登录，并且通过我的研究，我在这里找到了谷歌的官方教程https://developers.google.com/identity/sign-in/web/sign-in，在本教程中，它通过添加g-signin2 div标签来表示将自动创建带有文本和图像的整个按钮，但在我的代码中，我甚至没有创建div本身

这是我的代码：

<html>
<head>
<meta name="googlesigninclient_id" content="818358372597-t5jrb0e9p4ivstp9mfi972lhcvfcuo59.apps.googleusercontent.com">

<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail());
}
</script>
</head>
</body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
</body>
<html>

我发现这个教程codexworld.com/login-with-google-account-using-javascript在我的计算机上不起作用，虽然我使用的是最新版本的chrome firefox和opera，但当我跑的时候与https://jsfiddle.net/h6q9vr2s/相同的确切代码似乎工作得非常完美。

这是教程的来源

<!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="JquerySock.js"></script>
<script src="https://apis.google.com/js/client:platform.js?onload=renderButton" async defer></script>
<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>
<!-- HTML for render Google Sign-In button -->
<div id="gSignIn"></div>
<!-- HTML for displaying user details -->
<div class="userContent"></div>

<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>
 </body>
 </html>

Answer 1

您将使用相应服务（Google，Facebook，Twitter）的API，或者如果您计划添加它，也可能是OpenID。一些链接：

http://code.google.com/apis/accounts/docs/OpenID.html

https://developers.facebook.com/docs/authentication/

http://dev.twitter.com/pages/auth

http://openid.net/add-openid/

另请看这里。 SO上已经存在几个类似的问题，请查看右侧的相关问题。

Answer 2

<html>
<head>
<meta name="google-signin-client_id" content="818358372597-t5jrb0e9p4ivstp9mfi972lhcvfcuo59.apps.googleusercontent.com">

<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer></script>
<script>

function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail());
}
</script>
</head>
</body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
</body>
<html>

google-signin-client_id至googlesigninclient_id重命名

似乎缺少

如何在我的网站上使用google登录？

2 个答案: