Google Plus API error gapi.loaded_0

Question

I am trying to use requireJS with Google plus API, but getting an error when I click login button

Here is the error and screenshot:

GET https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.f5Li87Zolqg.O/m…sv=1/d=1/ed=1/am=AQ/RS=AGLTcCPR6xH_GlLdKZ8KMxaWNPWQokoYsg/cb=gapi.loaded_0

Screenshot: https://i.imgsafe.org/098c5b5634.png

And I am using this code:
gapi is not defined error comes when using with requirejs

Note: I am calling a gp.js inside a JavaScript file and defining it there here is the first line for it.

My screen.js file

define(["facebook","fb","googleplus","gp"], function(facebook,fb,gapi,gp){
// some bunch other code will go here

            $('#login').click(login);

            // some other code will go here

});

gp.js is contains the following code

 //$('#login').click(login);
    //$('#logout').click(logout);
function logout(){
    gapi.auth.signOut();
    location.reload();
}
function login() {
    var myParams = {
        'clientid' : '455646565646-ppqmgsfghfdhgfghqguj3i4ir70i.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);
}

    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;
                });
            });
        }
    }

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

And my main.js goes here

require.config({
    shim: {

        'gp' : {
            deps: ['jquery','googleplus'],


        },
        'googleplus' : {
            deps: ['jquery'],
            exports: 'gapi'
        },


    },
    paths: {
        'googleplus': 'https://apis.google.com/js/client.js?onload=onLoadCallback'

    },

})
require(['gp']);

Why is this happening and how can I fix it?

Answer 1

gs.js must be a module and if You want to use a function defined inside a module, this module must return this function:

define(['jquery', 'googleplus'], function($, gapi) {
    function logout(){
        gapi.auth.signOut();
        location.reload();
    }
    function login() {
        var myParams = {
            'clientid' : '455646565646-ppqmgsfghfdhgfghqguj3i4ir70i.apps.googleusercontent.com',
            'cookiepolicy' : 'single_host_origin',
            '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.load('client:auth2', function() {
            gapi.auth2.init(myParams).then(function() {
                gapi.auth2.getAuthInstance().signIn().then(loginCallback);
            });
        });
    }

    var loginCallback = function ()  {
        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;
            });
        });

    }

    gapi.client.setApiKey('Sgtfjhygjhgjhg9U1nKaZ5H1MmwTuthspQPNqY');

    return {
        login: login,
        logout: logout
    };
});

Now You can use functions login and logout in other modules:

define(["jquery", "gp"], function($, gp){
    $('#login').click(gp.login);
});

EDIT:

I try to rewrite login function based on https://developers.google.com/identity/sign-in/web/reference#gapiauth2initwzxhzdk19paramswzxhzdk20