Google Picker for Sheets Add-on - OAuth issues

[Craig Smith]

I am working to add the Google Picker to my Sheets add-on so it will be prepared for the new drive scopes. I think it may be a good thing and should make the add-on more user friendly. I tried to publish an experimental version of my add-on as unlisted in the Chrome store and just to my domain in the G Suite Marketplace. I can get the add-on installed from the Chrome store and all the previous features seem to work fine. I am attempting to get the Google Picker to authorize and open my drive files using an example from Picker Guides (https://developers.google.com/picker/docs/). 

I am currently stuck on the OAuth process and seem to be confused or not to understand exactly how to set up the Google Cloud Platform / APIs & Services / Credentials area. There is a yellow caution sign next to the Apps Script Client ID that states “This automatically generated OAuth client ID is required for your project. It can't be modified”. I enabled the Picker API and set the HTTP referrers to https://*.google.com & https://*.googleusercontent.com. 

I am under the impression this should be what is needed, but I am getting a "redirect_uri_mismatch" error saying the Javascript origin of xx...xx.googleusercontent.com does not match the ones authorized for the OAuth client.

I also seem to be having issues in the Google Cloud Platform / G Suite Marketplace SDK with some options that I am not able to save or change in the configure & publish section and not being able to update in the Publish section. Any help or ideas would be appreciated.

[Alan Wells]

I also recently set up the Google picker with the new drive.files scope.  It is working.  I did not make a setting for the HTTP Referers under the "Application Restriction" section.  I left the setting at "None".  The HTTP Referers is for web sites.  An add-on is not a web site.  If I'm wrong, hopefully someone from Google, or who has the official answer will respond.

I only set the "API Restrictions" to the Google Picker API. 

Currently, the "Publish" section in the GCP for the G Suite Marketplace SDK is not totally enabled for publishing add-ons.  The publishing is still handled through the Apps Script code editor, and the Chrome Web Store.  So, at the moment, don't worry about the Publish button being disabled for the "Publish" section in the GCP for the G Suite Marketplace SDK.

There are situations where you can not update or save settings.  The section you need to focus on is the Configuration section of the G Suite Marketplace SDK, AND you need to also make sure that the OAuth Consent Screen section for APIs and Services / Credentials is filled out.  So, you need to list the scopes in TWO places in the GCP project for your Apps Script project.  So, there are 3 places where the scopes need to be identical.  Two places in GCP and in your appsscript.json manifest file.

You didn't mention that you got the developerKey and put it into your client side picker script.  Have you done that?

[Craig Smith]

Thanks for the help Alan.I think I have all the scopes input correctly in the G Suite Marketplace SDK / Configuration, the APIs and Services / Credentials, and the Apps Script JSON file. I changed the API Key to the settings you mentioned, to restrict just to the Picker & no HTTP referrer. I am still getting the same error. 

I was kind of guessing on the Developer Key, and I initially used the API key that refers to the Picker API as the Developer Key that I changed above. That is at least not working yet, but my best guess as to what it should be. When I open the link it refers to in the error message I am taken to my Apps Script Client ID details for the project which shows my client secret key which I tried, but it did not work as the Developer Key. I have also tried the Project ID, but it did not work either. This could be the issue, but I am not sure what other keys to attempt as the Developer Key. 

[Alan Wells]

The correct key is in the same page as where the settings for the application restrictions.  If you use that API key, then that is the correct key for the developer key.

Make sure that you are loading the api:

<script src="https://apis.google.com/js/api.js?onload=onApiLoad"></script><!-- This is for the file picker -->


<script>
var DEVELOPER_KEY = 'Your developer key';//Replace with the API key obtained
// from the Google Developers Console
var DIALOG_DIMENSIONS = {width: 600, height: 425};
var PICKER_API_LOADED = false;

function onApiLoad() {
  /**
  * Load the Google Picker API
  */
  gapi.load('picker', {'callback': function() {
  PICKER_API_LOADED = true;
}});
}

Make the picker.  Not complete code.  Just a snippet.

    view = new google.picker.DocsView();//google.picker.ViewId.SPREADSHEETS
    view.setMode(google.picker.DocsViewMode.LIST).setMimeTypes("application/vnd.google-apps.spreadsheet");
    view.setEnableSharedDrives(true);
       
    picker = new google.picker.PickerBuilder()
    // Instruct Picker to display only spreadsheets in Drive- For other
    // views, see https://developers.google.com/picker/docs/#otherviews
      .addView(view)// Hide the navigation panel so that Picker fills more of the dialog
      .enableFeature(google.picker.Feature.NAV_HIDDEN)// Hide the title bar since an Apps Script dialog already has a title
      .hideTitleBar()
      .setOAuthToken(token)
      .setDeveloperKey(DEVELOPER_KEY)
      .setCallback(AlanWells.googPkrFileSelected)
      .setOrigin(google.script.host.origin)
      // Instruct Picker to fill the dialog, minus 2 pixels for the border.
      .setSize(DIALOG_DIMENSIONS.width - 2,
          DIALOG_DIMENSIONS.height - 2)
      .build();    
   
  picker.setVisible(true);

The provided code is not the entire process.  It's just part of the code.