How to avoid redirect_uri_mismatch error when integrating Google Picker API into Google Sheets powered by App Scripts?

P

paroletatel2021-08-06 02:50:56

Google Apps Script

paroletatel, 2021-08-06 02:50:56

<script type="text/javascript">

    // The Browser API key obtained from the Google API Console.
    // Replace with your own Browser API key, or your own key.
    var developerKey = '';

    // The Client ID obtained from the Google API Console. Replace with your own Client ID.
    var clientId = ""

    // Replace with your own project number from console.developers.google.com.
    // See "Project number" under "IAM & Admin" > "Settings"
    var appId = "";

    // Scope to use to access user's Drive items.
    var scope = ['https://www.googleapis.com/auth/drive.file'];

    var pickerApiLoaded = false;
    var oauthToken;

    // Use the Google API Loader script to load the google.picker script.
    function loadPicker() {
      gapi.load('auth', {'callback': onAuthApiLoad});
      gapi.load('picker', {'callback': onPickerApiLoad});
    }

    function onAuthApiLoad() {
      window.gapi.auth.authorize(
          {
            'client_id': clientId,
            'scope': scope,
            'immediate': false
          },
          handleAuthResult);
    }

    function onPickerApiLoad() {
      pickerApiLoaded = true;
      createPicker();
    }

    function handleAuthResult(authResult) {
      if (authResult && !authResult.error) {
        oauthToken = authResult.access_token;
        createPicker();
      }
    }

    // Create and render a Picker object for searching images.
    function createPicker() {
      if (pickerApiLoaded && oauthToken) {
        var view = new google.picker.View(google.picker.ViewId.DOCS);
        view.setMimeTypes("spreadsheet/xlsx");
        var picker = new google.picker.PickerBuilder()
            .enableFeature(google.picker.Feature.NAV_HIDDEN)
            .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
            .setAppId(appId)
            .setOAuthToken(oauthToken)
            .addView(view)
            .addView(new google.picker.DocsUploadView())
            .setDeveloperKey(developerKey)
            .setCallback(pickerCallback)
            .build();
         picker.setVisible(true);
      }
    }

    // A simple callback implementation.
    function pickerCallback(data) {
      if (data.action == google.picker.Action.PICKED) {
        var fileId = data.docs[0].id;
        alert('The user selected: ' + fileId);
      }
    }
    </script>
  </head>
  <body>
    <div id="result"></div>
    <button onclick="showPickerDialog()">Show Picker Dialog</button>

    <!-- The Google API Loader script. -->
    <script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
    <script>
    function showPickerDialog(){
        loadPicker()
    }
    </script>

I have a code that generates a request to the Google Picker.
I registered my project on Google Cloud, published it as a web application in OAuth 2.0 to get a client id, got an api key and a project key. In the web application publishing settings, I specified the URIs: https://localhost and https://docs.google.com (from the logic that everything should be done from the table), but I still when executing and activating the script, even before the stage authorization I catch an error:

Where does it come from, if not from invalid URIs?
What needs to be done in order for the script to execute correctly from Google Sheets?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Alexander Ivanov, 2021-08-06
@paroletatel

Check key restriction settings

https://*.google.com/*
https://*.googleusercontent.com/*
https://*.docs.google.com/*

But this is optional, it should work without restrictions.
Sample project https://script.google.com/d/19uU9zhRHMGNrodn0adPli...
Test https://script.google.com/macros/s/AKfycbz5sjN5pC2...