Google Picker with AccessToken not working

Question

I can't seem to get Google Picker working. I have authenticated my user using the PHP League Oauth Provider

After authenticating, an accessToken for my user looks something like this;

ya67.Fi_dfioriogneegroig7Czdy54z0sdfdvnfr9fn38n3n93

This is my Javascript and HTML code for rendering the picker;

<a href="{{ appContextInstallId }}/authenticate" class="btn info">
    <i class="icon-bolt"></i> Authenticate
</a>

<button onClick="createPicker()">Add a new document</button>

<script type="text/javascript">

    var developerKey = 'erteetr43gg-V34y4httytjyjytjyttyjyjyjjy';
    var clientId = "373498750987-5dsfwerrwewerweewrl.apps.googleusercontent.com"
    var appId = "373498750987"

    var scope = ['https://www.googleapis.com/auth/drive'];
    var pickerApiLoaded = false;

    // Use the Google API Loader script to load the google.picker script.

    // Create and render a Picker object for searching images.
    function createPicker() {
        var view = new google.picker.View(google.picker.ViewId.DOCS);
        var picker = new google.picker.PickerBuilder()
            .enableFeature(google.picker.Feature.NAV_HIDDEN)
            .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
            .setAppId(appId)
            .setOAuthToken("{{ token|escape }}")
            .addView(view)
            .addView(new google.picker.DocsUploadView())
            .setDeveloperKey(developerKey)
            .setCallback(pickerCallback)
            .build();

        picker.setVisible(true);
    }

    // A simple callback implementation.
    function pickerCallback(data) {
        // makes an ajax call....
    }
</script>

<!-- The Google API Loader script. -->
<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

My accessToken is available at {{ token|escape }}.

When I try and click the "Add a new document" button, I get the following error.

Uncaught ReferenceError: google is not defined at createPicker

I don't know why this is. Am I not using the access token correctly?

By the way, I need to take of the accessToken business using server side technology because I have multiple sub-domains and you can't wildcard them in Google Dev Console. Therefore, I can't just use a standard example like this one to authenticate via client side.

PS - Obviously those aren't my real tokens/secrets in the code block above. They have been changed.

Answer 1

You may want to check Google Loader Developer's Guide for a more detailed information on how to load Google APIs.

As discussed,

To load the APIs, include the following script in the header of your web page.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

Next, load the Google API with google.load(module, version), where

• module calls the specific API module you wish to use on your page.
• version is the version number of the module you wish to load.

After you call google.load, you can use all of the loaded modules in your web page.

Lastly, you may want to check Available APIs, specifically Picker API Developer's Guide and make sure that you haven't missed important functions when creating a Picker object.

Hope that helps!