Fatal编程技术网
  • html/
  • 试图简单地实现google+；登录按钮HTML

试图简单地实现google+；登录按钮HTML

html button google-plus

试图简单地实现google+；登录按钮HTML,html,button,google-plus,Html,Button,Google Plus,我正在尝试在我的网站中实现google+登录按钮！使用HTML，我不知道为什么按钮本身不起作用。我遵照这些指示： 这就是我目前所拥有的（我最初找到了登录和注销按钮的代码，但决定只使用google+API） 我应该把代码放在哪里 function signinCallback(authResult) { if (authResult['status']['signed_in']) { // Update the app to reflect a signed in user

我正在尝试在我的网站中实现google+登录按钮！使用HTML，我不知道为什么按钮本身不起作用。我遵照这些指示：

这就是我目前所拥有的（我最初找到了登录和注销按钮的代码，但决定只使用google+API）

我应该把代码放在哪里

function signinCallback(authResult) {
  if (authResult['status']['signed_in']) {
    // Update the app to reflect a signed in user
    // Hide the sign-in button now that the user is authorized, for example:
    document.getElementById('signinButton').setAttribute('style', 'display: none');
  } else {
    // Update the app to reflect a signed out user
    // Possible error values:
    //   "user_signed_out" - User is signed-out
    //   "access_denied" - User denied access to your app
    //   "immediate_failed" - Could not automatically log in the user
    console.log('Sign-in state: ' + authResult['error']);
  }
}
我是不是错过了一个听众或者什么的？？谢谢你

<!DOCTYPE html>
<html>
<head>
<script src="https://apis.google.com/js/client:platform.js" async defer></script>
</head>
<body>
<!---<input type="button"  value="Login" onclick="login()" />
<input type="button"  value="Logout" onclick="logout()" />--->

 <span id="signinButton">
  <span
    class="g-signin"
    data-callback="signinCallback"
    data-clientid="805034040388-erokn7fetmrl9id1romu3o75m7tbnpqp.apps.googleusercontent.com"
    data-cookiepolicy="single_host_origin"
    data-requestvisibleactions="http://schema.org/AddAction"
    data-scope="https://www.googleapis.com/auth/plus.login">

  </span>

</span>



<div id="profile"></div>
<script type="text/javascript">


function logout()
{
    gapi.auth.signOut();
    location.reload();
}
function login() 
{
  var myParams = {
    'clientid' : 'PUTYOUR_CLIENT_ID.apps.googleusercontent.com',
    'cookiepolicy' : 'single_host_origin',
    'callback' : 'loginCallback',
    'approvalprompt':'force',
    'scope' : 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read'
  };
  gapi.auth.signIn(myParams);
}

function loginCallback(result)
{
    if(result['status']['signed_in'])
    {
        var request = gapi.client.plus.people.get(
        {
            'userId': 'me'
        });
        request.execute(function (resp)
        {
            var email = '';
            if(resp['emails'])
            {
                for(i = 0; i < resp['emails'].length; i++)
                {
                    if(resp['emails'][i]['type'] == 'account')
                    {
                        email = resp['emails'][i]['value'];
                    }
                }
            }

            var str = "Name:" + resp['displayName'] + "<br>";
            str += "Image:" + resp['image']['url'] + "<br>";
            str += "<img src='" + resp['image']['url'] + "' /><br>";

            str += "URL:" + resp['url'] + "<br>";
            str += "Email:" + email + "<br>";
            document.getElementById("profile").innerHTML = str;
        });

    }

}
function onLoadCallback()
{
    gapi.client.setApiKey('PUT_YOUR_KEY');
    gapi.client.load('plus', 'v1',function(){});
}

    </script>

<script type="text/javascript">
      (function() {
       var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
       po.src = 'https://apis.google.com/js/client.js?onload=onLoadCallback';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
     })();
</script>

</body>
</html>


函数注销（）
{
gapi.auth.signOut（）；
location.reload（）；
}
函数登录（）
{
var myParams={
“clientid”：“PUTYOUR_CLIENT_ID.apps.googleusercontent.com”，
'cookiepolicy'：'single_host_origin'，
“回调”：“loginCallback”，
“批准提示”：“强制”，
'范围'：'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read'
};
gapi.auth.signIn（myParams）；
}
函数loginCallback（结果）
{
如果（结果['status']['signed_in']）
{
var request=gapi.client.plus.people.get(
{
“userId”：“我”
});
请求执行（功能（resp）
{
var电子邮件=“”；
如果（回复[“电子邮件]）
{
对于（i=0；i”；
str+=“Image:+resp['Image']['url']+”
”；
str+=“
”；
str+=“URL:+resp['URL']+”
”；
str+=“电子邮件：”+Email+“
”；
document.getElementById（“profile”）.innerHTML=str；
});
}
}
函数onLoadCallback（）
{
gapi.client.setApiKey（'PUT_YOUR_KEY'）；
load（'plus'，'v1'，function（）{}）；
}
（功能（）{
var po=document.createElement（'script'）；po.type='text/javascript'；po.async=true；
po.src=https://apis.google.com/js/client.js?onload=onLoadCallback';
var s=document.getElementsByTagName（'script'）[0]；s.parentNode.insertBefore（po，s）；
})();
我在控制台中看到的错误是：

找不到名为“signinCallback”的回调函数

您没有在此处使用函数：data callback=“signinCallback” 在您的文档中，它就在下面：

函数符号回调（authResult）{
如果（authResult['status']['signed_in']）{
//更新应用程序以反映已登录的用户
//现在用户已获得授权，请隐藏“登录”按钮，例如：
document.getElementById（'signinButton'）.setAttribute（'style'，'display:none'）；
}否则{
//更新应用程序以反映已注销的用户
//可能的错误值：
//“用户已注销”-用户已注销
//“拒绝访问”-用户拒绝访问您的应用
//“立即\u失败”-无法自动登录用户
log（'登录状态：'+authResult['error']）；
}

}
我让它在本地主机上工作。 请确保您遵循了该链接中的正确步骤。 尤其是第一步

完成第一步后，您必须注意两大细节：

  • 无论您在那里添加了什么生产URL，这些URL都将可用于您的按钮。如果您有一个主机，请添加它，否则我希望您可以使用本地主机服务器（wamp、xampp等）运行代码
  • 客户端ID
    • 现在，如果您在客户ID的特定生产URL上运行，这是一段有效的代码（请注意在下面的代码中添加正确的客户ID）

    
谷歌+登录按钮演示
html，正文{边距：0；填充：0；}
#登录按钮{
填充物：5px；
}
#oauth2在{margin:0；padding:0；}之前的结果
.hide{display:none；}
.show{display:block；}
var loginFinished=函数（authResult）{
如果（authResult）{
var el=document.getElementById（'oauth2-results'）；
var标签=“”；
toggleDiv（'oauth2-results'）；
如果（authResult['status']['signed_in']）{
标签='用户授权访问：'；
gapi.auth.setToken（authResult）；
}否则{
标签='拒绝访问：'+authResult['error']；
}
el.innerHTML=
标签+“
    ”+
//JSON.stringify在IE8中不起作用。
“{
    ”+
“id_标记”：“+authResult['id_标记']+”，
    +
““访问令牌”：“+authResult['access\u-token']+”，
    ”+
““状态”：“+authResult['state']+”，
    ”+
““expires_in”：“+authResult['expires_in']+'，
    ”+
““错误”：“+authResult['error']+”，
    ”+
““错误描述”：“+authResult['error\u description']+”，
    ”+
““authUser”：“+authResult['authUser']+”，
    ”+
““状态”：{”+'
    ”+
“谷歌登录”：“+authResult['status']['google谷歌登录']+'，
    ”+
“方法”：“+authResult['status']['method']+'，
    ”+
““已登录”：“+authResult['status']['signed_in']+'”
    ”+
“}
    ”+
“}
    ”；
toggleDiv（“登录按钮”）；
}否则{
document.getElementById（'oauth2-results'）.innerHTML=
“空authResult”；
}
};
函数切换DIV（id）{
var div=document.getElementById（id）；
if（div.getAttribute（'class'）=='hide'）{
div.setAttribute（'class'，'show'）；
}否则{
div.setAttribute（'class'，'hide'）；
}
}
    是的，我不知道在我的代码中应该在哪里包含此内容