Как мне загрузить Google Sheet с помощью Google Picker на JavaScript? - PullRequest
Новая
       93

Как мне загрузить Google Sheet с помощью Google Picker на JavaScript?

0 голосов
/ 17 июня 2019

Я пытаюсь реализовать Google Picker и Google Drive API в JavaScript на моем веб-сайте.В настоящее время я использую сценарий PHP для извлечения документов Google Диска, но он использует ограниченные области действия, и я хочу удалить ограниченные области действия из своего приложения.

Во-первых, у меня работает код быстрого запуска Google Picker .Я пытался добавить Google Drive get , используя маркер доступа, который я получил в коде Google Picker.Код Google Диска появляется в файле client.js, верно?Совместим ли токен доступа, используемый в api.js, с токеном доступа, используемым для client.js?

Я нашел старый Gist из шести лет назад и пытался интегрировать и обновить его.Вот мой код прямо сейчас.gapi.client.drive.files.get не удается получить файл. 

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

var pickerApiLoaded = false;
var driveApiLoaded = false;
var oauthToken;

// Use the API Loader script to load google.picker and gapi.auth.
function onApiLoad() {
    gapi.load('auth2', onAuthApiLoad);
    gapi.load('picker', onPickerApiLoad);
}

function onClientLoad() {
    gapi.client.setApiKey(developerKey);
    gapi.client.load('drive', 'v2', onDriveApiLoad);
}

function onAuthApiLoad() {
    var authBtn = document.getElementById('auth');
    authBtn.disabled = false;
    authBtn.addEventListener('click', function() {
        gapi.auth2.init({ client_id: clientId }).then(function(googleAuth) {
            googleAuth.signIn({ scope: scope }).then(function(result) {
                handleAuthResult(result.getAuthResponse());
            })
        })
    });
}

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

function onDriveApiLoad() {
    driveApiLoaded = true;
}

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

// Create and render a Picker object for picking user Photos.
function createPicker() {
    if (pickerApiLoaded && oauthToken) {
        var view = new google.picker.DocsView(google.picker.ViewId.SPREADSHEETS);
        //view.setMimeTypes("text/csv");
        //view.setMode(google.picker.DocsViewMode.LIST);
        view.setQuery(jQuery('[updateparam="name"]').val());

        var picker = new google.picker.PickerBuilder().
                //addView(google.picker.ViewId.DOCS).
                addView(view).
                setInitialView(view).
                setOAuthToken(oauthToken).
                setDeveloperKey(developerKey).
                setCallback(pickerCallback).
                build();
        picker.setVisible(true);
    }
}

// A simple callback implementation.
function pickerCallback(data) {
    if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
        var doc = data[google.picker.Response.DOCUMENTS][0];
        var fileId = doc[google.picker.Document.ID];
        jQuery('[updateparam="googleDriveFileId"]').val(fileId);

        //if (driveApiLoaded) {
            var request = gapi.client.drive.files.get({
                'fileId': fileId
            });
            request.execute(function(file) {
                var xhr = new XMLHttpRequest();
                xhr.open('GET', file.downloadUrl);
                xhr.setRequestHeader('Authorization', 'Bearer ' + oauthToken);
                xhr.onload = function() {
                    console.log(xhr.responseText);
                };
                xhr.onerror = function() {
                    warningMessage.displayMessage('Failed to download Google Drive document ' + fileId);
                };          
            });
        //} else {
        //  warningMessage.displayMessage('Google Drive API has not been loaded.');
        //}
    }
    // Triggers before Picker is shown
    // else {
    //  warningMessage.displayMessage('No Google Drive document selected.');
    //}
}

И мои теги сценария: 

<!-- The Google API Loader script. -->
<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?key=KEY"></script>
<script type="text/javascript" src="https://apis.google.com/js/client.js?onload=onClientLoad"></script>

Ответы [ 2 ]

1 голос
/ 19 июня 2019

Проблема заключается в том, что при попытке получить атрибут downloadUrl в file.downloadUrl, который является полем, которого больше нет в Drive API версии 3 (это было в версии 2), проверьте v2 [1] иv3 [2].

Вместо этого вы должны использовать атрибут webContentLink для загрузки файла, который доступен для файлов с бинарным содержимым, таких как изображения, pdf и т. Д., Но не для документов и листов Google (доступен только атрибут webViewLink, которыйURL к файлу) [2].Для этих случаев (документы и листы) вы можете реализовать метод импорта, который работает для преобразования документов Google и возвращает объект файла [3].Запрос на импорт будет выглядеть следующим образом: 

var request = gapi.client.drive.files.import({ 'fileId': fileId, 'mimeType': mimeType });

С mimeType для целевого документа, который вы хотите (pdf, txt и т. Д.).Затем, внутри обратного вызова, получите доступ к атрибуту с помощью file.webContentLink, как и в других случаях.

[1] https://developers.google.com/drive/api/v2/reference/files

[2] https://developers.google.com/drive/api/v3/reference/files

[3] https://developers.google.com/drive/api/v3/reference/files/export

0 голосов
/ 15 июля 2019

Методом проб и ошибок я обнаружил, что для загрузки как Google Picker (client: auth2), так и Google Drive API (gapi.client), Google Picker должен быть инициализирован обратным вызовом, а затем Google Drive API инициализируется Обещанием, которое должно быть связано. Если Обещание не приковано, то оно будет неразрешенным и не будет работать. 

// 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() {
    driveApiLoaded = true;
}

function onPickerApiLoad() {
    pickerApiLoaded = true;
}

function askForClientAuthorization() {
    gapi.load('client:auth2', function(_) {
        window.gapi.client.init({
            apiKey: developerKey,
            clientId: clientId,
            discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"],
            scope: 'https://www.googleapis.com/auth/drive.file'
        })
        .then(function(__) {
            return gapi.client.drive.files.export({
                'fileId': window.googleDriveFileId,
                'mimeType': 'text/csv'
            })
            .then(function(file) {
                // Client is authorized to access this file, do something with the file
            })
            .catch(function(e) {
                gapi.auth.authorize(
                {
                    'client_id': clientId,
                    'scope': scope,
                    'immediate': false
                },
                handleAuthResult);
            });

        })
    })
}

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

// Create and render a Picker object for searching images.
function createPicker() {
    if (pickerApiLoaded && oauthToken) {
        var view = new google.picker.DocsView(google.picker.ViewId.SPREADSHEETS);
        view.setMode(google.picker.DocsViewMode.LIST);
        view.setQuery(window.dataFeedName);
        var picker = new google.picker.PickerBuilder()
                .setAppId(appId)
                .setOAuthToken(oauthToken)
                .addView(view)
                .setDeveloperKey(developerKey)
                .setCallback(pickerCallback)
                .build();
         picker.setVisible(true);
         return picker;
    }
}

// A simple callback implementation.
function pickerCallback(data) {
    if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
        // Do work
    }
}

С этим кодом он должен проверять, авторизован ли пользователь для каждого выполнения.

...