Question

我目前正处于Google JS Client 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函数不执行。因此，成功登录后页面中没有任何变化;显示的按钮是登录按钮（注销按钮不可见），'name'textNode上不显示任何信息。这种情况发生在Internet Explorer（11），Firefox（39）和Chrome（44）上。此外，它发生在我的笔记本电脑上（通过有线宽带直接连接到网络）和工作（在Active Directory后面的Windows 8.1上）。

我开始想知道所以我开始刷新浏览器页面，经过几次刷新后，由于脚本从头开始运行，所以立即：true再次触发并且voilá：用户已连接且API调用触发器。

因此，在我的笔记本电脑上，我将正在调用的函数（在立即：false行的回调参数中）更改为 init（）函数并修复了问题：一切从一开始就顺利运行结束然而，这不是它的工作方式。我仍然不知道那条线是怎么回事。

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

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

Answer 1

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

import logging

from django.http import HttpResponse
from django.shortcuts import get_object_or_404

import django.contrib.auth

from rest_framework import viewsets
from rest_framework.response import Response

import myapp.serializers as serializers
import myapp.models as models


# Get an instance of a logger
logger = logging.getLogger('mylogger')

class CategoryViewSet(viewsets.ModelViewSet):
    queryset = models.Category.objects.all()
    serializer_class = serializers.CategorySerializer

class UserViewSet(viewsets.ModelViewSet):
    queryset = django.contrib.auth.models.User.objects.all()
    serializer_class = serializers.ShortUserSerializer

class ProfileViewSet(viewsets.ModelViewSet):
    queryset = models.Profile.objects.all()
    serializer_class = serializers.ProfileSerializer

class ListingViewSet(viewsets.ModelViewSet):
    logger.info('inside ListingSerializerViewSet')
    queryset = models.Listing.objects.all()
    serializer_class = serializers.ListingSerializer

也许就是这个问题。

Google ApiKeys

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

1 个答案: