Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Picker API auth

I plan to have a webapp for user to upload file to my drive. I create a service account and get the OAuth token for Google Picker. I confirm the access token is vaild. However, Google Picker API returns 403. It only works if I login with my account ('[email protected]').

I have searched many days, but still do not have a solution for that. Any comments are appreciated.

Here is my code.

<?php

require_once '/vendor/autoload.php';
use Google\Client;
use Google\Service\Drive;

$client = new Client();
$client->setAuthConfig('service_account.json');

$client->setApplicationName("GooglePickerAPI");
$client->setScopes(['https://www.googleapis.com/auth/drive.file']);
$client->setSubject('[email protected]');
$client->setAccessType('offline');

$client->authorize()->get('https://www.googleapis.com/auth/drive.file');

// Get the access token
$accessToken = $client->getAccessToken();
$accessTokenJson = json_encode($accessToken);

?>

<!DOCTYPE html>
<html>
<head>
  <title>Picker API Quickstart</title>
  <meta charset="utf-8" />
</head>
<body>
<p>Picker API API Quickstart</p>

<!--Add buttons to upload-->
<button id="authorize_button" onclick="createPicker()">Upload</button>

<pre id="content" style="white-space: pre-wrap;"></pre>

<script type="text/javascript">
  let response = <?php echo $accessTokenJson; ?>

  const SCOPES = 'https://www.googleapis.com/auth/drive.file';
  const CLIENT_ID = 'MY_CLIENT_ID';
  const API_KEY = 'MY_API_KEY';
  const APP_ID = 'MY_APP_ID';

  let accessToken = response['access_token'];
  document.getElementById('authorize_button').style.visibility = 'visible';

  /**
   *  Create and render a Picker object for searching images.
   */
  function createPicker() {
    const view = new google.picker.View(google.picker.ViewId.DOCS);
    view.setMimeTypes('image/png,image/jpeg,image/jpg');
    const picker = new google.picker.PickerBuilder()
        .enableFeature(google.picker.Feature.NAV_HIDDEN)
        .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
        .setDeveloperKey(API_KEY)
        .setAppId(APP_ID)
        .setOAuthToken(accessToken)
        .addView(view)
        .addView(new google.picker.DocsUploadView())
        .setCallback(pickerCallback)
        .build();
    picker.setVisible(true);
  }

  /**
   * Displays the file details of the user's selection.
   * @param {object} data - Containers the user selection from the picker
   */
  async function pickerCallback(data) {
    if (data.action === google.picker.Action.PICKED) {
      let text = `Picker response: \n${JSON.stringify(data, null, 2)}\n`;
      const document = data[google.picker.Response.DOCUMENTS][0];
      const fileId = document[google.picker.Document.ID];
      console.log(fileId);
      const res = await gapi.client.drive.files.get({
        'fileId': fileId,
        'fields': '*',
      });
      text += `Drive API response for first document: \n${JSON.stringify(res.result, null, 2)}\n`;
      window.document.getElementById('content').innerText = text;
    }
  }
</script>
    <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
    <script>gapi.load("picker", "1");</script>    
</body>
</html>
like image 285
Jaguar Li Avatar asked Oct 20 '25 11:10

Jaguar Li


1 Answers

This seems a recent issue and is happening globally. This might not have anything with the code, its issue from Google itself. Please find the below link to track this issue. https://issuetracker.google.com/issues/328843663

like image 83
Umang Kamdar Avatar answered Oct 23 '25 00:10

Umang Kamdar



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!