未定义gap与requirejs一起使用时会出现错误

gapi is not defined error comes when using with requirejs

本文关键字：错误 gap requirejs 一起未定义更新时间：2023-09-26

我正在尝试加载带有requireJS的google API文件，但收到的错误为，有人认为我可以轻描淡写地说，GP文件是在谷歌调用之前加载的

"gp.js:23未捕获引用错误：未定义漏洞"

这是的代码

gp.js文件

function logout()
{
    gapi.auth.signOut();
    location.reload();
}
function login() 
{
    var myParams = {
        'clientid' : '900278902057-ppqm358qrhki089danipqguj3i4ir70i.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.me https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile'
    };
    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>";
            str += "DOB:" + resp['birthday'] + "<br>";
            str += "Gender:" + resp['gender'] + "<br>";
            document.getElementById("profile").innerHTML = str;
        });
    }
}
function onLoadCallback()
{
    gapi.client.setApiKey('AIzaSyBy08qpAjR9U1nKaZ5H1MmwTuthspQPNqY');
    gapi.client.load('plus', 'v1',function(){});
}

以及requirejs文件-main.js

require.config({
    shim: {
        'jquery': {
            exports: '$'
        },
/*        'backbone': {
            deps: ['jquery', 'underscore'],
        },*/
        'googleplus' : {
            deps: ['jquery'],
            exports: 'gapi'
        },

    },
    paths: {
        'jquery': '//code.jquery.com/jquery-1.11.0.min',
        'googleplus': 'https://apis.google.com/js/plus.js?onload=init',
    }
})
require(['gp']);

和html按钮

 <input type="button"  value="Login" onclick="login()" />
<input type="button"  value="Logout" onclick="logout()" />

当我尝试不使用requireJS时，同样的代码也能很好地工作，但问题是我必须使用requireJS

gp.js必须是一个模块。

define(['jquery', 'googleplus'], function($, gapi) {
    # your code
    window.loginCallback = function (result) {
        if (result['status']['signed_in']) {
            gapi.client.load('plus', 'v1', function () {
                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 += "Email:" + email + "<br>";
                    str += "DOB:" + resp['birthday'] + "<br>";
                    str += "Gender:" + resp['gender'] + "<br>";
                    document.getElementById("profile").innerHTML = str;
                });
            });
        }
    };
    $('#login').click(login);
    $('#logout').click(logout);
});

并修改模板：

<input type="button"  value="Login" id="login" />
<input type="button"  value="Logout" id="logout" />

因为gapi.signIn方法需要全局命名空间中的回调函数，所以loginCallback函数必须是全局的。