为什么 Google 的 JS Client SDK 函数回调失败？

Question

我目前正处于学习 Google JS 客户端 SDK 工作原理的阶段，因为我的老板需要我学习如何将登录按钮集成到他的网站，以使人们能够通过 Google 进行身份验证。我正在测试自定义登录按钮的代码，带有一些附加功能（如退出按钮），在此过程中，我实际上从他们的网站复制/粘贴了代码。我先给你看代码，然后再解释问题，这样你就能明白代码哪里出错了：

<script src="https://apis.google.com/js/client.js?onload=init"></script>
<script type="text/javascript">
    var clientId = '{my client id here}'; // for web
    var apiKey = '{my api key here}';
    var scopes = 'profile email';

    function SignOut() {
        // I know, sloppy, but the signOut method from Google doesn't work.
        window.location = 'https://accounts.google.com/logout'; 

        // Additional code if necessary.
    };

    function makeApiCall() {
        gapi.client.load('plus', 'v1', function () {
            var request = gapi.client.plus.people.get({ 'userId': 'me' });
            request.execute(function (response) {
                var heading = document.createElement('h4');
                var image = document.createElement('img');
                image.src = response.image.url;
                heading.appendChild(image);
                heading.appendChild(document.createTextNode(response.displayName));
                document.getElementById('name').appendChild(heading);
                alert('User logged in.  makeApiCall() has executed.');
            })
        })

    };

    function init() {
        gapi.client.setApiKey(this.apiKey);
        window.setTimeout(checkAuth, 1);
        console.log('Up and ready to go.');
    };

    function checkAuth() {
        // Triggers when the page and the SDK loads.
        gapi.auth.authorize({ client_id: clientId, scope: scopes, immediate: true }, handleAuthResult);
    };

    function handleAuthClick(event) {
        // Triggers after a user click event to ensure no popup blockers interfere.
        gapi.auth.authorize({ client_id: clientId, scope: scopes, immediate: false }, handleAuthResult);
        return false;
    };

    function handleAuthResult(authResult) {
        var authorizeButton = document.getElementById('SignInBtn');
        var signoutButton = document.getElementById('SignOutBtn');

        if (authResult && !authResult.error) {
            var V = JSON.stringify(authResult);
            localStorage.setItem('GoogleAuthResult', V);
            console.log(V); // Just for testing...
            var authTimeout = (authResult.expires_in - 5 * 60) * 1000; setTimeout(checkAuth, authTimeout); // As recommended by a Google employee in a video, so that the token refreshes.
            authorizeButton.style.display = 'none'; // Switching between Sign In and Out buttons.
            signoutButton.style.display = 'inline-block';

            makeApiCall();

        } else {
            // Immediate:true failed so user is NOT signed in.
            // Make the Sign In button the one visible and prep it
            // so that it executes the Immediate:false after user click:
            authorizeButton.style.visibility = 'inline-block';
            authorizeButton.onclick = handleAuthClick;
            signoutButton.style.visibility = 'none';                
        }
    };
</script>

handleAuthClick 功能确实在按钮单击时运行，但是在将用户带到 Google 登录页面后，当该页面将我带回来时，浏览器有点闪烁handleAuthResult 函数不执行。因此，登录成功后页面没有任何变化；显示的按钮是登录按钮（注销按钮不可见），“名称”文本节点上没有显示任何信息。这发生在 Internet Explorer (11)、Firefox (39) 和 Chrome (44) 上。此外，它发生在我的笔记本电脑上（通过有线宽带直接连接到网络）和工作中（在 Active Directory 后面的 Windows 8.1 上）。

我开始怀疑，所以我开始刷新浏览器页面，在几次刷新后，由于脚本从头开始运行，immediate:true 再次触发，瞧：用户已连接并触发 API 调用。

因此，在我的笔记本电脑上，我将在 immediate:false 行的回调参数中被回调的函数更改为 init() 函数并解决了问题：一切从一开始就运行顺利结束。然而，这不是它应该的工作方式。我仍然不知道那条线是怎么回事。

今天早上，在我工作的计算机上（在 Active Directory 后面），该修复程序不起作用。我必须刷新页面几次，以便脚本从头开始运行，并且 immediate:true 触发识别用户的登录状态并在屏幕上显示正确的按钮。

关于为什么此回调失败的任何想法？

Answer 1

您需要在代码的第一部分定义您的 apiKey

var clientId = '{my client id here}'; // for web
var apiKey = '{my api key here}'

也许这就是问题所在。

Google ApiKeys