requireJS and Google+ Javascript API

Question

I have been trying this a while and I am totally stuck on this issue and hope someone can give me some ideas how I can solve this. The problem is here.

I would like to use Google Javascript API for my site login. My javascript is

define(function (require) {
    init = function(){
        require( ['https://apis.google.com/js/platform.js?onload=renderButton'], function(gapi){
            renderButton();
        });
    },
    renderButton = function(){
        console.log("renderbutton called");
        gapi.signin2.render('google-signin', {
            'scope': 'https://www.googleapis.com/auth/plus.login',
            'width': 151,
            'height': 25,
            'longtitle': true,
            'theme': 'dark'
        });
    },
});

When I do this, it returns error message with "ReferenceError: gapi is not defined"

so I have tried as below but no luck.

define(function (require) {
    init = function(){
        require( ['https://apis.google.com/js/platform.js?onload=renderButton'], function(gapi){
            renderButton(gapi);
        });
    },
    renderButton = function(gapi){
        console.log("renderbutton called");
        gapi.signin2.render('google-signin', {
            'scope': 'https://www.googleapis.com/auth/plus.login',
            'width': 151,
            'height': 25,
            'longtitle': true,
            'theme': 'dark'
        });
    },
});

Answer 1

I set up a requirejs config like this:

window.require = {
    "shim": {
        "gapi": {
            "exports": "gapi"
        }
    },
    "paths": {
        "gapi": "https://apis.google.com/js/platform"
    }
}

Then I can do:

require(['gapi'], function (gapi) {
  gapi.load("", function () {
    // ..whatever..
  });
});

It's...a weird library though. I was trying to do the signing library and ended up needing to do this

gapi.load('auth2', function () {
  gapi.auth2.init({
    client_id: GOOGLE_SIGN_IN_CLIENT_ID
  });
  gapi.load('signin2', function () {
    gapi.signin2.render('g-signin', options);
  });
});

So you may want to set up a 'google-signin' loader. requirejs loader plugins . Basically it would look like this:

define('gapi', {
    load: function (name, req, onload, config) {
        //req has the same API as require().
        req(['gapi'], function (gapi) {
            gapi.load(name, function () {
              onload(gapi[name]);
           });
        });
    }
});

And then you can just:

require(['gapi!auth2', 'gapi!signin2'], function (auth2, signin2) {
  auth2.init({client_id: CLIENTID});
  signin2.render(...);
});

Answer 2

I know I asked the question but I was finally able to make it work. I am not sure if I did correct way. So please let me know if there is a better way to approach.

My javascript is

define(function (require) {
    "use strict";
    var $ = require('jquery'),
    ....
    ....
    .... includes other codes

    require( ['https://apis.google.com/js/platform.js'], function(){
        var renderButton;

        window.gapi.signin2.render('google-signin', {
            'scope': 'https://www.googleapis.com/auth/plus.login',
            'width': 151,
            'height': 25,
            'longtitle': true,
            'theme': 'dark',
            'onsuccess': onSuccess,
            'onfailure': onFailure
        });
    });
}